Я новичок в CSP, и моя цель - включить максимально простой заголовок CSP.
Основываясь на чтении спецификация и Документы MDN, я подумал, что мое приложение должно работать, но, к сожалению, не повезло с Chrome Canary v70.
Я настраиваю минимальное репо для воспроизведения. Вы видите, где я ошибся?
Оказывается, я немного не понимал деталей. Я опубликую здесь свое решение, если оно поможет кому-то еще в той же лодке.
Моя цель - обслуживать React SPA с включенным CSP. Приложение использует Материал-UI, который использует JSS, который вводит встроенные стили, которые, конечно, по умолчанию заблокированы с помощью CSP.
Поскольку это статический SPA для внешнего интерфейса, а изменение заголовков HTTP выходит за рамки SPA, я вместо этого генерирую одноразовый номер на веб-сервере. Одноразовый номер вставляется в заголовок HTTP CSP, а также в тег index.html в соответствии с тем, что JSS надеется.
Положительным моментом является то, что CSP защищает SPA, и нам не нужно использовать аварийный люк unsafe-inline
. Обратной стороной, но небольшой, является то, что index.html
теперь динамический и не может быть кэширован. Но, поскольку файл и без того крошечный (<1 КБ), преимущества CSP кажутся стоящими такого компромисса.