Trusted Types: как защитить сайт от DOM-based XSS

👋 Приветствую в мире цифровой безопасности!

Разработчик случайно передал пользовательский ввод в innerHTML, и браузер выполнил чужой JavaScript. Trusted Types помогает закрыть такие ошибки на уровне браузера, даже если опасный код уже оказался в приложении.

⏺Где проблема? Например, сайт берёт параметр из URL и вставляет его на страницу:

const name = new URLSearchParams(location.search).get("name");
document.getElementById("user").innerHTML = name;

Если в name попадёт вредоносный HTML, можно получить DOM-based XSS. Причём всё произойдёт прямо в браузере, без участия сервера.

⏺Включаем Trusted Types через CSP. Сначала лучше проверить приложение в режиме отчётов:

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri /csp-report

А после исправления проблем включить блокировку:

Content-Security-Policy: require-trusted-types-for 'script'

Теперь передача обычной строки в защищённый innerHTML вызовет TypeError.

⏺Как безопасно вставлять HTML? Создаём политику с очисткой через DOMPurify:

const policy = trustedTypes.createPolicy("safe-html", {
createHTML: input => DOMPurify.sanitize(input)
});

element.innerHTML = policy.createHTML(userInput);

Trusted Types сам ничего не очищает. За безопасность содержимого отвечает функция внутри политики.

⏺Если HTML не нужен, лучше вообще обойтись без него:

element.textContent = userInput;

А чтобы сторонние скрипты не создавали собственные политики, можно ограничить их через CSP:

Content-Security-Policy: require-trusted-types-for 'script'; trusted-types safe-html

Trusted Types полезен в больших frontend-приложениях, где много динамического HTML. Но поддержку браузеров нужно учитывать, а сам механизм использовать вместе с CSP и безопасной обработкой данных.

🤖Бесплатный ChatGPT