Инструменты разработчика · Редактор HTML WYSIWYG
От DOM к разметке: как сериализация InternalHTML формирует HTML, который вы получаете
· Как это работает
HTML html-объекты рабочий процесс разработчика
Объясняет правила, которым следуют браузеры при преобразовании дерева DOM обратно в строку HTML, от экранирования и сущностей до недействительных элементов и кавычек атрибутов, а также почему выходные данные редактора выглядят именно так.
Почему <br> возвращается в этом дезинфицирующем средстве как <br />
Исходный фрагмент, содержащий `<br>`, оставляет это дезинфицирующее средство как `<br />`. Этот результат не является доказательством того, что каждый браузер сериализует HTML с помощью косой черты. Это осознанный выбор в переписчике строк ToolAcre, чья ветвь void-element выдает пробел и косую черту для разрешенных элементов br и hr.
Это различие предотвращает распространенное ложное объяснение. Визуальная поверхность считывается через внутренний HTML, но скопированный источник затем маркируется и перестраивается кодом приложения. То, что получают пользователи, отражает как строку DOM, созданную браузером, так и более узкие соглашения вывода ToolAcre, включая псевдонимы, отфильтрованные атрибуты и сбалансированные теги.
Токенизация, перезапись белого списка — это не сериализация внутреннего HTML браузера.
Токенизатор сканирует символы без создания узлов DOM или вызова DOMParser. Он распознает текст, комментарии, объявления, начальные теги, конечные теги и тела элементов необработанного текста. Санитизация повторяет эту плоскую последовательность, сохраняя разрешенные структуры, разворачивая обычные неизвестные обертки и подавляя опасные контейнеры с их содержимым.
Следовательно, оригинальное написание не сохранилось. Имена в смешанном регистре становятся строчными; b становится сильным, я становится em, удар и del становятся s, а ins становится u. Вывод восстанавливается из принятых токенов, а не возвращается в виде исходной подстроки, поэтому исходное форматирование и неподдерживаемые детали исчезают намеренно.
Экранирование текста и атрибутов при нормализации известных объектов
Текст сначала декодируется с помощью сущности, а затем снова экранируется. Амперсанды становятся `&`, знаки «меньше» и «больше» становятся `<` и `>`, а запрещенные управляющие символы исчезают. Этот порядок сохраняет стабильность существующего `&` при повторных проходах вместо того, чтобы превращать его в `&amp;`.
Значения атрибутов следуют более строгому пути выхода, который также заключается в двойные, одинарные кавычки, угловые скобки и амперсанды. Известные объекты декодируются до того, как будут выданы принятые атрибуты. Тесты фиксируют идемпотентность для текстовых и ссылочных запросов, но код не гарантирует сохранение написания каждого авторского объекта, например именованной или числовой ссылки.
Пустые элементы и сбалансированные закрывающие теги в пользовательском рерайтере
Только br и hr разрешены и классифицируются как void в выходном наборе. Они никогда не получают закрывающие теги. Для непустых разрешенных элементов вложенность фиксируется в открытом стеке. Перекрещенное закрытие, такое как Strong вокруг em, приводит к тому, что внутренние элементы закрываются первыми, создавая сбалансированную разметку, а не сохраняя неверный порядок.
Незакрытые элементы закрываются в конце, а случайные закрывающие теги игнорируются. Это политика балансировки рерайтера, а не полная реализация восстановления ошибок браузера HTML5. Сам источник предупреждает о различиях в парсерах, поэтому его результаты не следует рекламировать как универсальное дезинфицирующее средство от враждебного ввода.
Атрибуты занесены в разрешенный список и заключены в кавычки; исходный заказ сам по себе не является контрактом
Ни одна универсальная сумка с атрибутами не сохранилась. Параграфы и заголовки не допускают ничего; ссылки допускают href и title; сокращения допускают название; цитаты позволяют цитировать; упорядоченные списки позволяют начинать и печатать. Каждое выдаваемое значение заключается в двойные кавычки, а принятые ссылки также получают `rel="noopener noreferrer nofollow"`.
Порядок атрибутов следует за принятыми токенами и добавленным полем rel, но полагаться на порядок было бы ненадежно. Значение заключается в разрешенных именах и значениях. Неверное начало целого числа удаляется, небезопасные схемы href или cite отклоняются, а неизвестные атрибуты создают причины для удаления вместо того, чтобы незаметно становиться частью опубликованной разметки.
Рабочий пример: обработка фрагмента через дезинфицирующее средство ToolAcre.
Попробуйте `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>`. Класс удаляется, B сопоставляется с сильным, существующий амперсанд остается одним экранированным амперсандом, br становится самозакрытым, а небезопасная ссылка теряет свой href, сохраняя при этом видимый текст ссылки.
В режиме «Pretty source» поддерживаемые блочные элементы размещаются в строках и дочерних списках с отступами. Он оставляет встроенный контент вместе и сохраняет текст внутри pre. Форматирование — это улучшение читаемости уже переписанного вывода; это не второй анализатор безопасности, и он не восстанавливает пробелы, удаленные ранее при нормализации.
Что здесь не распространяется — браузер, сериализация XML или XHTML.
В этой статье не описываются встроенные гарантии сериализации браузера, XMLSerializer, синтаксис XHTML или необязательные правила закрывающего тега HTML в целом. Он документирует наблюдаемые соглашения в этом репозитории. Утверждения о ` `, в частности, опущены, поскольку распознаваемые именованные ссылки определяются локальной таблицей сущностей, а не общим сериализатором браузера.
Конструктор предварительного просмотра еще раз очищает фрагмент и превращает его в полноценный документ со светлой темой. Копия HTML возвращает фрагмент; Загрузка HTML возвращает этот документ. Это намеренно разные артефакты. Прочтите метку действия, прежде чем предположить, что загруженный файл побайтно идентичен скопированному источнику.
Вывод: сериализатор является последовательным, ваш ввод не был - суммируется, как предсказать выходные данные редактора и как редактор HTML WYSIWYG ToolAcre показывает, что на самом деле производит браузер.
Прогнозируйте ToolAcre, следуя его этапам: токенизировать строку, декодировать поддерживаемые объекты, применять псевдонимы элементов и списки разрешений, проверять URL-адреса, балансировать принятые теги, экранировать выходные данные и, при необходимости, красиво печатать их. Эта последовательность объясняет фактический результат более точно, чем утверждение, что «innerHTML» просто сохраняет или сериализует исходный код автора.
Используйте исходный режим, чтобы наблюдать за перезаписью с помощью небольшого приспособления перед обработкой длинного черновика. Санитайзер отклоняет документы, длина которых превышает 500,000 символов, поэтому ввод слишком большого размера не выполняется, а не замораживает вкладку. Держите собственную политику HTML места назначения отдельно от намеренно компактного подмножества этого редактора.