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

Question

Webpack 具有添加nonce到它加载的所有脚本的功能。

要激活功能集，您的入口脚本中需要包含 __webpack_nonce__ 变量。

默认情况下生成的 react app 中的入口文件create react app是index.js. 所以我需要做的就是添加入口文件：

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

最后一件事是启用 webpack CSP。

请注意，默认情况下不启用 CSP。需要与文档一起发送相应的头 Content-Security-Policy 或元标记，以指示浏览器启用 CSP。下面是一个包含 CDN 白名单 URL 的 CSP 标头的示例：Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;

但是，我得到了错误

'__webpack_nonce__' is not defined

我试图声明随机数。还是不行。

webpack_nonce在入口文件中指定，而不是在配置中。

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

Answer 1

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

尝试禁用它的行：

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