在內容安全性策略中將隨機數或哈希值用於內聯樣式

Question

我正在為我的Web應用程序添加內容安全策略設置，並希望嚴格限制內聯腳本和內聯樣式。 我的內聯腳本可以正常工作，但是內聯樣式有問題。 對於背景，我的Web應用程序在后端使用Elixir / Phoenix，在前端包含React組件。

內聯腳本的隨機數-作品

我只是少量的內聯腳本來引導React組件。 根據CSP指南 ，我使用隨機數值來處理這些內聯腳本。 具體來說，我在每次頁面加載時生成一個新的nonce值服務器端，並將其包含在content-security-policy標頭中，還使用服務器端渲染將其注入到腳本標記中的nonce屬性中。 這很好。

內聯樣式的隨機數-不起作用

內聯樣式是另一個故事。 內聯樣式在React中很常見。 我希望我可以為此使用類似的隨機數方法，但是到目前為止，我還沒有能夠使它起作用。 Nonce值列在https://developer.mozilla.org/zh-CN/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.

我已經搜索了一段時間，但沒有找到任何暗示現時值適用於內聯樣式的提示，而不是我上面提到的內容。 任何人都可以確認隨機數值適用於內聯樣式嗎？

如果它們不起作用，似乎使用哈希是我的下一個最佳選擇。 通過查看上面的每條錯誤消息並將哈希添加到content-security-policy標頭中，可以使哈希工作。 不過，這不是一個非常可擴展的解決方案，如果我必須走那條路，我想知道是否有人想出了一種自動生成哈希的方法，而無需手動導航應用中的任何地方並查看錯誤消息以獲取哈希值。

您可以提供的任何幫助都將受到贊賞。

謝謝。 賈斯汀

Answer 1

在查看了內容安全策略允許不帶unsafe-inline的內聯樣式后 ，似乎不支持此樣式 ，可能是因為該規范似乎暗示它僅引用<style>標記中的內聯樣式，類似於該規范對內聯的引用方式<script>標記中的<script> 。

假設這是正確的，看來我將不得不使用散列路由或僅為style-src添加'unsafe-inline' 。