feat(runtime): updates nonce fallback to use meta tag instead of window (#3955)

* feat(runtime): updates nonce fallback to use meta tag instead of window

This commit updates our CSP nonce support logic to allow implementers to leverage a meta tag in the DOM head for setting nonce values during the Stencil runtime rather than pulling the value off of the global window object

* fix(): PR feedback

* feat(utils): update return type fallback to `undefined` only

Author: tanner-reits

src/client/client-patch-browser.ts

@@ -1,6 +1,6 @@
 import { BUILD, NAMESPACE } from '@app-data';
 import { consoleDevInfo, doc, H, plt, promiseResolve, win } from '@platform';
-import { getDynamicImportFunction } from '@utils';
+import { getDynamicImportFunction, queryNonceMetaTagContent } from '@utils';
 
 import type * as d from '../declarations';
 
@@ -106,7 +106,7 @@ const patchDynamicImport = (base: string, orgScriptElm: HTMLScriptElement) => {
         );
 
         // Apply CSP nonce to the script tag if it exists
-        const nonce = plt.$nonce$ ?? (window as any).nonce;
+        const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(doc);
         if (nonce != null) {
           script.setAttribute('nonce', nonce);
         }

src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts

@@ -84,7 +84,8 @@ const generateCustomElementsTypesOutput = async (
     `/**`,
     ` * Used to specify a nonce value that corresponds with an application's CSP.`,
     ` * When set, the nonce will be added to all dynamically created script and style tags at runtime.`,
-    ` * Alternatively, the nonce value can be set on the window object (window.nonce) which`,
+    ` * Alternatively, the nonce value can be set on a meta tag in the DOM head`,
+    ` * (<meta name="csp-nonce" content="{ nonce value here }" />) which`,
     ` * will result in the same behavior.`,
     ` */`,
     `export declare const setNonce: (nonce: string) => void`,

src/compiler/output-targets/output-lazy-loader.ts

@@ -93,7 +93,8 @@ export declare function applyPolyfills(): Promise<void>;
 /** 
  * Used to specify a nonce value that corresponds with an application's CSP.
  * When set, the nonce will be added to all dynamically created script and style tags at runtime.
- * Alternatively, the nonce value can be set on the window object (window.nonce) which
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
  * will result in the same behavior.
  */
 export declare function setNonce(nonce: string): void;

src/compiler/output-targets/test/custom-elements-types.spec.ts

@@ -87,7 +87,8 @@ describe('Custom Elements Typedef generation', () => {
       '/**',
       ` * Used to specify a nonce value that corresponds with an application's CSP.`,
       ' * When set, the nonce will be added to all dynamically created script and style tags at runtime.',
-      ' * Alternatively, the nonce value can be set on the window object (window.nonce) which',
+      ' * Alternatively, the nonce value can be set on a meta tag in the DOM head',
+      ' * (<meta name="csp-nonce" content="{ nonce value here }" />) which',
       ' * will result in the same behavior.',
       ' */',
       'export declare const setNonce: (nonce: string) => void',

src/declarations/stencil-public-runtime.ts

@@ -302,8 +302,8 @@ export declare function setAssetPath(path: string): string;
  * Used to specify a nonce value that corresponds with an application's
  * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
  * When set, the nonce will be added to all dynamically created script and style tags at runtime.
- * Alternatively, the nonce value can be set on the window object (window.nonce) and
- * will result in the same behavior.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
  * @param nonce The value to be used for the nonce attribute.
  */
 export declare function setNonce(nonce: string): void;

src/runtime/bootstrap-lazy.ts

@@ -1,6 +1,6 @@
 import { BUILD } from '@app-data';
 import { doc, getHostRef, plt, registerHost, supportsShadow, win } from '@platform';
-import { CMP_FLAGS } from '@utils';
+import { CMP_FLAGS, queryNonceMetaTagContent } from '@utils';
 
 import type * as d from '../declarations';
 import { connectedCallback } from './connected-callback';
@@ -169,7 +169,7 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
     visibilityStyle.setAttribute('data-styles', '');
 
     // Apply CSP nonce to the style tag if it exists
-    const nonce = plt.$nonce$ ?? (window as any).nonce;
+    const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(doc);
     if (nonce != null) {
       visibilityStyle.setAttribute('nonce', nonce);
     }

src/runtime/styles.ts

@@ -1,6 +1,6 @@
 import { BUILD } from '@app-data';
 import { doc, plt, styles, supportsConstructableStylesheets, supportsShadow } from '@platform';
-import { CMP_FLAGS } from '@utils';
+import { CMP_FLAGS, queryNonceMetaTagContent } from '@utils';
 
 import type * as d from '../declarations';
 import { createTime } from './profile';
@@ -78,7 +78,7 @@ export const addStyle = (
           }
 
           // Apply CSP nonce to the style tag if it exists
-          const nonce = plt.$nonce$ ?? (window as any).nonce;
+          const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(doc);
           if (nonce != null) {
             styleElm.setAttribute('nonce', nonce);
           }

src/utils/index.ts

@@ -9,6 +9,7 @@ export * from './logger/logger-typescript';
 export * from './logger/logger-utils';
 export * from './message-utils';
 export * from './normalize-path';
+export * from './query-nonce-meta-tag-content';
 export * from './sourcemaps';
 export * from './url-paths';
 export * from './util';

src/utils/query-nonce-meta-tag-content.ts

@@ -0,0 +1,11 @@
+/**
+ * Helper method for querying a `meta` tag that contains a nonce value
+ * out of a DOM's head.
+ *
+ * @param doc The DOM containing the `head` to query against
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
+ * exists or the tag has no content.
+ */
+export function queryNonceMetaTagContent(doc: Document): string | undefined {
+  return doc.head?.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') ?? undefined;
+}

src/utils/test/query-nonce-meta-tag-content.spec.ts

@@ -0,0 +1,39 @@
+import { queryNonceMetaTagContent } from '../query-nonce-meta-tag-content';
+
+describe('queryNonceMetaTagContent', () => {
+  it('should return the nonce value if the tag exists', () => {
+    const meta = document.createElement('meta');
+    meta.setAttribute('name', 'csp-nonce');
+    meta.setAttribute('content', '1234');
+    document.head.appendChild(meta);
+
+    const nonce = queryNonceMetaTagContent(document);
+
+    expect(nonce).toEqual('1234');
+  });
+
+  it('should return `undefined` if the tag does not exist', () => {
+    const nonce = queryNonceMetaTagContent(document);
+
+    expect(nonce).toEqual(undefined);
+  });
+
+  it('should return `undefined` if the document does not have a head element', () => {
+    const head = document.querySelector('head');
+    head.remove();
+
+    const nonce = queryNonceMetaTagContent(document);
+
+    expect(nonce).toEqual(undefined);
+  });
+
+  it('should return `undefined` if the tag has no content', () => {
+    const meta = document.createElement('meta');
+    meta.setAttribute('name', 'csp-nonce');
+    document.head.appendChild(meta);
+
+    const nonce = queryNonceMetaTagContent(document);
+
+    expect(nonce).toEqual(undefined);
+  });
+});