How can I substitute the CSP nonce value in Angular's index.html using .net 7 (c#)?

Question

Using Angular 16, we can specify a CSP_NONCE injection token to be used in all inline styles and scripts (as described here). In this example, it gets the nonce from globalThis.myRandomNonceValue but I have no idea how that would be provided from the server.

In another example I've seen, a meta tag is added to index.html that provides the nonce value for Angular to reference. Somehow before the page is served it is able to rewrite the index.html to add the nonce to the meta tag.

Assuming my server side code is written in c# and runs on .net 7, this is what my code would look like in my Program.cs to generate a cryptographic-nonce and add it to a CSP header

app.Use(async (context, next) =>
{
    // cryptographic-noncing only supported in Angular 16
    var rng = RandomNumberGenerator.Create();
    var nonceBytes = new byte[32];
    rng.GetBytes(nonceBytes);
    var nonce = Convert.ToBase64String(nonceBytes);
    context.Response.Headers.Add("Content-Security-Policy", $"default-src 'self' 'nonce-{nonce}'");  
    await next();
});

Given that my app is running in .net core

What is the easiest / best way to also make the nonce available for Angular to reference?

I could have swore I saw an example of how to get Angular to pick up the nonce value from the CSP HTTP Header but I cannot find it again

Answer 1

The best way is to send back to the client the nonce value as a cookie. Then, on bootstrapping the application, set the NONCE value. Example:

bootstrapApplication(AppCompoment, {
providers: [{ provide: CSP_NONCE, useValue: my_nonce_cookie_value }]}]

Later edit: In order to avoid HttpOnly flag set to false, you can also set the nonce on Session, then use a rest api call in order to retrieve it.