Support CSP nonce propagation for injected CSS

package.json

@@ -7,7 +7,7 @@
  "url": "https://github.com/transcend-io/consent-manager-ui.git"
  },
  "homepage": "https://github.com/transcend-io/consent-manager-ui",
- "version": "4.18.2",
+ "version": "4.19.0",
  "license": "MIT",
  "main": "build/ui",
  "files": [

src/config.ts

@@ -20,6 +20,7 @@ const {
  secondaryPolicy,
  languages,
  dismissedViewState = 'Hidden',
+ nonce
 } = settings;
 
 /**
@@ -200,3 +201,11 @@ function validateConfig(config: ConsentManagerConfig): boolean {
 
  return true;
 }
+
+export const CSP_NONCE = nonce;
+if (CSP_NONCE) {
+ const currentScriptDataset = document.currentScript?.dataset;
+ if (currentScriptDataset) {
+ delete currentScriptDataset.nonce;
+ }
+}

src/consent-manager.tsx

@@ -6,7 +6,7 @@ import type {
 import { App } from './components/App';
 import { logger } from './logger';
 import { createHTMLElement } from './utils/create-html-element';
-import { getMergedConfig } from './config';
+import { CSP_NONCE, getMergedConfig } from './config';
 
 // The `transcend` API: methods which we'll create inside Preact and pass back out here via callback
 let consentManagerAPI: ConsentManagerAPI | null = null;
@@ -54,6 +54,10 @@ export const injectConsentManagerApp = async (
  // Append UI container to doc to activate style.sheet
  (document.documentElement || document).append(consentManager);
 
+ if (CSP_NONCE) {
+ style.nonce = CSP_NONCE;
+ }
+
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  style
  .sheet! // 1st rule so subsequent properties are reset

src/css.ts

@@ -1,3 +1,4 @@
+import { CSP_NONCE } from './config';
 import { getAppContainer } from './consent-manager';
 import { logger } from './logger';
 import { createHTMLElement } from './utils/create-html-element';
@@ -13,6 +14,9 @@ export const injectCss = (stylesheetUrl: string): Promise<void> =>
  const root = getAppContainer();
  if (root && stylesheetUrl) {
  const link = createHTMLElement<HTMLLinkElement>('link');
+ if (CSP_NONCE) {
+ link.nonce = CSP_NONCE;
+ }
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.id = stylesheetUrl;