Политика безопасности содержимого (CSP) с Vue
Заголовки CSP, скрипты на основе nonce, политики на основе хеша и настройка CSP в Vite
«Политика безопасности содержимого (CSP) с Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Что такое CSP
Политика безопасности содержимого — это заголовок HTTP-ответа, который сообщает браузеру, какие источники скриптов, стилей, изображений и соединений разрешены. Это надежный второй уровень защиты от XSS: даже внедренные скрипты блокируются, если их источник не разрешен.
Заголовок
CSP передается в заголовке ответа Content-Security-Policy. Каждая директива содержит список разрешенных источников для определенного типа ресурса.
Content-Security-Policy: default-src 'self'; script-src 'self';Ограничение источников скриптов
Директива script-src управляет источниками, из которых могут загружаться скрипты. Ограничение списка значением 'self' блокирует встроенные скрипты и сторонние скрипты, которые может внедрить злоумышленник.
Content-Security-Policy: script-src 'self' https://cdn.trusted.com;Избегайте unsafe-inline
'unsafe-inline' разрешает встроенные скрипты и атрибуты обработчиков событий — именно их используют атаки XSS. В надежной политике эту директиву не указывают, поэтому внедренный встроенный код не выполняется.
Избегайте unsafe-eval
'unsafe-eval' разрешает использовать eval и конструктор Function. Среда выполнения Vue 3 не нуждается в этом, поскольку шаблоны предварительно компилируются, поэтому эту директиву можно и следует исключить.
Встроенные скрипты на основе nonce
Если встроенный скрипт действительно необходим, добавьте в него случайный nonce для каждого ответа и укажите этот nonce в политике. Выполняются только скрипты с соответствующим nonce.
<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
// allowed because nonce matches
</script>Почему nonce лучше, чем unsafe-inline
Nonce непредсказуем и меняется в каждом ответе, поэтому злоумышленник, внедривший скрипт, не может его угадать. Это позволяет использовать встроенные скрипты без всеобъемлющего риска unsafe-inline.
CSP и стили Vue
Vue и многие библиотеки пользовательского интерфейса добавляют стили во время выполнения. Разрешите их через style-src с nonce или хешем либо вынесите CSS в файлы, чтобы было достаточно style-src 'self'.
Content-Security-Policy: style-src 'self';Плагин CSP nonce для Vite в разработке
Сервер разработки Vite внедряет скрипты, что может конфликтовать со строгой CSP. Плагин CSP nonce добавляет совпадающий nonce к тегам, внедряемым Vite, во время разработки.
// vite.config.ts
import { defineConfig } from "vite";
export default defineConfig({
html: {
cspNonce: "DEV_NONCE"
}
});connect-src для API
Ограничьте с помощью connect-src источники, к которым приложение может обращаться, чтобы внедренный код не мог передать данные на домен, контролируемый злоумышленником.
Content-Security-Policy: connect-src 'self' https://api.example.com;Режим только отчетов
Безопасно внедряйте CSP с помощью Content-Security-Policy-Report-Only: этот режим сообщает о нарушениях, но не блокирует их, позволяя настроить политику перед включением блокировки.
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;Быстрая проверка
Какого значения директивы CSP следует избегать, чтобы сохранить надежную защиту от XSS?
Итоги
CSP — это заголовок HTTP, ограничивающий разрешенные источники скриптов, стилей и соединений; он блокирует внедренный код, даже если атака XSS проникла дальше. Избегайте unsafe-inline и unsafe-eval; для необходимых встроенных скриптов используйте отдельные nonce для каждого ответа, а в разработке — плагин CSP nonce для Vite. Перед включением блокировки сначала используйте режим только отчетов.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Политика безопасности содержимого (CSP) с Vue» бесплатный?
Да — полный текст урока «Политика безопасности содержимого (CSP) с Vue» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Политика безопасности содержимого (CSP) с Vue»?
Заголовки CSP, скрипты на основе nonce, политики на основе хеша и настройка CSP в Vite Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Политика безопасности содержимого (CSP) с Vue»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Предотвращение XSS во Vue
- Политика безопасности содержимого (CSP) с Vue
- Защита от CSRF в SPA на Vue
- Безопасные шаблоны аутентификации