CSP 随机数实现是什么样的？

Question

我最近一直在阅读 CSP 的内容，但我未能找到关于 nonce 如何工作的清晰解释或可靠示例。出于安全考虑，我尝试避免使用

unsafe-inline

。

到目前为止，我的理解如下：

服务器每次连接都会生成一个新的随机数客户端通过以某种方式获取此随机数，并将此字符串插入到每个脚本标记中

但是，我不知道客户端如何获得这个在每个连接中都是动态且唯一的值。 某种方式是什么样的？我应该实现一个额外的 API 来获取这个值吗？

我使用了 React.js，并且我的 HTML 头中有一个 Google 跟踪代码管理器片段，如果有人可以提供与这些相关的示例，那就完美了。

Answer 1

React 应用程序是一个 SPA（单页应用程序），因此使用

XMLHttpRequest()

加载内容并插入，无需重新加载页面。因此，不使用

'nonce-value'

，因为您无法在每次页面刷新时生成新的“随机数”。

'nonce'

可以在SSR（服务器端渲染）时使用，在这种情况下，服务器可以生成新的

'nonce'

值并将其插入到已发送的HTML代码中（到

<script nonce='value'>

，

<script src ='some_url' nonce='value'>

，

<style nonce='value'>

和

） <link href='some_url' nonce='value' rel='stylesheet'>

）。

因此，React 应用程序使用

'hash-value'

来允许内联脚本和样式。
例如，

react-static-plugin-csp-meta-tags

包将CSP元标记添加到您的html文件中，并为所有内联脚本和样式标记添加哈希值。

Answer 2

这是一个创建 React + Webpack 应用程序以使用 Node 和 Nginx 服务器在每次页面刷新时生成 CSP 随机数的示例。