XSS через innerHTML и способы защиты

Присваивание el.innerHTML = userInput разбирает строку как HTML. Если userInput содержит теги <script> или атрибуты обработчиков событий (onclick, onerror), браузер интерпретирует их и выполняет управляемый злоумышленником код на странице.

Любой код, который вставляет пользовательские данные в HTML — шаблоны на сервере или отображение на стороне клиента, — создаёт риск XSS, если данные не экранированы. Одностраничные приложения, создающие innerHTML из ответов интерфейсов, особенно уязвимы, когда эти ответы содержат пользовательское содержимое.

Имя пользователя "Bob<img src=x onerror=alert(1)>", установленное через div.innerHTML = `Welcome, ${user}`, выполняет alert(1), когда изображение не удаётся загрузить. Те же данные в виде обычного текста (через textContent) безвредны: браузер видит только символы, а не теги.

textContent задаёт только текст — специальные символы HTML отображаются как обычные символы и никогда не становятся тегами. В 90% случаев это правильный инструмент. Переходите на innerHTML только тогда, когда действительно нужно отобразить разметку, а не текст.

Чтобы создавать элементы с пользовательскими данными, формируйте их с помощью createElement и textContent: const li = document.createElement("li"); li.textContent = name; ul.appendChild(li);. Результат структурно идентичен innerHTML, но по своей конструкции защищён от XSS.

Для доверенного HTML, сгенерированного сервером (вывод собственного шаблона или очищенный форматированный текст из доверенного редактора), innerHTML подходит. Никогда не применяйте его непосредственно к данным из ненадёжных источников без очистки.

Если пользователи отправляют форматированный текст (например, из редактора комментариев или при отображении markdown), очистите его перед присваиванием innerHTML: el.innerHTML = DOMPurify.sanitize(richHtml). DOMPurify удаляет опасные теги и атрибуты, сохраняя безопасное форматирование, например <b>, <em> и <a>.

el.insertAdjacentHTML("beforeend", html) разбирает строки HTML, создавая такую же поверхность для XSS, как innerHTML. Правила те же: никогда не передавайте пользовательские данные напрямую; очищайте их или используйте методы DOM. То же относится к document.write, хотя сейчас этот метод уже никто не должен использовать.

React, Vue, Svelte и Angular по умолчанию экранируют интерполированный текст — {name} безопасен. Они предоставляют обходные механизмы (dangerouslySetInnerHTML в React и v-html в Vue), которые несут такой же риск XSS; используйте их экономно и только с очисткой данных.

Даже значения атрибутов могут стать вектором атаки: <a href={url}> с url="javascript:alert(1)" выполняется при щелчке. Проверяйте адреса по схеме (разрешайте только http:, https:, mailto: и tel:) перед помещением пользовательского ввода в href, src или другие атрибуты, содержащие адреса.

Современные браузеры поддерживают Trusted Types: настройте CSP с помощью require-trusted-types-for 'script', и innerHTML откажется принимать необработанные строки — пройдут только значения, обёрнутые политикой. Это делает XSS невозможным благодаря программному интерфейсу, а не одной лишь внимательности разработчиков.

Одного уровня недостаточно. Сочетайте проверку вводимых данных на сервере, экранирование вывода при отображении, CSP для блокировки внедрённых скриптов, доверенные типы для запрета необработанных строк и проверку безопасности любого использования innerHTML. Многоуровневая защита выдерживает ошибку на любом отдельном уровне.

Почему el.textContent = userInput защищает от XSS, а el.innerHTML = userInput представляет опасность?

Использование innerHTML для пользовательского ввода — классический вектор XSS. Используйте textContent для текста, createElement и textContent для структуры, а при необходимости расширенного HTML — библиотеку для очистки HTML. Проверяйте схемы адресов в значениях атрибутов. Добавляйте CSP и доверенные типы, чтобы нейтрализовать ошибки, пропущенные при проверке кода. Современные фреймворки экранируют данные по умолчанию — используйте их небезопасные обходные механизмы как можно реже и обязательно проверяйте их.