Инструменты разработчика · Экранирующий элемент HTML
Декодирование объектов HTML без внутреннего HTML: как работает декодер справочной таблицы
· Как это работает
HTML безопасность кодирование
Популярный прием декодирования сущностей путем присвоения их внутреннему HTML пропускает вводимые данные через анализатор HTML, а это именно то, что вам не нужно. В этом посте объясняется более безопасный табличный подход и то, как он обрабатывает именованные, десятичные и шестнадцатеричные ссылки.
Декодер, выполнивший <img onerror> — конкретный случай, когда «просто декодируйте» стало выполнением сценария.
Обычный однострочный ввод element.innerHTML = делает больше, чем просто декодирование &. Если входные данные также содержат <img src=x onerror=...>, браузер создает элемент изображения и атрибут обработчика событий. В зависимости от того, как этот узел подключен и загружен, это может превратить ярлык форматирования в выполнение сценария. Вставленная строка, подобная HTML, должна оставаться данными, когда единственной задачей является разрешение ссылок на символы, а не анализироваться в дереве DOM.
Что на самом деле делает внутренний HTML со строкой — синтаксический анализ, создание элементов и атрибуты обработчика событий, а не просто замена сущности
InnerHTML вызывает синтаксический анализатор HTML: теги становятся узлами, атрибуты приобретают значение браузера, а более позднее чтение textContent удаляет разметку из результата. Тег <strong>, который вы намеревались сохранить как буквальный ввод, может исчезнуть при форматировании текста. Отсоединенный элемент не является общей гарантией безопасности; код часто повторно вставляет это поддерево или использует полученный HTML в другом месте. Если вам нужно отобразить ненадежный ввод, назначайте textContent и очищайте его только в том случае, если вы сознательно решите отображать HTML.
Подход с помощью таблицы поиска — регулярное выражение для &name;, &#NNN; и &#xHHH; и сопоставление имен с символами
Декодер ToolAcre использует ограниченное регулярное выражение для поиска ссылки в форме &name;, { или {. Именованные ссылки просматриваются в практической явной таблице, включая amp, lt, gt, кавычки и общую типографику. Неизвестное имя остается написанным, а не угаданным. Этот подход не создает элементов и не вызывает синтаксический анализатор HTML; он просто заменяет распознанные подстроки в строке. Таблица намеренно представляет собой подмножество, а не все ссылки на именованные символы HTML.
Обработка числовых ссылок — анализ десятичных и шестнадцатеричных кодовых точек и преобразование их в строки, включая астральные символы.
Для числовой ссылки проанализируйте десятичное число после &# или шестнадцатеричное число после &#x, затем преобразуйте числовой код в символ с помощью String.fromCodePoint. Астральное значение, такое как 0x1F600, дает смайлик, а не два независимых печатных символа. Реализация также отображает исторические значения диапазона управления Windows-1252, как это делают браузеры; ноль, суррогатные кодовые точки и значения выше U+10FFFF становятся символом замены. Эта явная обработка ошибок предотвращает сбой декодера из-за неверного числа.
Рабочий пример: декодирование строки, состоящей из &, © и 😀 — каждое совпадение разрешается из таблицы или числа.
Декодируйте входные литералы &, © и 😀: первая ссылка через именованную таблицу сопоставляется с &, десятичное 169 становится ©, а шестнадцатеричное 1F600 становится 😀. Добавьте рядом с ними необработанный <img onerror="alert(1)">. Декодер возвращает эту последовательность, похожую на тег, как обычные строковые символы; он не создает изображение и не выполняет событие. При последующем размещении результата на реальной странице используйте безопасный текстовый приемник, а не берите декодированную строку и присваивайте ее обратно внутренней HTML.
Чего не будет делать табличный подход — устаревшие ссылки без точек с запятой и особенности восстановления ошибок синтаксического анализатора, если они не будут реализованы намеренно.
Подход поиска намеренно не воспроизводит устаревшие правила восстановления без точки с запятой синтаксического анализатора HTML. © без точки с запятой может остаться нетронутым. В таблице с фиксированным именем также отсутствуют многие из более чем двух тысяч именованных ссылок HTML5. Эти ограничения являются честным компромиссом для небольшого предсказуемого декодера; принятие только явных завершаемых ссылок позволяет избежать обработки произвольной прозы, содержащей амперсанд, как разметки. Проверьте документированные поддерживаемые названия инструмента, если необходима полная совместимость с браузером.
Чего это не касается — очистку HTML, которую вы собираетесь визуализировать, что представляет собой другую проблему.
Декодирование ссылок не очищает HTML для отображения. Если декодированный текст содержит последовательность <script>, это остается опасным, если другая часть приложения позже вставит ее как разметку. Для каждого контекста, такого как атрибут HTML, строка JavaScript и URL, требуется своя собственная кодировка вывода и политика. ToolAcre возвращает текст; оно не может сделать будущую небезопасную раковину безопасной.
Вывод: обрабатывайте входные данные как данные — как экранирующий элемент HTML декодирует с помощью таблицы поиска, а не синтаксического анализатора HTML, поэтому ваш ввод остается текстом
Рассматривайте входные данные как данные. HTML escaper-объект декодирует с помощью таблицы и арифметических операций с кодовыми точками, а не с помощью внутреннего HTML-трюка, поэтому полезные данные, похожие на разметку, остаются инертными символами внутри инструмента. Попробуйте три ссылки, затем проверьте как декодированный текст, так и то, как вы планируете его использовать дальше: граница безопасности теряется, если вы повторно анализируете его как HTML.