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

Question

Using content security policy without style-src 'unsafe-inline' how do you allow styles like this?

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

I've tried adding a nonce to them and adding that nonce to the CSP header but that doesn't seem to work

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

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

Is there any way to do this without adding the 'unsafe-inline' directive??

Answer 1

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

Answer 2

a common workaround for this issue is to write the inline-style (or inline-script) data to an input tag:

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

or in HTML5:

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

and process the data via an external included JavaScript (to avoid violating "script-src" csp):

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