Инструменты разработчика · Редактор HTML WYSIWYG
DOM Объяснение для редакторов: почему HTML — это дерево, а не текстовый файл
· Фон
HTML дом довольный и редактируемый
Представляет объектную модель документа для непрограммистов, охватывающую правила вложения, родительские и дочерние элементы, а также то, как браузеры исправляют недопустимую вложенность, чтобы объяснить поведение редактора, которое в противном случае кажется произвольным.
Почему ваш <p> закрылся сам — открывается с разметкой, которая изменилась после вставки
После прохождения фрагмента через редактор может показаться, что абзац закрывается или перемещается, потому что в конечном итоге имеет значение полученное дерево, а не исходная последовательность символов автора. ToolAcre добавляет еще одно преобразование: оно маркирует и перезаписывает источник, полученный из браузера, в свой собственный список разрешений.
Когда источник изменится, спросите, на каком этапе он изменился. Браузер мог изменить редактируемый контент DOM, или дезинфицирующее средство могло сопоставить псевдоним, развернуть узел или сбалансировать принятые теги. Называя каждое отличие «браузер исправил это», скрывает эту важную границу.
Коробки внутри коробок — представляет древовидную модель на кратком примере.
Думайте об элементах как о блоках, соединенных отношениями родитель-потомок. В `<p>Read <strong>carefully</strong>.</p>` p является родительским элементом текста, Strong и More text; сильный является родителем слова осторожно. Отступы исходного кода могут иллюстрировать дерево, но не создают связей.
Красивый форматтер ToolAcre помещает блочные контейнеры в строки и сохраняет встроенные элементы вместе с окружающим текстом. Списки получают строки с отступом li. Этот формат предназначен для чтения очищенного вывода. Фактическая модель остается вложенными элементами и текстовыми узлами независимо от того, является ли источник компактным или распределенным по строкам.
Разрешенная вложенность балансируется переписчиком ToolAcre; модели контента браузера шире
HTML определяет модели контента, которые намного шире и детальнее, чем политика этого редактора. ToolAcre разрешает определенный набор, но не проверяет каждое правило семантической вложенности. Его стек обеспечивает правильное замыкание среди разрешенных тегов; это не является доказательством того, что каждое полученное отношение идеально HTML для пункта назначения.
Например, список должен содержать соответствующие элементы списка, однако общий стек может сохранять необычные разрешенные комбинации, поскольку он не является средством проверки схемы. Авторы должны создавать разумные заголовки, абзацы и списки с помощью панели инструментов или проверенного источника, а затем проверять их в соответствии с требованиями места назначения, если правильность имеет решающее значение.
ToolAcre восстанавливает принятые теги с помощью стека, а не полный алгоритм анализа HTML.
Браузеры применяют полный алгоритм анализа HTML с восстановлением ошибок. ToolAcre не переопределяет его. Его токенизатор распознает структуры, необходимые для списка разрешенных, а его автор закрывает принятые внутренние элементы при появлении пересекающегося закрывающего тега. Он отбрасывает случайное закрытие и закрывает оставшиеся открытые в конце.
В источнике явно указаны различия парсера как причина не рассматривать модуль как общий фильтр враждебного ввода XSS. Браузер может интерпретировать намеренно искаженные строки по-разному. Песочница предварительной версии обеспечивает независимое ограничение на выполнение внутри ToolAcre, в то время как серверам по-прежнему требуется надлежащая очистка с учетом HTML5.
Текстовые узлы и пробелы — поясняет, почему в дереве существуют пробелы и разрывы строк между тегами.
Текст между элементами становится текстовыми токенами, включая символы пробелов. Симпатичный форматтер сворачивает обычные пробелы за пределами pre, в то время как содержимое pre точно сохраняется. Преобразование обычного текста вставляет новые строки после окончания блока и для br, а затем уменьшает количество лишних пустых строк.
Таким образом, пробелы участвуют по-разному на каждом этапе. Визуальное расстояние может определяться текстом, br, границами блоков или CSS. Проверяйте узлы и символы, а не рассматривайте каждый видимый пробел как границу. Санитайзер может нормализовать форматирование пробелов, не меняя слов, которые видит читатель.
Рабочий пример: трассировка примечания из двух абзацев списком — считывает созданную разметку в виде дерева, идентифицируя родителей и детей.
Постройте `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. Фрагмент имеет три дочерних элемента корневого уровня. Абзац содержит текст и сильный; список содержит два дочерних элемента li, каждый из которых содержит текст.
Переключение с источника на визуал и обратно. Разрешенное дерево должно оставаться сбалансированным, а в красивом режиме заголовок и абзац будут располагаться по строкам с отступами для элементов списка. Это упражнение является контролируемым; он не демонстрирует каждый неправильный ввод или путь восстановления браузера.
Что здесь не рассматривается — JavaScript DOM программирование или блочная модель CSS.
В этой статье не рассказывается о программировании JavaScript DOM, наблюдателях мутаций, API выбора или блочной модели CSS. Дерево элементов и дерево блоков макета связаны, но не идентичны. Он также не утверждает, что рукописный список токенов представляет собой браузер DOM.
Из аккуратного дерева не следует никакого обобщенного заключения по безопасности. Злоумышленник может нацеливаться на различия в синтаксическом анализе и URL-адреса, поэтому фильтрация вывода, предварительный просмотр в песочнице и очистка сервера остаются разными. Используйте древовидную модель, чтобы рассуждать о структуре, а не отказываться от проверки безопасности принимающей системы.
Вывод: мыслите деревьями — обобщает ментальную модель и то, как разметка редактора HTML WYSIWYG ToolAcre показывает дерево, которое вы строите.
Подумайте о деревьях, когда визуальное поведение кажется произвольным. Определите родительские, дочерние и текстовые узлы, которые вы намеревались использовать, а затем сравните их с отфильтрованным источником. ToolAcre делает эту проверку практичной, сочетая редактируемый черновой вариант с читаемым переписанным фрагментом.
Сильная ментальная модель также выявляет ограничения: развернутый элемент div теряет родителя, удаленный скрипт теряет свое поддерево, а b становится сильным. Как только эти преобразования становятся явными, исправления становятся структурными решениями, а не повторяющимися визуальными подсказками, разметка которых остается неизвестной.