All components (244)

Safe HTML viewer

Fields · HtmlViewer

What it is and when to use it

Shows HTML that cannot be trusted, without running any of it. It is imported from @amset/ui/rich-text.

Two modes

document (default): the HTML is read, goes through the editor schema and is drawn in React with the library style. No frames, no innerHTML, also on the server.
page: keeps the design of the HTML (its styles, its layout) inside an isolated frame: the HTML is rewritten with an allowlist of tags, attributes, addresses and CSS; the frame has no allow-same-origin (for the browser it is another origin), cannot open windows, submit forms or navigate the page, and a content policy does not let it load anything from outside. The height is measured by a script of ours and link clicks go out through onLinkClick.

What it is not: it does not make safe the content that *you* run afterwards. Sanitizing is not running safely: that is why there is no mode that runs the scripts of the HTML.

What it looks like

Your order has shipped

Order #1042 arrives tomorrow.

See the order

import { HtmlViewer } from "@amset/ui/rich-text";

// El script y el enlace con JavaScript no llegan a la pantalla
<HtmlViewer html={correo} title="Email received" />

Props

Import it with import { HtmlViewer } from '@amset/ui/rich-text'. Required props are marked.

Prop	Type	What it does
`html`required	`string`	El HTML a enseñar. No hace falta que sea de fiar.
`mode`	`'document' \| 'page'`	`document` (por defecto): el HTML se lee, pasa por el esquema del editor y se pinta en React con el estilo de la biblioteca; no se ejecuta ni se incrusta nada. `page`: se respeta su diseño (sus estilos, su maquetacion) dentro de un marco aislado y sin permisos.
`images`	`ImagePolicy`	Que imagenes se dejan en modo pagina: ninguna, incrustadas (`data`, por defecto) o tambien `https`.
`title`	`string`	Obligatorio en modo pagina: es el nombre del marco para quien no lo ve.
`minHeight`	`number`	Altura minima y maxima del marco en modo pagina.
`maxHeight`	`number`	—
`onLinkClick`	`(href: string) => void`	Un clic en un enlace del modo pagina. Por defecto, los enlaces `http(s)`, `mailto` y `tel` se abren en otra pestaña.
`onReport`	`(report: SanitizeReport) => void`	Lo que se descarto al sanear (etiquetas, atributos, direcciones, estilos).
`className`	`string`	—

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: