Herramientas de desarrollo · Editor HTML WYSIWYG
Del DOM al marcado: cómo la serialización internalHTML da forma al HTML que obtienes
· Cómo funciona
html entidades-html flujo de trabajo del desarrollador
Explica las reglas que siguen los navegadores al convertir un árbol DOM nuevamente en una cadena HTML, desde escapes y entidades hasta elementos nulos y citas de atributos, y por qué la salida del editor tiene el aspecto que tiene.
Por qué <br> vuelve como <br /> en este desinfectante
Un fragmento de origen que contiene `<br>` deja este desinfectante como `<br />`. Ese resultado no es prueba de que todos los navegadores serialicen HTML con una barra diagonal. Es una elección deliberada en la reescritura de cadenas de ToolAcre, cuya rama de elemento vacío emite un espacio y una barra para los elementos br y hr permitidos.
La distinción evita una explicación falsa común. La superficie visual se lee a través de internalHTML, pero la fuente copiada luego se tokeniza y se reconstruye mediante el código de la aplicación. Lo que reciben los usuarios refleja tanto la cadena DOM creada por el navegador como las convenciones de salida más estrictas de ToolAcre, incluidos alias, atributos filtrados y etiquetas equilibradas.
Entrada de tokens, reescritura de la lista de permitidos: esto no es serialización HTML interna del navegador
El tokenizador escanea caracteres sin construir nodos DOM ni llamar a DOMParser. Reconoce texto, comentarios, declaraciones, etiquetas de inicio, etiquetas de finalización y cuerpos de elementos de texto sin formato. La desinfección repite esa secuencia plana, manteniendo las estructuras permitidas, desenvolviendo envoltorios ordinarios desconocidos y suprimiendo contenedores peligrosos con su contenido.
En consecuencia, no se conserva la ortografía original. Los nombres que contienen mayúsculas y minúsculas se vuelven minúsculas; b se vuelve fuerte, i se convierte en em, strike y del se vuelven s, e ins se convierte en u. La salida se regenera a partir de tokens aceptados en lugar de devolverse como la subcadena original, por lo que el formato de origen y los detalles no admitidos desaparecen por diseño.
Escapar de texto y atributos mientras se normalizan entidades conocidas
El texto se decodifica primero como entidad y se escapa nuevamente. Los símbolos de unión se convierten en `&`, los signos de menor que y mayor que se convierten en `<` y `>`, y los caracteres de control prohibidos desaparecen. Este orden mantiene estable un `&` existente en pasadas repetidas en lugar de convertirlo en `&amp;`.
Los valores de atributos siguen una ruta de escape más estricta que también incluye comillas dobles, comillas simples, corchetes angulares y ampersands. Las entidades conocidas se decodifican antes de que se emitan los atributos aceptados. Las pruebas indican idempotencia para consultas de texto y enlaces, pero el código no promete la preservación de la ortografía de cada entidad de autor, como una referencia nombrada versus una referencia numérica.
Elementos vacíos y etiquetas de cierre balanceadas en la reescritura personalizada
Solo br y hr están permitidos y clasificados como nulos en el conjunto de salida. Nunca reciben etiquetas de cierre. Para elementos permitidos no vacíos, una pila abierta registra el anidamiento. Un cierre cruzado, como fuerte alrededor de em, hace que los elementos internos se cierren primero, produciendo un marcado equilibrado en lugar de preservar un orden mal formado.
Los elementos no cerrados se cierran al final, mientras que las etiquetas de cierre perdidas se ignoran. Esta es la política de equilibrio de la reescritura, no una implementación completa de la recuperación de errores HTML5 del navegador. La propia fuente advierte sobre las diferencias entre analizadores, por lo que el resultado no debe comercializarse como un desinfectante universal de entradas hostiles.
Los atributos están incluidos en la lista permitida y citados; El pedido de origen por sí solo no es el contrato.
No sobrevive ninguna bolsa de atributos genéricos. Los párrafos y títulos no lo permiten; los enlaces permiten href y título; las abreviaturas permiten el título; las citas se permiten citar; Las listas ordenadas permiten el inicio y el tipo. Cada valor emitido está entre comillas dobles y los enlaces aceptados también obtienen `rel="noopener noreferrer nofollow"`.
El orden de los atributos sigue los tokens aceptados y el campo rel agregado, pero depender del orden sería frágil. El significado reside en los nombres y valores permitidos. Se descarta un inicio de número entero con formato incorrecto, se rechazan los esquemas de citas o href inseguros y los atributos desconocidos generan motivos de eliminación en lugar de convertirse silenciosamente en parte del marcado publicado.
Ejemplo resuelto: ida y vuelta de un fragmento a través del desinfectante de ToolAcre
Pruebe `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>`. La clase se elimina, B se asigna a fuerte, el signo comercial existente sigue siendo un signo comercial escapado, br se cierra automáticamente y el enlace inseguro pierde su href mientras conserva el texto del enlace visible.
El modo de fuente bonita luego coloca los elementos de bloque admitidos en las líneas y sangra los elementos secundarios. Deja el contenido en línea junto y conserva el texto dentro del pre. El formateo es una mejora de la legibilidad sobre la salida ya reescrita; no es un segundo analizador de seguridad y no restaura los espacios en blanco que la normalización anterior eliminó.
Lo que esto no cubre: navegador, XML o serialización XHTML
Este artículo no describe las garantías de serialización del navegador nativo, XMLSerializer, la sintaxis XHTML o las reglas opcionales de etiquetas de cierre HTML en general. Documenta las convenciones observables en este repositorio. Las afirmaciones sobre ` ` específicamente se omiten porque la tabla de entidades locales, no un serializador de navegador general, determina las referencias con nombre reconocidas.
El generador de vista previa desinfecta una vez más y envuelve el fragmento en un documento completo con un tema ligero. Copiar HTML devuelve el fragmento; Descargar HTML devuelve ese documento. Esos son artefactos intencionalmente diferentes. Lea la etiqueta de acción antes de asumir que un archivo descargado tiene bytes idénticos a la fuente copiada.
Conclusión: el serializador es consistente, su entrada no lo fue: resume cómo predecir la salida del editor y cómo el editor HTML WYSIWYG de ToolAcre muestra lo que realmente produce el navegador.
Predice ToolAcre siguiendo sus etapas: tokenizar la cadena, decodificar entidades admitidas, aplicar alias de elementos y listas permitidas, inspeccionar URL, equilibrar etiquetas aceptadas, escapar de la salida y, opcionalmente, imprimirla. Esa secuencia explica el resultado real con mayor precisión que decir que InnerHTML simplemente preserva o serializa la fuente del autor.
Utilice el modo fuente para observar la reescritura con un pequeño dispositivo antes de procesar un borrador largo. El desinfectante rechaza documentos con más de 500,000 caracteres, por lo que la entrada de gran tamaño falla en lugar de congelar la pestaña. Mantenga la propia política HTML del destino separada del subconjunto deliberadamente compacto de este editor.