Shadow dom and CSP style-src

#1

Anyone have an idea how to handle CSP with shadow-dom?

I’ve got around 100 pages/components and modals, almost all of them have their own css, should I really add 100 ‘sha-…’ exceptions in the attribute style-src of my CSP?

#2

I could be mistaken (as there really didn’t seem to be a clear answer), but you should be ok. It looks like the initial CSP settings on the main index.html should cover all your components.

At least in my tests, using this CSP setting

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Ionic components were able to load without any issues.

#3

@mhartington thx for the reply, appreciated :slight_smile:

yes that’s the thing, setting 'unsafe-inline' to style-src cover all components…but that’s a bit insecure/not a best practice no, specially in terms of a pwa?

I tried locally to use localhost:8100 as attribute instead of style-src but I wasn’t that successful, the browser was still asking me to add every single sha values of the components in the CSP rule