Доверенные источники

Lighthouse — это инструмент для анализа производительности, доступности и SEO веб-приложений. Одним из ключевых аспектов его работы является оценка доверенных источников (Trusted Types). Это механизм безопасности браузера, направленный на предотвращение атак типа XSS (Cross-Site Scripting) через строгий контроль над использованием строк, вставляемых в DOM.

Что такое Trusted Types

Trusted Types представляют собой API, позволяющее браузеру различать обычные строки и безопасные объекты, которые могут использоваться для динамического обновления DOM. Вместо того чтобы проверять каждую строку вручную, браузер доверяет объекту, созданному через API, что обеспечивает строгий контроль.

Основные элементы Trusted Types:

  • Policy — набор правил для создания доверенных объектов.
  • TrustedHTML, TrustedScript, TrustedScriptURL — типы объектов, которые гарантированно безопасны для использования в DOM.
  • Enforcement — механизм, который блокирует использование обычных строк там, где требуется доверенный объект.

Настройка политик Trusted Types

Для работы с Trusted Types создается policy:

const myPolicy = window.trustedTypes.createPolicy('default', {
  createHTML: (input) => sanitizeHTML(input),
  createScript: (input) => input,
  createScriptURL: (input) => input
});

Ключевые моменты:

  • createHTML должен возвращать безопасный HTML. Обычно применяется функция очистки (sanitizeHTML) для удаления потенциально опасного контента.
  • createScript и createScriptURL позволяют создавать доверенные скрипты и ссылки на скрипты.
  • Policy может быть настроена глобально и применяется ко всему приложению.

Взаимодействие Lighthouse с Trusted Types

Lighthouse анализирует веб-страницу на предмет внедрения опасного кода и неправильного использования динамического контента. Основные проверки:

  1. Использование строк для innerHTML, eval и srcdoc — Lighthouse проверяет, что любые строки, вставляемые в DOM через эти методы, создаются с соблюдением правил Trusted Types.
  2. Соответствие CSP (Content Security Policy) — инструмент анализирует, как политика безопасности контента согласуется с реализацией Trusted Types.
  3. Наличие ошибок внедрения — любые несоответствия блокируются и помечаются как потенциальные XSS-уязвимости.

Практическое использование в проекте

Чтобы интегрировать Trusted Types и повысить оценку Lighthouse по безопасности:

  1. Определить политики Trusted Types для всех динамических вставок HTML.
  2. Использовать функции-саниалайзеры при формировании HTML-контента.
  3. Проверять весь сторонний контент (например, данные из API) перед вставкой в DOM.
  4. Настроить Content Security Policy с директивой require-trusted-types-for 'script';.

Пример проверки и вставки контента с политикой:

const safeHTML = myPolicy.createHTML('<div>Безопасный контент</div>');
document.getElementById('app').innerHTML = safeHTML;

Основные ошибки и их диагностика

  • Попытка вставки обычной строки — браузер блокирует выполнение, Lighthouse помечает как нарушение Trusted Types.
  • Несанкционированное использование eval или new Function — необходимо переписать код через доверенные скрипты.
  • Неполная CSP — политика должна включать директиву для Trusted Types, иначе оценка безопасности падает.

Советы по интеграции

  • Разделять HTML, скрипты и URL на отдельные типы объектов Trusted Types.
  • Автоматизировать проверку через CI/CD с использованием Lighthouse CI.
  • Постепенно переводить все динамические вставки на использование доверенных объектов, начиная с наиболее уязвимых частей приложения.

Выводы по практическому значению

Использование Trusted Types существенно снижает риск XSS и повышает оценку безопасности в Lighthouse. Это не просто рекомендация, а инструмент, обеспечивающий строгий контроль над динамическим контентом и соответствие современным стандартам веб-безопасности.

Правильная настройка политик и постоянная проверка динамического контента через Lighthouse позволяют создавать безопасные веб-приложения без компромиссов между функциональностью и безопасностью.

Оглавление