From 2ad7118f6c693d2c9de106bbefeb2018aec93371 Mon Sep 17 00:00:00 2001 From: Azali Date: Wed, 6 Mar 2024 22:38:06 +0100 Subject: [PATCH] feat(csp): allow the usage of the angular nonce token --- README.md | 3 ++- .../src/lib/angular-google-tag-manager.service.ts | 6 +++++- projects/demo-application/src/app.config.ts | 3 ++- projects/demo-application/src/index.html | 2 +- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 30df058..2fce007 100644 --- a/README.md +++ b/README.md @@ -118,7 +118,8 @@ npm i --save angular-google-tag-manager ### Custom configuration and GTM environments -You can pass _gtm_preview_ and _gtm_auth_ optional variables to your GTM by providing them in app.module.ts +You can provide the nonce through the Angular [`CSP_NONCE`](https://angular.io/guide/security#content-security-policy) token or by providing the `googleTagManagerCSPNonce` token. +You can pass _gtm_preview_ and _gtm_auth_ optional variables to your GTM by providing them in app.module.ts. ``` providers: [ diff --git a/projects/angular-google-tag-manager/src/lib/angular-google-tag-manager.service.ts b/projects/angular-google-tag-manager/src/lib/angular-google-tag-manager.service.ts index 60069ba..d0ec8e0 100644 --- a/projects/angular-google-tag-manager/src/lib/angular-google-tag-manager.service.ts +++ b/projects/angular-google-tag-manager/src/lib/angular-google-tag-manager.service.ts @@ -1,4 +1,4 @@ -import { Inject, Injectable, Optional } from '@angular/core'; +import { CSP_NONCE, Inject, Injectable, Optional, inject } from '@angular/core'; import { GoogleTagManagerConfiguration } from './angular-google-tag-manager-config.service'; import { GoogleTagManagerConfig } from './google-tag-manager-config'; @@ -37,6 +37,10 @@ export class GoogleTagManagerService { @Inject('googleTagManagerCSPNonce') public googleTagManagerCSPNonce: string ) { + const ngCspNonce = inject(CSP_NONCE); + if (!googleTagManagerCSPNonce && ngCspNonce){ + this.googleTagManagerCSPNonce = ngCspNonce; + } this.config = this.googleTagManagerConfiguration?.get(); if (this.config == null) { this.config = { id: null }; diff --git a/projects/demo-application/src/app.config.ts b/projects/demo-application/src/app.config.ts index 0454ab2..a013fd6 100644 --- a/projects/demo-application/src/app.config.ts +++ b/projects/demo-application/src/app.config.ts @@ -19,7 +19,8 @@ export const appConfig: ApplicationConfig = { provideRouter(routes), provideGoogleTagManager({ id: 'GTM-PV8586C', - gtm_csp_none: 'CSP-NONCE', + // You can provide the nonce automically by providing the value through Angular. See: https://angular.io/guide/security#content-security-policy + // gtm_csp_none: 'CSP-NONCE', // gtm_auth: YOUR_GTM_AUTH, // gtm_preview: YOUR_GTM_ENV }), diff --git a/projects/demo-application/src/index.html b/projects/demo-application/src/index.html index 7fbff8c..ab168b1 100644 --- a/projects/demo-application/src/index.html +++ b/projects/demo-application/src/index.html @@ -9,6 +9,6 @@ - +