时间戳

首页 > 解决方案 > 在 content-security-policy 中为内联样式使用 nonce 或 hash 值

javascript - 在 content-security-policy 中为内联样式使用 nonce 或 hash 值

问题描述

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

内联脚本的 Nonce - 作品

我只有少量的内联脚本来引导 React 组件。根据CSP 指南，我使用 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标题中来使散列起作用。不过，这不是一个非常可扩展的解决方案，如果我必须走那条路，我想知道是否有人想出了一种方法来自动生成哈希，而无需在应用程序中的任何地方手动导航并查看错误获取哈希的消息。

感谢您提供的任何帮助。

谢谢。贾斯汀

标签： javascriptreactjssecuritycontent-security-policy

解决方案

在查看Content Security Policy allow inline style without unsafe-inline之后，它似乎不受支持，可能是因为规范似乎暗示它仅指<style>标签中的内联样式，类似于规范中指代内联脚本的方式<script>标签。

假设这是正确的，看来我必须走散列路线或'unsafe-inline'仅添加 for style-src.

推荐阅读