bug: Nonce not being added to styles

[AliKdhim87]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.12.6

Current Behavior

I encountered an issue where the nonce attribute is not being added to the

Error Message (Observed in Browser):

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-MDk5YzRhNTMtZWIyNi00OTg1LWE5ODMtNWI4NDY0NWI0ZmY2'". Either the 'unsafe-inline' keyword, a hash ('sha256-YUKCaHC6u+Nroo+NYv18Vu9sN88jXs+Baxc8F1bNkyE='), or a nonce ('nonce-...') is required to enable inline execution.

Expected Behavior

The nonce attribute should be added to all <style> elements in the rendered HTML output, ensuring compliance with Content Security Policy (CSP) requirements.

System Info

- Browser: Google Chrome, Mozilla Firefox, Safari, Brave
- Technology Stack:
  - Next.js version: 14.1.3
  - Stencil Core version: 4.12.6

Steps to Reproduce

1. Implement the setNonce function to dynamically set the nonce attribute on <style> elements.
2. Verify that the meta tag with the nonce attribute exists in the HTML document.
3. Ensure that the nonce value is correctly set and available in the runtime environment.
4. Inspect the rendered HTML output to confirm the presence of the nonce attribute on
5. Test across different environments, including various browser versions.
6. Check for any error messages related to CSP violations or nonce handling in the browser console.
7. Review the documentation and community resources for any known issues or best practices regarding nonce handling.

Code Reproduction URL

https://github.com/AliKdhim87/configure-csp-nextjs-with-stenciljs

Additional Information

Screenshots:

[tanner-reits]

Hey @AliKdhim87!

Thanks for the issue! Do you know if this is a problem without Next.js in the equation? The reproduction feels a bit complicated at the moment, so it would be great if we could strip out some aspects to help isolate the issue!

[Yudi]

Hey, @tanner-reits!

I'm able to reproduce this with Angular on a fresh ionic start project.

I've followed the steps in the documentation, but setNonce() doesn't seem to work. Angular correctly provides the nonce to CSP_NONCE.

---

Repo: https://github.com/Yudi/csp-nonce-ionic-error/

To reproduce, I set the following:

	// package.json
    "@ionic/angular": "^8.2.0",
    "@ionic/core": "^8.2.0",

<!-- index.html -->
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'nonce-randomNonceGoesHere'; style-src 'self' 'nonce-randomNonceGoesHere'"
    />

// main.ts

import { setNonce } from '@ionic/core/loader';

...

const nonce = 'randomNonceGoesHere';
setNonce(nonce);

bootstrapApplication(AppComponent, {
  providers: [
    { provide: CSP_NONCE, useValue: nonce },
...

main.ts

Console output
index.js

plt.$nonce$ is undefined Therefore nonce is undefined

[tanner-reits]

@Yudi Changing the import statement in main.ts for the setNonce import to the following resolves the errors:

import { setNonce } from '@ionic/core/components';

I believe what you had originally would work if you were using the Ionic Angular module, but since your app is using the standalone components variation, you need to use this altered import. Hope that works!