Javascript 在内联样式的内容安全策略中使用nonce或hash值

我正在为我的web应用程序添加内容安全策略设置，并希望严格控制内联脚本和内联样式。我的内联脚本工作正常，但内联样式有问题。作为背景，我的web应用程序在后端使用Elixir/Phoenix，在前端包括React组件

Nonce用于内联脚本-有效

我只有少量内联脚本来引导React组件。根据，我使用nonce值来处理这些内联脚本。具体来说，我在每个页面加载上生成一个新的

nonce

值服务器端，并将其包含在

内容安全策略

头中，还使用服务器端呈现将其注入脚本标记中的

nonce

属性。这个很好用

Nonce用于内联样式-不起作用

内联线风格是另一回事。内联线样式在React中非常常见。我的希望是，我可以使用类似的暂时方法来实现这一点，但到目前为止，我还没有能够让它发挥作用。Nonce值列在的style src页面中，因此看起来应该可以工作，尽管文档的该部分引用了脚本，所以可能无法工作。我尝试将

nonce

属性注入到生成的HTML中，但这不起作用。我继续收到正常的错误消息

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“默认src‘self’‘nonce my long丑陋的随机nonce值’”。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-specific-hash'）或nonce（'nonce-…'）。还请注意，没有显式设置“style src”，因此使用“default src”作为回退。

我已经搜索了一段时间，除了上面提到的以外，还没有发现任何关于nonce值适用于内联样式的提示。有人能确认nonce值适用于内联样式吗

如果它们不起作用，那么使用哈希似乎是我下一个最好的选择。我可以通过查看每个错误消息（如上面的错误消息）并将哈希添加到

内容安全策略

头中，使哈希正常工作。不过，这不是一个非常可扩展的解决方案，如果我必须走这条路，我想知道是否有人想出了一种自动生成哈希的方法，而无需手动导航应用程序中的任何地方并查看错误消息来获取哈希

非常感谢您提供的任何帮助

谢谢。 Justin查看后发现这似乎不受支持，可能是因为规范似乎暗示它仅引用

标记中的内联样式，类似于规范引用

标记中的内联脚本

---

假设这是正确的，看起来我将不得不走散列路径或添加

'safe-inline'

仅用于

样式src

根据CSP规范中的要求，任何元素都是“非可伸缩的”，只要它具有

nonce

属性；看见另外，

nonce source

source表达式在任何序列化源列表中都有效，

style src

指令允许任何序列化源列表作为其值。这就意味着，根据CSP规范，浏览器需要支持对内联样式元素（不仅仅是脚本）使用nonce。谢谢@sideshowbarker。在阅读文档时，它看起来确实应该起作用，但实际上不起作用，至少在Chrome版本68.0.3440.106（官方版本）（64位）和Safari版本11.1.2（13605.3.8）上不起作用。我尝试了不同的nonce值，以防我的值太复杂或其他什么，但这并没有影响任何东西。我知道nonce值适用于脚本，所以假设您对规范的理解是正确的，那么规范的这一部分似乎没有正确实现？