reactjs - 如何在 React 中启用 webpack 内容安全策略？

Question

Webpack 具有向其加载的所有脚本添加 nonce 的功能。

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

create React app生成的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.

那么，我做错了什么？也许文档缺少有关该主题的一些关键信息？如何在 Webpack 中为 React 应用启用 CSP 功能？

Answer 1

如果您使用的是 create-react-app，那么可能是 ESLint 报告了错误。

尝试禁用该行:

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