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?
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.
@mhartington thx for the reply, appreciated 
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
@reedrichards were you ever able to address this? The apparent need to use ‘unsafe-inline’ in CSP for Angular applications in general has been a secure app dev issue for us as well, and seems only exacerbated when using Ionic and its heavy component-level styling.
it’s been a long time that I had that issue @mcarefully, the app in which I faced it is even discontinued but, as long as I can see in its index.html file, I did not find any solution at that time.
in addition, I just checked our kit in which I use @ionic/core and I do have to add unsafe-inline for style too. I should probably double check but seems it is then still unfortunately the case.