bug: Nonce not being added to styles about stencil

[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!