CSP violation, requires `style-src: 'unsafe-inline'`

[ADTC]

This module adds a whole bunch of inline CSS, which is really bad because it violates Content Security Policy in certain sites which do not allow inline styles.

Could the CSS be provided separately, or is there another way to supply CSS without relying on inline CSS?

Enabling unsafe-inline is not recommended (security-wise, we should be against doing so), because it opens the site Cross-Site Scripting attacks (XSS).

[cjpillsbury]

Hey @ADTC thanks for engagement and interest in Media Chrome! I just want to make sure we're separating out two different considerations:

1. Folks who have particular CSP setups not being able to use Media Chrome because of those setups
2. Legitimate security concerns/attack vectors that are introduced specifically because of Media Chrome's use of inline styles.

I can see the pain/friction with (1), since making arguments/exceptions/updates to CSP setups can be onerous, and any changes should be taken responsibly (i.e. not opening oneself up to attack vectors). We will try to look into this for sure.

I'm having trouble seeing where (2) applies though, at least if you're taking advantage of things like https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src to avoid XSS. More broadly speaking, if folks are in a position to inject malicious scripts into our CSS use cases, it seems like there would be a larger security issue at play here? Maybe I'm missing something? Can you walk me through a concrete scenario where

1. someone can exploit Media Chrome's use of inline styles for malicious purposes
2. the scenario doesn't also entail more far-reaching security risks/attack vectors.

While I certainly have some familiarity with security, I'm by no means an expert, so it's 💯 possible I'm missing something here, so this is definitely not meant to be a dismissal of your callout.

[cjpillsbury]

Just to add some additional context to the conversation, it looks like this will unfortunately be a general issue with certain CSP setups and web components. Some conversations (starting in 2017 🤯):

• https://github.com/WICG/webcomponents/issues/627
• https://github.com/google/WebFundamentals/issues/8817 (linked from first)
• https://github.com/justinribeiro/lite-youtube/issues/52 (linked from first)

[ADTC]

Unfortunately I do not have a solid answer for you. I was basing this on the general knowledge that some CSP setups disallow anything inline, and such setups couldn't use Media Chrome. I believe my suggestion is an alternative version of Media Chrome which do not use inline styles but provides CSS as a separate file delivered by a CDN like JsDeliver.

[cjpillsbury]

Yeah, per the conversations linked above, this will be fairly bad practice for web component implementation (separate from CSP setups), as it introduces a remotely loaded dependency for web components. We can certainly discuss this as a team to see if there are any alternative approaches here, but from what I can tell from the bit of digging I did, this may be the reality of working with pretty much any standard web component library.

[luwes]

The last answer in the lite-youtube issues seems like a workable solution. Usage of strict-dynamic and adding a nonce to the script that loads media-chrome...

Content-Security-Policy: script-src 'strict-dynamic' 'sha256-base64EncodedHash'

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic