Allow 'strict-dynamic' scripts to inject styles

[vejja]

I am talking in the context of Javascript frameworks (e.g. React, Vue, etc.)
CSP is hard to implement in this context because these frameworks inject a lot of dynamic elements on the client side.

Fortunately, we have 'strict-dynamic', so if we allow the root script by nonce or hash, this solves a lot of issues.
But currently, one of the limitations of 'strict-dynamic' is that it can only delegate approval to other <script> elements.
And unfortunately, these frameworks insert a lot of <style> elements at runtime.

So, as it stands now, we have to resort to style-src: 'self' 'unsafe-inline' https:; for styles:

• 'unsafe-inline' is required so that the framework can insert inline styles
• 'self' https: and other name-based allowlists variants are required to insert external styles, because using a nonce or hash for external stylesheets that we know are legit would cancel 'unsafe-inline'

If a script has been allowed by nonce or hash, it is itself a secure context - therefore (unless I'm mistaken) any inline or external style that it decides to inject is legit.

Would it then be possible to extend the scope of 'strict-dynamic' to styles inserted by a secure script?
And maybe not only to styles but to any element by the same logic?

[bakkot]

This came up very briefly here:

'strict-dynamic' applies only to scripts and there is no equivalent for styles. It wouldn't be unreasonable to implement something similar for styles (it could help with resources loaded by stylesheets with an @import), but it would be a new feature request for CSP.

I would also like to see this.

[gregtalarico]

I think this proposal makes a lot of sense. If we are extending trust to a script via a nonce, then anything that script does should be trusted, including setting dynamic styles.

[vejja]

Hi @mikewest
I’d love to hear your thoughts on this one. Ready to provide any help that would be required, if you think useful.