Проблемы с CSP в проекте с react router и nodejs

Question

Я делаю React приложение где использую React router, и на бэкенде nodejs+express. Моя задача такова, при обращении на http://example.ru - я отдаю одно react приложение, а при http://example.ru/admin - другое. Проблема в том, что если я к примеру перехожу на http://example.ru/shop через react router(NavLink) мои настройки CSP работают. Но есть я использую строку браузера то настройки CSP не работают, вернее работают только на http://example.ru .

Мои настройки CSP <meta http-equiv="Content-Security-Policy" content="default-src *; img-src http://localhost:3001 https://sun9-23.userapi.com https://steamcdn-a.akamaihd.net https://gspics.org data:">

Ошибка если перейти на http://example.ru/shop через строку браузера

В инструментах разработчика браузера, meta тег есть.

Answer 1

Похоже, ваш бэкенд издаёт HTTP заголовок Content-Security-Policy, политика которого конфликтует с политикой из мета тега:

<meta http-equiv="Content-Security-Policy" content="
  default-src *;
  img-src http://localhost:3001
       https://sun9-23.userapi.com
       https://steamcdn-a.akamaihd.net
       https://gspics.org
       data:
  ">

Ка видно из сообщений консоли браузера: because it vioaltes the following Content Security Policy "img-src 'self' data:" - нарушенная политика совсем не та, что опубликована в метатеге.

Если вы имеете 2 CSP одновременно (meta + HTTP header или meta + meta), то будет действовать наиболее ограничительная из них.

Возможно на бэкенде у вас подключен пакет Helmet 4, а он по умолчанию издаёт свою дефолтную политику (Helmet 3 - не издаёт).

Как я понимаю, React рендерит страницу на стороне клиента, поэтому всегда действует meta http-equiv="Content-Security-Policy" content="..."> который был установлен при первой загрузке страницы с сервера. Изменить его средствами яваскрипта (без перезагрузки страницы с сервера) невозможно.

PS: Судя по сообщению консоли, у вас блокируется скрипт реКапчи в директиве script src 'self', но в метатеге директива script-src отсутствует и вместо неё должна работать default-src *. Но скрипт www.google.com/recaptcha/api.js?..., таки, блокируется - значит на странице действует политика не из вашего метатега, а какая-то другая.

PPS: Вот тест CSP для reCaptcha, добавьте нужные правила в свой <meta>, когда разберётесь кто у вас на бэкенде публикует CSP.

БЛОГ НА HUSL

Проблемы с CSP в проекте с react router и nodejs

Ответы (1 шт):