Что такое CSP и как настроить для Angular?angular-87

Что такое CSP?

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

Основные директивы CSP

default-src   - политика по умолчанию для всех типов
script-src    - источники выполнения JavaScript
style-src     - источники CSS
img-src       - источники изображений
connect-src   - источники для AJAX, WebSockets
font-src      - источники шрифтов
frame-src     - источники для фреймов
media-src     - источники медиа (video, audio)

Проблемы Angular с CSP

  1. Inline-стили и скрипты: Angular по умолчанию использует:

    • Inline-стили для компонентов
    • eval() для JIT-компиляции
    • Динамическое создание функций

  2. Шаблоны: Динамическая компиляция шаблонов может нарушать CSP.

Настройка CSP для Angular

1. Режим совместимости с CSP

В angular.json добавьте:

"architect": {
  "build": {
    "options": {
      "optimization": true,
      "aot": true,
      "csp": true
    }
  }
}

2. Использование AOT компиляции

Обязательно включите AOT для production:

ng build --prod --aot

3. Настройка мета-тега CSP

Добавьте в index.html:

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               script-src 'self' 'unsafe-inline' https://apis.google.com;
               style-src 'self' 'unsafe-inline';
               img-src 'self' data:;
               font-src 'self';
               connect-src 'self' https://api.example.com;">

4. Настройка сервера

Пример для Nginx:

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';";

5. Обработка динамических стилей

Для компонентов с динамическими стилями:

@Component({
  template: `<div [style.backgroundColor]="color"></div>`,
  styles: [`
    div {
      /* Статический стиль */
    }
  `]
})

Решение проблем

  1. Ошибка eval():

    • Используйте только AOT
    • Отключите JIT: platformBrowser().bootstrapModuleFactory(AppModuleNgFactory)

  2. Inline-стили:

    • Используйте ViewEncapsulation.None
    • Выносите стили в отдельные файлы

  3. Внешние ресурсы:

    • Явно укажите все домены в CSP
    • Используйте nonce или хэши для скриптов

Пример полной CSP политики

<meta http-equiv="Content-Security-Policy"
      content="default-src 'none';
               script-src 'self' 'sha256-abc123...';
               style-src 'self' 'unsafe-inline';
               img-src 'self' data:;
               font-src 'self';
               connect-src 'self' https://api.example.com;
               form-action 'self';
               frame-ancestors 'none';
               base-uri 'self';">

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

  1. Отчеты о нарушениях:
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report
  1. Браузерные инструменты:
    • Вкладка Console в DevTools
    • Вкладка Network для анализа блокировок

Резюмируем

Для работы Angular с CSP необходимо использовать AOT-компиляцию, избегать динамической компиляции и явно указывать все источники ресурсов. Настройка требует баланса между безопасностью и функциональностью фреймворка.

Вопросы

Собеседования