Как включить политику безопасности содержимого webpack в React?

Webpack имеет функцию добавления nonce ко всем загружаемым скриптам.

To activate the feature set a __webpack_nonce__ variable needs to be included in your entry script.

Файл записи в приложении React, созданный create react app по умолчанию, - index.js. Итак, все, что мне нужно сделать, это добавить в входной файл:

 // ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...

И последнее - включить webpack CSP.

Please note that CSPs are not enabled by default. A corresponding header Content-Security-Policy or meta tag needs to be sent with the document to instruct the browser to enable the CSP. Here's an example of what a CSP header including a CDN white-listed URL might look like: Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;

Однако я получил ошибку

'__webpack_nonce__' is not defined

Я пытался объявить одноразовый номер. По-прежнему не работает.

webpack_nonce is specified in the entry file and not in the configuration.

Итак, что я делаю не так? Может быть, в документации отсутствует какая-то ключевая информация по этой теме? Как включить функцию CSP в приложении Webpack для React?

Итак, вы добавили метатег CSP в свой html файл?

hazardous 31.08.2018 10:17

убедитесь, что это настоящая точка входа, а не какой-то файл, который используется другой точкой входа (в cra).

felixmosh 31.08.2018 10:20

@ опасно да. <meta http-equiv = "Content-Security-Policy" content = "default-src 'self'"> @felixmosh Проверял. путь - это node_modules-->react-scripts-->config-->webpack.config, а там entry = [..., paths.appIndexJs]. Paths.js определяет appIndexJs: resolveApp('src/index.js')

ogostos 31.08.2018 10:26

Отметил это на Шон Ларкин из webpack в Твиттере, надеюсь, он взглянет.

hazardous 31.08.2018 11:02

Вы когда-нибудь с этим справлялись? Столкнувшись с той же проблемой.

leepowell 04.08.2020 18:25

@leepowell нет

ogostos 11.08.2020 13:57

Я также пытаюсь следить за статьей в webpack.js.org/guides/csp, и, похоже, не хватает подробных деталей реализации, содержимое раздела «Дальнейшее чтение» является подробным, а ссылка на stackoverflow показывает другой метод реализации nonce, который я пробовал, но не работает . The source list for Content Security Policy directive 'script-src' contains an invalid source: ''******''. It will be ignored., и он также отказывается загружать вывод bundle.js веб-пакета (который должен содержать одноразовый номер, поскольку он был включен во входной файл: __webpack_nonce__ = '******')

user1063287 29.08.2020 17:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
6
7
4 673
1

Ответы 1

Если вы используете приложение create-response-app, возможно, об ошибке сообщает ESLint.

Попробуйте отключить его для строки:

__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM='; // eslint-disable-line no-undef

Другие вопросы по теме