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?
убедитесь, что это настоящая точка входа, а не какой-то файл, который используется другой точкой входа (в cra).
@ опасно да. <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')
Отметил это на Шон Ларкин из webpack в Твиттере, надеюсь, он взглянет.
Вы когда-нибудь с этим справлялись? Столкнувшись с той же проблемой.
@leepowell нет
Я также пытаюсь следить за статьей в 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__ = '******')





Если вы используете приложение create-response-app, возможно, об ошибке сообщает ESLint.
Попробуйте отключить его для строки:
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM='; // eslint-disable-line no-undef
Итак, вы добавили метатег CSP в свой html файл?