# Angular Content-Security-Policy Complex Nonce: Google Tag Manager
Web applications get exploited, leading to economic and reputation damage. Rich content is difficult to protect. Complex standards and complex tooling fight with each other. New technologies like Angular Single Page Applications and externally-driven analytics make it difficult to construct a valid Content-Security-Policy. If you get this wrong, you get malware injected on your site, as I wrote about [here](https://www.agilicus.com/stop-injected-malware-on-your-sit/). Today let's learn how, if we must have an inline script, we can do so with content-security-policy complex nonce
Setting up Google Analytics (via Google Tag Manager) is difficult to understand and achieve securely: you are running Javascript fetched from an inline script, how do you cause it to be trusted without destroying all trust? The answer: a **nonce**. Yes, content-security-policy is complex without the nonce. Set the nonce (to a unique value) on each page load, and use this to indicate what scripts your page has requested.
I've [talked](/project/web-security-101/) earlier about the complexities of web security, about how hard it is to balance security and functionality. One of the tools that Content-Security-Policy allows is the **Nonce**. The **Nonce** must be set differently on each HTTP response, making it complex: it requires participation of the server.
In an Angular project, we normally use **-aot** and **-subresource-integrity**, this sets a secure hash on each resource that we build and serve. However, anything that is fetched externally (e.g. Google Analytics) is more challenging. The recommended way of using Google Analytics is via Google Tag Manager. In turn, you must use a Nonce with it (as shown [here](https://developers.google.com/tag-manager/web/csp)). How can we set that Nonce to be unique, on each request, in an Angular SPA? Read on!
Before we start adding the nonce to external scripts, lets ensure we have hash-based subresource integrity enabled for all internal, compiled Typescript:
```
ng build --aot --subresource-integrity --outputHashing=all --prod=true
```
If we look at our index.html in the dist directory, we will now see it looks something like:
```
...
...
...
```
Those 'integrity=' lines have a sha384 hash of the body of the file. You can read [more](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) about Subresource Integrity. These hashes were generated by Webpack as part of the angular build, in essence, for each file, it performed:
```
openssl dgst -sha384 -binary XXXX.js | openssl base64 -A
```
and this means your browser won't load the resulting file if it has been modified. But, that is not what we are here for today, we are here for external resources (e.g. Google Tag Manager), and a safe way to allow them to be loaded, the nonce.
Next, we enable **[indexTransform](https://github.com/just-jeb/angular-builders/blob/master/packages/custom-webpack/README.md)**. We cause it to, on production builds, add a script to the index.html HEAD section. We add a magic string CSP\_NONCE which we will then replace in the server side (using lua in nginx).
```
npm i -D @angular-builders/custom-webpack
```
```
/*
* index-html.transform.ts
* This exists to modify index.html, after build, for prod,
* to insert the google tag manager
*/
import { TargetOptions } from '@angular-builders/custom-webpack';
import { environment } from './src/environments/environment.prod';
export default (targetOptions: TargetOptions, indexHtml: string) => {
let insertTag = ``;
if (targetOptions.configuration || 'production') {
insertTag = ``;
}
const i = indexHtml.indexOf('');
return `${indexHtml.slice(0, i)}
${insertTag}
${indexHtml.slice(i)}`;
};
```
```
// src/environments/environment.prod.ts
export const environment = {
...
gtmTag: 'GTM-XXXXX',
...
};
```
```
// angular.json
{
...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"indexTransform": "./index-html.transform.ts",
...
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
```
OK, no we are generating an Angular SPA with a header which loads our Google Tag Manager, with our tag, and a **Nonce** just waiting to be set. Note: you don't have to use the Webpack transform, you can just hard code in the script line with the **<script nonce=CSP\_NONCE** prefix if you prefer.
We will now replace the string nonce=CSP\_NONCE with a new, per transaction value, in our *nginx.conf*, adding a new location /index.html which will find all CSP\_NONCE in scripts, and alter:
```
location /index.html {
set_by_lua_block $cspNonce {
local base64 = require('ngx.base64')
local file = assert(io.open('/dev/urandom', 'rb'))
local bytes = file:read(32)
file:close()
return base64.encode_base64url(bytes)
}
sub_filter_once off;
sub_filter_types text/html;
sub_filter_last_modified on;
sub_filter '