feat(runtime): support for CSP nonces

src/client/client-patch-browser.ts

@@ -104,6 +104,13 @@ const patchDynamicImport = (base: string, orgScriptElm: HTMLScriptElement) => {
             type: 'application/javascript',
           })
         );
+
+        // Apply CSP nonce to the script tag if it exists
+        const nonce = plt.$nonce$ ?? (window as any).nonce;
+        if (nonce != null) {
+          script.setAttribute('nonce', nonce);
+        }
+
         mod = new Promise((resolve) => {
           script.onload = () => {
             resolve((win as any)[importFunctionName].m);

src/client/polyfills/css-shim/custom-style.ts

@@ -50,6 +50,14 @@ export class CustomStyle implements CssVarShim {
     const styleEl = this.doc.createElement('style');
     styleEl.setAttribute('data-no-shim', '');
 
+    // Apply CSP nonce to the style tag if it exists
+    // NOTE: we cannot use the "platform" object here because these files
+    // cannot resolve a reference to `@app-data` when running our e2e tests
+    const nonce = (window as any).nonce;
+    if (nonce != null) {
+      styleEl.setAttribute('nonce', nonce);
+    }
+
     if (!baseScope.usesCssVars) {
       // This component does not use (read) css variables
       styleEl.textContent = cssText;

src/client/polyfills/css-shim/load-link-styles.ts

@@ -50,6 +50,14 @@ export function addGlobalLink(doc: Document, globalScopes: CSSScope[], linkElm:
         styleEl.setAttribute('data-styles', '');
         styleEl.textContent = text;
 
+        // Apply CSP nonce to the style tag if it exists
+        // NOTE: we cannot use the "platform" object here because these files
+        // cannot resolve a reference to `@app-data` when running our e2e tests
+        const nonce = (window as any).nonce;
+        if (nonce != null) {
+          styleEl.setAttribute('nonce', nonce);
+        }
+
         addGlobalStyle(globalScopes, styleEl);
         linkElm.parentNode.insertBefore(styleEl, linkElm);
         linkElm.remove();

src/client/polyfills/css-shim/test/css-shim.spec.ts

@@ -1,5 +1,6 @@
 import { mockWindow } from '@stencil/core/testing';
 
+import { win } from '../../../client-window';
 import { CustomStyle } from '../custom-style';
 
 describe('css-shim', () => {
@@ -372,6 +373,25 @@ describe('css-shim', () => {
     );
   });
 
+  it('should create a style element without a nonce attribute', () => {
+    const customStyle = new CustomStyle(window, document);
+    const hostEl = document.createElement('div');
+
+    const styleEl = customStyle.createHostStyle(hostEl, 'sc-div', 'color: red;', false);
+
+    expect(styleEl.getAttribute('nonce')).toBe(null);
+  });
+
+  it('should create a style element with a nonce attribute', () => {
+    const customStyle = new CustomStyle(window, document);
+    const hostEl = document.createElement('div');
+    (win as any).nonce = 'abc123';
+
+    const styleEl = customStyle.createHostStyle(hostEl, 'sc-div', 'color: red;', false);
+
+    expect(styleEl.getAttribute('nonce')).toBe('abc123');
+  });
+
   var window: Window; // eslint-disable-line no-var -- shims will continue to use var while we support older browsers
   var document: Document; // eslint-disable-line no-var -- shims will continue to use var while we support older browsers
 

src/client/polyfills/css-shim/test/load-link-styles.spec.ts

@@ -0,0 +1,39 @@
+import { win } from '../../../client-window';
+import { addGlobalLink } from '../load-link-styles';
+
+describe('loadLinkStyles', () => {
+  describe('addGlobalLink', () => {
+    global.fetch = jest.fn().mockResolvedValue({ text: () => '--color: var(--app-color);' });
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should create a style tag within the link element parent node', async () => {
+      const linkElm = document.createElement('link');
+      linkElm.setAttribute('rel', 'stylesheet');
+      linkElm.setAttribute('href', '');
+
+      const parentElm = document.createElement('head');
+      parentElm.appendChild(linkElm);
+
+      await addGlobalLink(document, [], linkElm);
+
+      expect(parentElm.innerHTML).toEqual('<style data-styles>--color: var(--app-color);</style>');
+    });
+
+    it('should create a style tag with a nonce attribute within the link element parent node', async () => {
+      (win as any).nonce = 'abc123';
+      const linkElm = document.createElement('link');
+      linkElm.setAttribute('rel', 'stylesheet');
+      linkElm.setAttribute('href', '');
+
+      const parentElm = document.createElement('head');
+      parentElm.appendChild(linkElm);
+
+      await addGlobalLink(document, [], linkElm);
+
+      expect(parentElm.innerHTML).toEqual('<style data-styles nonce="abc123">--color: var(--app-color);</style>');
+    });
+  });
+});

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

@@ -81,6 +81,14 @@ const generateCustomElementsTypesOutput = async (
     ` */`,
     `export declare const setAssetPath: (path: string) => 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) and`,
+    ` * will result in the same behavior.`,
+    ` */`,
+    `export declare const setNonce: (nonce: string) => void`,
+    ``,
     `export interface SetPlatformOptions {`,
     `  raf?: (c: FrameRequestCallback) => number;`,
     `  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;`,

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

@@ -232,7 +232,7 @@ export const generateEntryPoint = (outputTarget: d.OutputTargetDistCustomElement
   const imp: string[] = [];
 
   imp.push(
-    `export { setAssetPath, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';`,
+    `export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';`,
     `export * from '${USER_INDEX_ENTRY_ID}';`
   );
 

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

@@ -150,6 +150,7 @@ function createEntryModule(cmps: d.ComponentCompilerMeta[]): d.EntryModule {
 
 const getLazyEntry = (isBrowser: boolean): string => {
   const s = new MagicString(``);
+  s.append(`export { setNonce } from '${STENCIL_CORE_ID}';\n`);
   s.append(`import { bootstrapLazy } from '${STENCIL_CORE_ID}';\n`);
 
   if (isBrowser) {

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

@@ -89,5 +89,13 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 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) and
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;
 `;
 };

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

@@ -84,6 +84,14 @@ describe('Custom Elements Typedef generation', () => {
       ' */',
       'export declare const setAssetPath: (path: string) => 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) and',
+      ' * will result in the same behavior.',
+      ' */',
+      'export declare const setNonce: (nonce: string) => void',
+      '',
       'export interface SetPlatformOptions {',
       '  raf?: (c: FrameRequestCallback) => number;',
       '  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;',

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

@@ -148,7 +148,7 @@ describe('Custom Elements output target', () => {
       );
       addCustomElementInputs(buildCtx, bundleOptions);
       expect(bundleOptions.loader['\0core']).toEqual(
-        `export { setAssetPath, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';
+        `export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';
 export * from '${USER_INDEX_ENTRY_ID}';
 import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';
 globalScripts();
@@ -174,7 +174,7 @@ export { MyBestComponent, defineCustomElement as defineCustomElementMyBestCompon
       );
       addCustomElementInputs(buildCtx, bundleOptions);
       expect(bundleOptions.loader['\0core']).toEqual(
-        `export { setAssetPath, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';
+        `export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';
 export * from '${USER_INDEX_ENTRY_ID}';
 import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';
 globalScripts();

src/declarations/stencil-private.ts

@@ -1697,6 +1697,11 @@ export interface PlatformRuntime {
   $flags$: number;
   $orgLocNodes$?: Map<string, RenderNode>;
   $resourcesUrl$: string;
+  /**
+   * The nonce value to be applied to all script/style tags at runtime.
+   * If `null`, the nonce attribute will not be applied.
+   */
+  $nonce$?: string | null;
   jmp: (c: Function) => any;
   raf: (c: FrameRequestCallback) => number;
   ael: (
@@ -2399,6 +2404,8 @@ export interface NewSpecPageOptions {
   attachStyles?: boolean;
 
   strictBuild?: boolean;
+
+  platform?: Partial<PlatformRuntime>;
 }
 
 /**

src/declarations/stencil-public-runtime.ts

@@ -298,6 +298,15 @@ export declare function getAssetPath(path: string): string;
  */
 export declare function setAssetPath(path: string): string;
 
+/**
+ * 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) 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;
+
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for

src/hydrate/platform/index.ts

@@ -186,5 +186,6 @@ export {
   renderVdom,
   setAssetPath,
   setMode,
+  setNonce,
   setValue,
 } from '@runtime';

src/internal/stencil-core/index.d.ts

@@ -43,6 +43,7 @@ export {
   setAssetPath,
   setErrorHandler,
   setMode,
+  setNonce,
   setPlatformHelpers,
   State,
   Watch,

src/runtime/bootstrap-lazy.ts

@@ -12,6 +12,7 @@ import { proxyComponent } from './proxy-component';
 import { HYDRATED_CSS, HYDRATED_STYLE_ID, PLATFORM_FLAGS, PROXY_FLAGS } from './runtime-constants';
 import { convertScopedToShadow, registerStyle } from './styles';
 import { appDidLoad } from './update-component';
+export { setNonce } from '@platform';
 
 export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.CustomElementsDefineOptions = {}) => {
   if (BUILD.profile && performance.mark) {
@@ -166,6 +167,12 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
   if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
     visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
     visibilityStyle.setAttribute('data-styles', '');
+
+    // Apply CSP nonce to the style tag if it exists
+    const nonce = plt.$nonce$ ?? (window as any).nonce;
+    if (nonce != null) {
+      visibilityStyle.setAttribute('nonce', nonce);
+    }
     head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
   }
 

src/runtime/index.ts

@@ -10,6 +10,7 @@ export { createEvent } from './event-emitter';
 export { Fragment } from './fragment';
 export { addHostEventListeners } from './host-listener';
 export { getMode, setMode } from './mode';
+export { setNonce } from './nonce';
 export { parsePropertyValue } from './parse-property-value';
 export { setPlatformOptions } from './platform-options';
 export { proxyComponent } from './proxy-component';

src/runtime/nonce.ts

@@ -0,0 +1,9 @@
+import { plt } from '@platform';
+
+/**
+ * Assigns the given value to the nonce property on the runtime platform object.
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+ * @param nonce The value to be assigned to the platform nonce property.
+ * @returns void
+ */
+export const setNonce = (nonce: string) => (plt.$nonce$ = nonce);

src/runtime/styles.ts

@@ -77,6 +77,12 @@ export const addStyle = (
             styleElm.innerHTML = style;
           }
 
+          // Apply CSP nonce to the style tag if it exists
+          const nonce = plt.$nonce$ ?? (window as any).nonce;
+          if (nonce != null) {
+            styleElm.setAttribute('nonce', nonce);
+          }
+
           if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) {
             styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
           }

src/runtime/test/style.spec.tsx

@@ -23,6 +23,31 @@ describe('style', () => {
     expect(styles.get('sc-cmp-a')).toBe(`div { color: red; }`);
   });
 
+  it('applies the nonce value to the head style tags', async () => {
+    @Component({
+      tag: 'cmp-a',
+      styles: `div { color: red; }`,
+    })
+    class CmpA {
+      render() {
+        return `innertext`;
+      }
+    }
+
+    const { doc } = await newSpecPage({
+      components: [CmpA],
+      includeAnnotations: true,
+      html: `<cmp-a></cmp-a>`,
+      platform: {
+        $nonce$: '1234',
+      },
+    });
+
+    expect(doc.head.innerHTML).toEqual(
+      '<style data-styles nonce="1234">cmp-a{visibility:hidden}.hydrated{visibility:inherit}</style>'
+    );
+  });
+
   describe('mode', () => {
     it('md mode', async () => {
       setMode(() => 'md');

src/testing/platform/testing-platform.ts

@@ -35,7 +35,7 @@ export const setSupportsShadowDom = (supports: boolean) => {
   supportsShadow = supports;
 };
 
-export function resetPlatform() {
+export function resetPlatform(defaults: Partial<d.PlatformRuntime> = {}) {
   if (win && typeof win.close === 'function') {
     win.close();
   }
@@ -44,6 +44,7 @@ export function resetPlatform() {
   styles.clear();
   plt.$flags$ = 0;
   Object.keys(Context).forEach((key) => delete Context[key]);
+  Object.assign(plt, defaults);
 
   if (plt.$orgLocNodes$ != null) {
     plt.$orgLocNodes$.clear();

src/testing/spec-page.ts

@@ -36,7 +36,7 @@ export async function newSpecPage(opts: NewSpecPageOptions): Promise<SpecPage> {
   }
 
   // reset the platform for this new test
-  resetPlatform();
+  resetPlatform(opts.platform ?? {});
   resetBuildConditionals(BUILD);
 
   if (Array.isArray(opts.components)) {