CSP Nonce Support for generated files

[MrMcGibblets]

Stencil version:

 @stencil/[email protected]

I'm submitting a:
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Same as the closed issue - #496

When bundling we automatically create an inline style which violates the strict CSP usage

Whilst a workaround is to add each individual sha to the CSP policy it isn't ideal and not a nice dev experience.

In webpack this was achieved by adding a top-level nonce value which would then be added to all at bundle time. - styled-components/styled-components#887

Expected behavior:
To be able to provide a nonce for styles (should be for all scripts, img etc...) that will be added to all build-generated scripts, styles etc... Allowing apps to be CSP ready out of the box.

Steps to reproduce:
Add CSP Policy for style-src 'self' and run app.

[BorntraegerMarc]

Working in an organization this is a critical feature for us. It's quite a hazzle to add sha values for our styles.

Was there any internal discussion in the ionic team about this feature?

[FrancoisDF]

Is there any update from the Stencil team in regard of this feature? We also have some concern that limit some of our teams to move ahead with the stencilJs web-components used by our design system.

[ptrot001]

Hi, Any update on this one? I can't believe nothing have been done yet to handle CSP in stencil libraries. Angular and react have added support for CSP in 2015-2016!

I'm also working in a big organization and CSP is a basic security requirement for us. It's a blocker right now!

Any update would be appreciated! 👍 @adamdbradley ?

Thanks

[alexhhn]

Hi,
Any update on this?

[sandersaspera]

We also need that quite urgently

[erwingeiger]

any updates about this? Also our organisation requires to use a CSP.

[sandersaspera]

any updates about this? Also our organisation requires to use a CSP.

In case that helps: I found out that the inline styles for hydrated components (components are invisible or inherit visibility when having the "hydrated" class) can be suppressed by setting "hydratedFlag: null" in the stencil configuration. Those hydrated styles are supposed to prevent the components from "flickering". Maybe a custom output target could be used to write those css rules into a proper css file and thus not violating the corresponding CSP. There is a corresponding suggestion here (#2245)

[splitinfinities]

Hey everyone! Thank you so much for the feedback. We'll be taking this into consideration.

[erwingeiger]

For your information. Our best solution for now was to fork the source files of Stencil and made adjustments to the files
src/runtime/styles.ts
src/runtime/bootstrap-lazy.ts
and a few others , to add the nonce attribute to the generated style tags.
Then we used this fork as a dependency in our project.

Not the best solution, but it works for now. I hope Stencil will come with a better solution in the near future.

[splitinfinities]

@erwingeiger Would you be able to make a PR into Stencil for that? Or do you believe there's a better approach than what you've done?

[erwingeiger]

@splitinfinities I would like, but this is a quick and dirty solution. So I think others can make better approaches.
But I can tell what I did.

In the file src/runtime/bootstrap-lazy.ts after the rule visibilityStyle.setAttribute('data-styles', ''); I placed another setAttribute but now with the nonce attribute.

I did this in the files:
src/client/polyfills/css-shim/load-link-styles.ts
src/runtime/bootstrap-lazy.ts
src/runtime/styles.ts

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[rwaskiewicz]

Hey ionitron-bot, we didn't mean to close this. Bad bot!

[rwaskiewicz]

Initial support for CSP Nonces have been added in today's release of Stencil 2.22.1, with our official guidance on nonce usage with Stencil published here. As a result, I'm going to close this issue. Should anyone run into any issues with the feature, please feel free to open a new issue. Thanks!