CSP политики

Content Security Policy (CSP) — это механизм безопасности веб-приложений, который позволяет ограничивать источники контента, предотвращая внедрение вредоносного кода. В контексте Polymer CSP играет критическую роль, так как веб-компоненты активно используют шаблоны, инлайновые скрипты и стили, что может конфликтовать с строгими политиками CSP.

Основы CSP

CSP задаётся через заголовок Content-Security-Policy или мета-тег <meta http-equiv="Content-Security-Policy" content="...">. Он определяет правила для:

  • script-src — источники JavaScript;
  • style-src — источники CSS;
  • img-src — источники изображений;
  • connect-src — источники AJAX-запросов;
  • font-src — источники шрифтов;
  • frame-src — источники для фреймов.

Веб-приложение с Polymer может использовать как внешние, так и инлайновые скрипты. CSP предотвращает выполнение инлайновых скриптов по умолчанию, что требует специальных подходов.

Инлайновые скрипты и Polymer

Polymer активно использует инлайновые скрипты внутри <dom-module> и <template>. Прямое включение <script> внутри шаблона приводит к ошибкам CSP, если политика запрещает 'unsafe-inline'. Для обхода используются следующие подходы:

  • Использование внешних скриптов: все скрипты компонентов выносятся в отдельные файлы и подключаются через <script src="...">.
  • Использование nonce: в заголовке CSP можно указать nonce, который применяется к скриптам. Скрипт с соответствующим атрибутом nonce будет выполняться даже при строгой CSP.
<script nonce="abc123">
  // код компонента
</script>

CSS и Polymer

Polymer позволяет использовать инлайновые стили через <style> внутри <dom-module>. CSP по умолчанию может блокировать такие стили. Возможные решения:

  • Вынесение стилей в отдельные файлы и подключение через <link rel="stylesheet" href="styles.css">.
  • Использование unsafe-inline для стилей, если вынесение невозможно. Однако это снижает уровень безопасности.
  • CSS Custom Properties — использование переменных CSS внутри стилей компонентов позволяет минимизировать необходимость инлайновых стилей.

Shadow DOM и CSP

Веб-компоненты Polymer создают Shadow DOM для изоляции стилей и структуры. Shadow DOM не нарушает CSP напрямую, однако любые скрипты внутри него подчиняются правилам script-src. При динамическом создании скриптов через eval или Function потребуется 'unsafe-eval' в CSP, что крайне нежелательно. Рекомендуется избегать динамической генерации кода и использовать строго модульную структуру.

Полезные директивы CSP для Polymer

  • default-src 'self'; — базовое ограничение на источники.
  • script-src 'self' 'nonce-<value>'; — выполнение скриптов только с разрешённого источника или с nonce.
  • style-src 'self' 'unsafe-inline'; — разрешение инлайновых стилей при необходимости.
  • connect-src 'self' https://api.example.com; — контроль AJAX-запросов и fetch.

Практика внедрения CSP в Polymer

  1. Анализ компонентов: выявляются все инлайновые скрипты и стили.
  2. Рефакторинг скриптов: перенос инлайнового кода в отдельные JS-файлы.
  3. Добавление nonce: при невозможности выноса скриптов.
  4. Обновление заголовков сервера: настройка Content-Security-Policy.
  5. Тестирование: проверка консоли браузера на ошибки CSP, корректное выполнение компонентов.

Взаимодействие с внешними библиотеками

Polymer-приложения часто используют сторонние библиотеки. CSP требует явного указания источников этих библиотек:

script-src 'self' https://cdn.jsdelivr.net https://unpkg.com;
style-src 'self' https://cdn.jsdelivr.net;

Это предотвращает блокировку скриптов и стилей, одновременно сохраняя защиту от внешних угроз.

Особенности работы с динамическими шаблонами

Polymer позволяет динамически создавать элементы через Polymer.dom или document.createElement. Скрипты внутри таких динамических элементов должны полностью соответствовать CSP. Наиболее безопасный подход — использовать заранее подключённые модули и методы компонентов, избегая вставки произвольного кода.

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

  • CSP Evaluator от Google — проверка политики на наличие уязвимостей.
  • Консоль браузера — вывод ошибок блокировки скриптов и стилей.
  • Логирование nonce и заголовков — проверка соответствия CSP используемым компонентам.

CSP в Polymer требует продуманной архитектуры компонентов, отказа от инлайновых скриптов и вынесения стилей в безопасные источники. Это позволяет сохранять модульность, переиспользуемость и высокую степень защиты веб-приложения.

Оглавление