【发布时间】：2019-02-06 05:22:54
【问题描述】：
Webpack 具有将nonce 添加到它加载的所有脚本的功能。
要激活功能集，需要在入口脚本中包含一个 __webpack_nonce__ 变量。
create react app 生成的 react 应用中的入口文件默认为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
我试图声明 nonce。还是不行。
webpack_nonce 是在入口文件中指定的，而不是在配置中。
那么，我做错了什么？也许文档缺少有关该主题的一些关键信息？如何在 webpack 中为 React 应用启用 CSP 功能？
【问题讨论】：
-
那么你已经在你的 html 文件中添加了 CSP 元标记？
-
检查这是真正的入口点，而不是使用它的其他入口点（在 cra 中）的某个文件。
-
在 Twitter 上的 webpack 中将其标记为 Sean Larkin，希望他能看看。
-
@leepowell nope
-
我也在尝试关注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.并且它也拒绝加载 webpack 输出的bundle.js（它应该包含随机数，因为它包含在入口文件中：__webpack_nonce__ = '******')
标签： reactjs webpack create-react-app content-security-policy