Failed to implement CSP Policy's for styles with CSP_NONCE token

[KostiantynBorzik]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

When implementing the CSP policy for styles, we decided to go with the CSP_NONCE token because we are caching index.html.
In order to implement this token we decided to use APP_INITIALIZER to receive a nonce token from the server before the application is loaded and use it afterwards.
For this, we wrote a simple nonce service that is responsible for getting and saving the token

After that we added this configuration to app.module.ts :

export function receiveNonce(nonceService: NonceService) {
  return () => {
    console.log('APP_INITIALIZER useFactory function start working');
    return nonceService.receiveNonce();
  }
}


Providers: [
NonceService,
      {
        provide: APP_INITIALIZER,
        useFactory: receiveNonce,
        deps: [NonceService, HttpClient],
        multi: true
      },
      {
        provide: CSP_NONCE,
        useFactory: (nonceService: NonceService) => {
          console.log('CSP_NONCE useFactory function start working');
          return nonceService.getNonce();
        },
        deps: [NonceService, HttpClient],
        multi: true
      }
]

Example of execution order.

And as a result we get incorrect behavior our СSP_NONCE is executed before APP_INITIALIZER for some reason. Because of this we can not get nonce token from the server, also useFactory does not work with asynchronous operations not anywhere except APP_INITIALIZER that's why we decided to use it.
Expected Behavior: CSP_NONCE token should work fine with factory approach

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Node version - 18.16.0
Angular version - 16.2.12

Anything else?

No response

[JoostK]

This is working as expected; a nonce must be available synchronously during startup.

What's the reasoning for fetching a nonce via the server anyway? Why not generate it locally in the client? That can't normally be done for scripts (as it's a catch 22) but if you have the ability to execute code anyway, then I don't see why you'd need a server to generate a nonce...

[Peter-Zakharevich]

This is working as expected; a nonce must be available synchronously during startup.

What's the reasoning for fetching a nonce via the server anyway? Why not generate it locally in the client? That can't normally be done for scripts (as it's a catch 22) but if you have the ability to execute code anyway, then I don't see why you'd need a server to generate a nonce...

The reason why we're fetching a nonce it's because API side have a control over CSP policies (e.g. alowed chases, nonces e.t.c), Client side receive CSP policies via HTTP headers.
Are you suggesting to implement CSP policies for the styles on the Client side via meta tag ?
In that case, can we use injection of csp_nonce token for meta tag or we have to write some custom logic to populate csp policies there?

[Peter-Zakharevich]

Hi guys, any updates on this ?

[Peter-Zakharevich]

Hi guys, any updates on this ?

[JoostK]

If conceiving the nonce in the client is not an option for you, you can fetch it before bootstrapping Angular to account for the fact that CSP_NONCE has to be provided synchronously.