内容安全策略允许内联样式，没有不安全的内联

Question

使用没有style-src'unsafe-inline'的内容安全策略，你如何允许这样的样式？

<span style="font-size: 16px;">Hello</span>

我已经尝试向他们添加一个nonce并将该nonce添加到CSP标头但这似乎不起作用

<span style="font-size: 16px;" nonce="0611873de7e2db5985c289fdfa946caee2ae1860">Hello</span>

"style-src 'nonce-0611873de7e2db5985c289fdfa946caee2ae1860' 'self'"

有没有办法在不添加'unsafe-inline'指令的情况下执行此操作？

Answer 1

根据https://bugzilla.mozilla.org/show_bug.cgi?id=855326#c35不支持样式属性的随机数

Answer 2

此问题的常见解决方法是将内联样式（或内联脚本）数据写入输入标记：

<input id="my-font-size" type="hidden" value="16" />

或在HTML5中：

<input id="my-id" data-font-size="16" />

并通过外部包含的JavaScript处理数据（以避免违反“script-src”csp）：

$('span').css('font-size', $('#my-id').data('font-size'));