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

Question

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

  

要激活此功能，请在您的输入脚本中包含一个__webpack_nonce__变量。

默认情况下，create react app生成的react应用程序中的条目文件为index.js。所以我要做的就是添加入口文件：

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

最后一件事是启用Webpack CSP。

  

请注意，默认情况下未启用CSP。需要与文档一起发送相应的标头Content-Security-Policy或meta标签，以指示浏览器启用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