Content Security Policy Nonces Documentation doesn't mention where to import setNonce method from

[GauravJKshirsagar]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

The CSP Nonces Docu from IX does not give a example of how to use it in an Angular application. The documention mentions to read official stencil documention which provides a setNonce method. However the IX documention does not mention where to import this setNonce method from. I have created a stackblitz example here making edits to index.html and main.ts. But I am still getting console erros coming from IX related to CSP. Am I missing something here ?

[danielleroux]

Just tested it locally. Looks good on my side:

adding csp header:

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

setNonce

import { setNonce } from '@siemens/ix/loader';
import { setNonce as setNonceIcons } from '@siemens/ix-icons/loader';

const nonce = 'randomNonceGoesHere';

setNonce(nonce);
setNonceIcons(nonce);

Did you forgot to configure the angular side?

https://angular.dev/best-practices/security#content-security-policy

e.g

    <app-root ngCspNonce="randomNonceGoesHere"></app-root>

[GauravJKshirsagar]

Configuring on angular should not matter in this case, as I would anyways get errors from angular. But even after configuring the angular side (which fixes the angular errors), I still get console errors from IX.

[GauravJKshirsagar]

For example this is a plain javascript example for IX,
stackblitz link
Even here we get 1 console error from IX.

[danielleroux]

Also here you have in mind that you need to expose a nonce to vite because css import is handled as inline style.
Also looks like there is an issue regarding parallel bootstrap components within stencil:

• Possible workaround (https://github.com/ionic-team/stencil/blob/1f5a13f07a138e27d9b937c03999837b30e8afc0/src/utils/query-nonce-meta-tag-content.ts#L10):

 <meta name="csp-nonce" content="abc" />

• Resolve parallel bootstrap issue:

defineIconsCustomElements();
setTimeout(() => {
  defineCustomElements();
});

[GauravJKshirsagar]

Thanks for the workaround. And setTimeout thing works for javascript. Any idea how we could do it for Angular ( as we use IxModule directly) since it would be better to use setNonce rather than <meta name="csp-nonce" content="abc" />.