Herramientas de desarrollo · Editor HTML WYSIWYG
El DOM explicado para editores: por qué HTML es un árbol, no un archivo de texto
· Antecedentes
html dominio contento
Presenta el modelo de objetos de documento para no programadores, que cubre reglas de anidamiento, elementos primarios y secundarios, y cómo los navegadores reparan anidamientos no válidos, para explicar el comportamiento del editor que de otra manera parece arbitrario.
Por qué su <p> se cerró solo: se abre con un marcado que cambió después de pegarlo
Puede parecer que un párrafo se cierra o se mueve después de que un fragmento pasa por un editor porque el árbol resultante, no la secuencia de caracteres original del autor, es lo que en última instancia importa. ToolAcre agrega otra transformación: tokeniza y reescribe la fuente derivada del navegador bajo su propia lista de permitidos.
Cuando la fuente cambia, pregunte en qué etapa la cambió. Es posible que el navegador haya mutado el DOM contenteditable, o que el desinfectante haya asignado un alias, haya desenvuelto un nodo o haya equilibrado etiquetas aceptadas. Llamar a cada diferencia "el navegador la solucionó" oculta este importante límite.
Cajas dentro de cajas: presenta el modelo de árbol con un breve ejemplo.
Piense en los elementos como cajas conectadas por relaciones padre-hijo. En `<p>Read <strong>carefully</strong>.</p>`, p es el padre del texto, fuerte y más texto; fuerte es el padre de la palabra cuidadosamente. La sangría de origen puede ilustrar el árbol pero no crea la relación.
El bonito formateador de ToolAcre coloca contenedores de bloques en líneas y mantiene elementos en línea con el texto circundante. Las listas reciben líneas li sangradas. Este formato es para leer resultados desinfectados. El modelo real sigue siendo elementos anidados y nodos de texto, independientemente de si la fuente es compacta o está distribuida en líneas.
El anidamiento permitido se equilibra con la reescritura de ToolAcre; Los modelos de contenido del navegador son más amplios.
HTML define modelos de contenido que son mucho más amplios y detallados que la política de este editor. ToolAcre permite un conjunto específico pero no valida todas las reglas de anidamiento semántico. Su pila garantiza un cierre bien formado entre las etiquetas permitidas; eso no es prueba de que cada relación resultante sea HTML ideal para un destino.
Por ejemplo, una lista debe contener elementos de lista apropiados, pero la pila genérica puede conservar combinaciones permitidas inusuales porque no es un validador de esquema. Los autores deben crear títulos, párrafos y listas sensatos a través de la barra de herramientas o de la fuente revisada y luego validarlos según los requisitos del destino cuando la corrección sea importante.
ToolAcre repara las etiquetas aceptadas con una pila, no con el algoritmo de análisis HTML completo
Los navegadores aplican un algoritmo de análisis HTML completo con recuperación de errores. ToolAcre no lo vuelve a implementar. Su tokenizador reconoce las estructuras que necesita la lista de permitidos y su escritor cierra los elementos internos aceptados cuando aparece una etiqueta final cruzada. Se cae, se cierra y se cierra, quedando abierto al final.
La fuente menciona explícitamente los diferenciales del analizador como una razón para no tratar el módulo como un filtro XSS general de entrada hostil. Un navegador puede interpretar cadenas deliberadamente mal formadas de forma diferente. La zona de pruebas de vista previa proporciona un límite independiente de ejecución dentro de ToolAcre, mientras que los servidores aún necesitan un saneamiento adecuado compatible con HTML5.
Nodos de texto y espacios en blanco: explica por qué existen espacios y saltos de línea entre etiquetas en el árbol
El texto entre elementos se convierte en tokens de texto, incluidos los espacios en blanco. El bonito formateador colapsa los espacios en blanco ordinarios fuera del pre, mientras que el contenido previo se conserva exactamente. La conversión de texto sin formato inserta nuevas líneas después de los finales de bloque y para br, luego reduce el número excesivo de líneas en blanco.
Por lo tanto, el espacio en blanco participa de manera diferente en cada etapa. El espaciado visual puede provenir de texto, br, límites de bloque o CSS. Inspeccione nodos y caracteres en lugar de tratar cada espacio visible como un margen. El desinfectante puede normalizar el formato de los espacios en blanco sin cambiar las palabras que ve el lector.
Ejemplo resuelto: rastrear una nota de dos párrafos con una lista: lee el marcado producido como un árbol, identificando padres e hijos
Compilación `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. El fragmento tiene tres elementos secundarios en el nivel raíz. El párrafo contiene texto y fuerte; la lista contiene dos hijos li, cada uno con texto.
Cambiar de fuente a visual y viceversa. El árbol permitido debe permanecer equilibrado y el modo bonito colocará el encabezado y el párrafo en líneas mientras sangra los elementos de la lista. Este ejercicio es controlado; no demuestra todas las entradas con formato incorrecto ni las rutas de reparación del navegador.
Lo que esto no cubre: programación DOM de JavaScript o el modelo de caja CSS
Este artículo no enseña programación DOM de JavaScript, observadores de mutaciones, API de selección ni el modelo de caja CSS. El árbol de elementos y el árbol de cuadros de diseño están relacionados pero no son idénticos. Tampoco afirma que la lista de tokens escrita a mano sea un DOM del navegador.
No se desprende ninguna conclusión de seguridad generalizada de un árbol ordenado. Un atacante puede apuntar a diferencias de análisis y URL, razón por la cual el filtrado de salida, la vista previa en el espacio aislado y el saneamiento del servidor siguen siendo distintos. Utilice el modelo de árbol para razonar sobre la estructura, no para renunciar a la revisión de seguridad del sistema receptor.
Conclusión: piense en árboles: resume el modelo mental y cómo el resultado de marcado del editor HTML WYSIWYG de ToolAcre muestra el árbol que está construyendo.
Piense en los árboles cuando el comportamiento visual parezca arbitrario. Identifique los nodos principales, secundarios y de texto que deseaba y luego compárelos con la fuente filtrada. ToolAcre hace que esta inspección sea práctica al combinar un borrador satisfactorio con un fragmento reescrito legible.
Un modelo mental sólido también revela límites: el div desenvuelto pierde un padre, el script eliminado pierde su subárbol y b se vuelve fuerte. Una vez que esas transformaciones son explícitas, las correcciones se convierten en decisiones estructurales en lugar de repetidos empujones visuales cuyo marcado sigue siendo desconocido.