Content Security Policy allow inline style without unsafe-inline

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

According to https://bugzilla.mozilla.org/show_bug.cgi?id=855326#c35 nonces for style attributes isn't supported

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'));