Как убедиться, что приложение Vue соответствует требованиям CSP?vue-88

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

Основные шаги для проверки соответствия CSP

1. Анализ текущей CSP

Проверьте HTTP-заголовки или мета-теги CSP вашего приложения. Пример CSP-заголовка:

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.example.com; style-src 'self' 'unsafe-inline';

Убедитесь, что политика не содержит излишне разрешающих директив, таких как 'unsafe-eval' или 'unsafe-inline'.

2. Исключение unsafe-inline для скриптов

Vue использует инлайн-обработчики событий (например, @click). Для CSP-совместимости:

  • Используйте runtime-only сборку Vue (без компилятора в браузере): 
    import Vue from 'vue/dist/vue.runtime.esm.js';
  • Настройте сборку через vue-cli или vite для предварительной компиляции шаблонов.

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

Если используются динамические style или class:

  • Замените инлайн-стили на CSS-классы.
  • Используйте scoped стили в SFC (Single File Components).

4. Внешние ресурсы

Убедитесь, что все внешние скрипты, стили и шрифты разрешены в CSP. Например:

script-src 'self' https://unpkg.com/vue@3.2.0;

5. Тестирование CSP

  • Режим report-only: Включите заголовок Content-Security-Policy-Report-Only для сбора ошибок без блокировки.
  • Инструменты: Используйте браузерные DevTools (вкладка Security) или онлайн-сервисы типа CSP Evaluator.

6. Исправление ошибок CSP

  • Для eval(): Замените на нативные методы или предварительную компиляцию.
  • Для инлайн-скриптов: Вынесите код в отдельные файлы или используйте хэши/nonce.

Пример CSP-совместимого Vue-приложения

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://unpkg.com/vue@3.2.0; style-src 'self' 'unsafe-inline'">
</head>
<body>
  <div id="app"></div>
  <script src="/dist/js/app.12345.js"></script> <!-- Предварительно собранный Vue-код -->
</body>
</html>

Резюмируем:

Для соответствия CSP в Vue-приложении необходимо минимизировать использование unsafe-* директив, предварительно компилировать шаблоны, корректно настраивать источники ресурсов и тестировать политику в режиме report-only.

Вопросы

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