Content Security Policy

Content Security Policy (CSP) — это механизм безопасности веб-приложений, позволяющий контролировать источники контента, загружаемого браузером. Для фреймворка Stencil CSP играет ключевую роль в защите компонентов и предотвращении атак типа XSS (Cross-Site Scripting).

Основы CSP

CSP работает через HTTP-заголовок Content-Security-Policy или мета-тег <meta http-equiv="Content-Security-Policy" content="...">. Политика определяет разрешённые источники для скриптов, стилей, изображений, шрифтов и других ресурсов.

Пример базовой политики:

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';
  • default-src 'self' — разрешает загружать ресурсы только с того же домена.
  • script-src 'self' — скрипты только с текущего сайта.
  • style-src 'self' 'unsafe-inline' — стили могут быть из текущего домена и встроенные.

CSP и Web Components

Stencil генерирует компоненты как стандартизированные Web Components, которые могут использовать Shadow DOM. CSP накладывает ограничения на inline-скрипты и стили, что важно учитывать при рендеринге компонентов.

  • Inline-скрипты: Stencil по умолчанию использует модульные скрипты (type="module"), но некоторые динамически генерируемые скрипты могут нарушать политику script-src 'self'.
  • Inline-стили: Shadow DOM изолирует стили компонентов, но при использовании :host и CSS-переменных могут потребоваться разрешения на inline-стили.

Для безопасной работы с CSP рекомендуется:

  1. Минимизировать использование unsafe-inline.
  2. Генерировать отдельные CSS и JS-файлы для компонентов.
  3. Использовать хэши ('sha256-...') для конкретных inline-скриптов или стилей.

Настройка CSP в Stencil

Stencil не предоставляет встроенного механизма для генерации CSP, но структура проекта позволяет легко интегрировать его через сервер или хостинг.

Пример интеграции через Node.js сервер:

import express from 'express';
import path from 'path';

const app = express();

app.use((req, res, next) => {
  res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self'; style-src 'self';");
  next();
});

app.use(express.static(path.join(__dirname, 'www')));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Пример для Netlify или других статических хостингов:

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; script-src 'self'; style-src 'self';"

Проблемы CSP при использовании Stencil

  1. Динамическая загрузка компонентов: Когда Stencil использует import() для ленивой загрузки компонентов, политика script-src 'self' должна разрешать модульные скрипты.
  2. Third-party библиотеки: Любые внешние скрипты или стили должны быть явно разрешены через script-src и style-src.
  3. Shadow DOM и inline-стили: Внутри Shadow DOM inline-стили могут быть блокированы, если используется строгая политика CSP. Решение — вынести CSS в отдельные файлы или использовать хэши.

Использование хэшей для inline-скриптов

Для разрешения конкретного inline-скрипта можно использовать хэш SHA-256:

Content-Security-Policy: script-src 'self' 'sha256-xyz...';

Stencil позволяет сгенерировать хэши для встроенных стилей и скриптов при билде, что обеспечивает строгую и безопасную политику.

Инструменты для проверки CSP

  1. CSP Evaluator — инструмент от Google для проверки корректности политики.
  2. Report-Only режим — позволяет протестировать CSP без блокировки ресурсов:
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report-endpoint;

Отчёты помогают выявить нарушения и настроить точную политику перед полной блокировкой.

Рекомендации при работе со Stencil и CSP

  • Использовать модульные скрипты и отдельные CSS-файлы.
  • Минимизировать inline-код, использовать хэши при необходимости.
  • Тестировать политику через report-only перед полной активацией.
  • Обновлять CSP при добавлении сторонних библиотек или динамических ресурсов.

Stencil и CSP совместимы, но требуют внимательной настройки при использовании Shadow DOM, ленивой загрузки компонентов и сторонних ресурсов. Правильная конфигурация CSP значительно повышает безопасность веб-приложений на базе Stencil.

Оглавление