Политика безопасности контента (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.

Больше читать