Todos los componentes (244)
Visor de HTML seguro
Campos · HtmlViewer
Qué es y cuándo usarlo
Enseña HTML que no es de fiar, sin ejecutar nada de él. Se importa de @amset/ui/rich-text.
Dos modos
document(por defecto): el HTML se lee, pasa por el esquema del editor y se pinta en React con el estilo de la biblioteca. Sin marcos, sininnerHTML, también en el servidor.page: respeta el diseño del HTML (sus estilos, su maquetación) dentro de un marco aislado: el HTML se escribe de nuevo con una lista blanca de etiquetas, atributos, direcciones y CSS; el marco no tieneallow-same-origin(para el navegador es de otro origen), no puede abrir ventanas, enviar formularios ni navegar la página, y una política de contenido no le deja cargar nada de fuera. La altura la mide un script propio y los clics en enlaces salen poronLinkClick.
Accesibilidad: el marco lleva siempre un title (por defecto «Contenido», pon uno que diga qué es) para que quien no lo ve sepa qué contiene; el modo documento usa elementos semánticos (títulos, listas, tablas) y, a diferencia del marco, lo que enseña forma parte de la página y se lee en orden con el resto.
Qué no es: no hace seguro el contenido que *tú* ejecutes después. Sanear no es ejecutar de forma segura: por eso no existe un modo que ejecute los scripts del HTML.
Cómo se ve
Tu pedido ha salido
El pedido #1042 llegará mañana.
Ver el pedido
import { HtmlViewer } from "@amset/ui/rich-text";
// El script y el enlace con JavaScript no llegan a la pantalla
<HtmlViewer html={correo} title="Correo recibido" />Props
Se importa con import { HtmlViewer } from '@amset/ui/rich-text'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
htmlobligatoria | 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 | — |
En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: