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 文件中，并为所有内联脚本和样式标记添加哈希值。