I am trying to get an Angular 12 application to production and struggling with adding a nonce to support an inline script (from a third party source). The third party script supports use of a nonce based a custom configuration on their end.

The Content Security Policy (CSP) is defined as a meta tag in index.html and requires the nonce to be defined there as well as inline with the script tag (as I understand it). Ideally, I'd like to remove the meta tag and define the header in the web.config used by Azure App Service Host environment. I am also hoping to add a Content Security Policy Report Only header, which isn't supported as a meta tag, there as well.

The application requires a pretty restrictive CSP where the script-src directive cannot include unsafe-inline; this should add protection against XSS.

Based on my research, I am unable to find a solution to this. Everything I see assumes use of nginx (as the web server) and requires some configuration on that side. I am aware of a .NET Core solution where you can use the Request/Response pipeline to provide nonce creation and token replacement as well as a CSP header definition for the application. However, I am not using .NET Core as this is a pure Angular application. The Site Reliability Engineer I am working with contacted Microsoft about this and they suggested using .NET Core and stated there isn't support for nonce creation within Azure Native App Services (which uses IIS underneath supposedly). So he is advocating that the application provide this support. I just don't see a solution.