【发布时间】：2019-01-18 11:59:12
【问题描述】：
我正在为我的 Web 应用程序添加内容安全策略设置，并且希望对内联脚本和内联样式严格要求。我的内联脚本工作正常，但内联样式有问题。对于后台，我的 Web 应用在后端使用 Elixir/Phoenix，并在前端包含 React 组件。
内联脚本的 Nonce - 有效
我只有少量内联脚本来引导 React 组件。根据CSP guidelines，我使用nonce 值来处理这些内联脚本。具体来说，我在每个页面加载时生成一个新的nonce 值服务器端并将其包含在content-security-policy 标头中，并使用服务器端渲染将其注入脚本标记中的nonce 属性。这很好用。
内联样式的 Nonce - 不起作用
内联样式是另一回事。内联样式在 React 中很常见。我希望我可以为此使用类似的 nonce 方法，但到目前为止，我还无法让它发挥作用。 Nonce 值列在https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src 的 style-src 页面中，因此看起来这应该有效，尽管文档的该部分引用了脚本，所以可能不是。我尝试将nonce 属性注入到生成的 HTML 中，但这不起作用。我继续收到正常的错误消息。
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' 'nonce-my-long-ugly-random-nonce-value'". Either the 'unsafe-inline' keyword, a hash ('sha256-specific-hash'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
我已经搜索了一段时间，但除了我上面提到的之外，还没有找到任何暗示 nonce 值适用于内联样式的提示。任何人都可以确认 nonce 值适用于内联样式吗？
如果它们不起作用，似乎使用哈希是我的下一个最佳选择。我可以通过查看上面的每条错误消息并将散列添加到content-security-policy 标头来使散列起作用。不过，这不是一个非常可扩展的解决方案，如果我必须走那条路，我想知道是否有人想出了一种方法来自动生成哈希，而无需在应用程序中的任何地方手动导航并查看错误获取哈希的消息。
感谢您提供的任何帮助。
谢谢。 贾斯汀
【问题讨论】：
-
根据 CSP 规范中的要求，任何元素只要具有
nonce属性，都是“不可确定的”；见w3c.github.io/webappsec-csp/#is-element-nonceable。此外，nonce-source源表达式在任何序列化源列表（w3c.github.io/webappsec-csp/#grammardef-source-expression）中均有效，style-src指令允许将任何序列化源列表作为其值 w3c.github.io/webappsec-csp/#directive-style-src。所以这一切都意味着，根据 CSP 规范，浏览器必须支持将 nonce 用于内联样式元素（不仅仅是脚本）。 -
谢谢@sideshowbarker。阅读文档，它似乎应该可以工作，但至少在 Chrome 版本 68.0.3440.106（官方构建）（64 位）和 Safari 版本 11.1.2（13605.3.8）上没有。我尝试了不同的 nonce 值，以防我的太复杂或其他什么，但这并没有影响任何事情。我知道 nonce 值适用于脚本，因此假设您对规范的理解是正确的，看起来规范的这一部分没有正确实施？
标签： javascript reactjs security content-security-policy