Политика безопасности контента (CSP) в приложении Create-React (CRA)
Написание подходящей политики CSP может потребовать некоторых изменений в конвейере сборки приложения для получения и вычисления хэшей для используемых встроенных скриптов и стилей. CRA - один из инструментов сборки, который я использую в разных проектах.
Я пытаюсь добавить несколько встроенных скриптов для Google Analytics и Hubspot. Также я предпочитаю сохранять runtime js
как встроенный скрипт. Я решил использовать CSP-2 и использовать <Meta>
для определения CSP
политик для моего приложения.
Нет встроенного скрипта или стиля
По умолчанию приложение Create React встраивает встроенный скрипт в index.html
во время производственной сборки.
Это небольшой фрагмент логики выполнения веб-пакета, который используется для загрузки и запуска приложения. Его содержимое по умолчанию будет встроено в ваш
build/index.html
файл, чтобы сохранить дополнительный сетевой запрос.
Вы можете установить INLINE_RUNTIME_CHUNK
переменную среды в false
, скрипт не будет встроен и будет импортирован как обычно.
Следующий элемент <meta>
может быть добавлен в качестве первого элемента в HTML <head>
для активации CSP и принудительного запуска только JS и CSS из того же источника, что и страница.
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self'; ..." >
Использование встроенного скрипта или стиля
Вы можете захотеть показать пользователю красивый контент при загрузке приложения, или может быть быстрее использовать runtime
JS в качестве встроенного скрипта.
Вы можете добавить политику unsafe-inline
CSP, чтобы разрешить все встроенные стили и скрипты.
Запрет встроенного скрипта - это самая большая гарантия безопасности, которую обеспечивает CSP, и запрет встроенного скрипта также укрепляет ваше приложение. С самого начала требуется немного усилий, чтобы убедиться, что все работает правильно после переноса всего кода из строя, но это компромисс, на который стоит пойти.
CSP 2 предлагает обратную совместимость для встроенных скриптов, позволяя вам заносить в белый список определенные встроенные скрипты. Это можно сделать с помощью одноразового номера или хеша.
Поскольку одноразовые номера должны быть восстановлены для каждого запроса страницы, и это не является частью процесса сборки, поэтому в этой статье я сосредоточусь на использовании хэша.
Установить зависимости
$ npm install react-app-rewired customize-cra csp-html-webpack-plugin --save-dev
"Переверните" существующие вызовы на react-scripts
в npm
скриптах
"start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test"
Добавьте config-overrides.js file
в корневой каталог.
const {override} = require('customize-cra'); const cspHtmlWebpackPlugin = require("csp-html-webpack-plugin"); const cspConfigPolicy = { 'default-src': "'none'", 'base-uri': "'self'", 'object-src': "'none'", 'script-src': ["'self'"], 'style-src': ["'self'"] }; function addCspHtmlWebpackPlugin(config) { if(process.env.NODE_ENV === 'production') { config.plugins.push(new cspHtmlWebpackPlugin(cspConfigPolicy)); } return config; } module.exports = { webpack: override(addCspHtmlWebpackPlugin), };
Обновите index.html
Добавьте первый дочерний элемент <meta>
as в <head>
на index.html
в папке public
<meta http-equiv="Content-Security-Policy" content="">
Строить
Запустите npm run build
, чтобы сгенерировать производственную сборку, и вы должны увидеть это изменение в рабочем index.html
файле:
<meta http-equiv="Content-Security-Policy" content="base-uri 'self'; object-src 'none'; script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; style-src 'self'">
часто задаваемые вопросы
В: Нужно ли мне добавлять unsafe-inline
в сценарий для стилизации политики CSP?
A: Я рекомендую использовать его только тогда, когда в вашем проекте есть какой-либо онлайн-сценарий или стиль, и вы хотите поддерживать браузеры, поддерживающие только CSP-1. CSP-2 будет игнорировать unsafe-inline
политику, если в политике есть хэш или одноразовый номер.
В: Как я могу получить доступ к источнику образца?
A: https://github.com/NShahri/cra-csp-sample
В: А как насчет workers
?
A: worker-src
- это директива CSP уровня 3, которая ограничивает URL-адреса, которые могут быть загружены в качестве рабочего, общего рабочего или обслуживающего исполнителя. Я ожидал, что эта директива имеет ограниченное количество реализаций.
Устаревшая директива child-src
определяет допустимые источники для workers
и frames
. Рекомендую использовать директивы frame-src
и worker-src
.
Заголовок CSP Html
может использоваться в связанном файле JS для применения отдельной политики CSP к workers
.