CSP nonce 实现是什么样的?

What does the CSP nonce implementation look like?

我最近一直在阅读 CSP 的资料,但我没有找到关于随机数如何工作的明确解释或可靠的例子。出于安全考虑,我尽量避免使用 unsafe-inline

到目前为止,我的理解是这样的:

服务器每次连接都会生成一个新的随机数 客户端通过某种方式获得这个随机数并将这个字符串插入每个脚本标签

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

我用过React.js,我的HTML脑袋里有个Google Tag Manager snippet,如果有人能提供相关的例子就完美了。

React 应用程序是一个 SPA(单页应用程序),因此使用 XMLHttpRequest() 加载内容并在不重新加载页面的情况下插入。因此 'nonce-value' 没有被使用,因为你无法在每次页面刷新时生成一个新的 'nonce'。

当 SSR(服务器端渲染)时可以使用 'nonce',在这种情况下,服务器可以生成新的 '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 文件并为所有内联脚本和样式标记添加哈希值。