feat: allow specifying nonce in global config (#448)

This commit updates the signature of the `PartytownConfig` interface to include the `nonce` property. The `nonce` property can now be specified globally and will be subsequently set on `script` elements created by Partytown.
QwikDev · Aug 28, 2023 · 5d71e43 · 5d71e43 · vercel · Aug 28, 2023
1 parent ddf7344
commit 5d71e43
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/lib/main/snippet.ts b/src/lib/main/snippet.ts
@@ -106,6 +106,12 @@ export function snippet(
     for (i = 0; i < scripts!.length; i++) {
       script = doc.createElement('script');
       script.innerHTML = scripts![i].innerHTML;
+      // We don't need to set a `nonce` on sandbox script since it is loaded via
+      // the `src` attribute. However, we do need to set a `nonce` on the current
+      // script because it contains an inline script. This action ensures that the
+      // script can still be executed even when inline scripts are blocked
+      // (assuming `unsafe-inline` is disabled and `nonce-*` is used instead).
+      script.nonce = config!.nonce;
       doc.head.appendChild(script);
     }
 

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -187,7 +187,12 @@ export interface WebWorkerEnvironment {
   $body$: HTMLElement;
   $location$: Location;
   $visibilityState$?: string;
-  $createNode$: (nodeName: string, instanceId: InstanceId, namespace?: string, prevInstance?: WorkerNode) => WorkerNode;
+  $createNode$: (
+    nodeName: string,
+    instanceId: InstanceId,
+    namespace?: string,
+    prevInstance?: WorkerNode
+  ) => WorkerNode;
   $currentScriptId$?: InstanceId;
   $isInitialized$?: number;
   $isLoading$?: number;
@@ -489,6 +494,12 @@ export interface PartytownConfig {
    * Path to the service worker file. Defaults to `partytown-sw.js`.
    */
   swPath?: string;
+  /**
+   * The nonce property may be set on script elements created by Partytown.
+   * This should be set only when dealing with content security policies
+   * and when the use of `unsafe-inline` is disabled (using `nonce-*` instead).
+   */
+  nonce?: string;
 }
 
 /**

diff --git a/src/react/snippet.tsx b/src/react/snippet.tsx
@@ -9,9 +9,7 @@ import { partytownSnippet } from '@builder.io/partytown/integration';
  *
  * @public
  */
-export interface PartytownProps extends PartytownConfig {
-  nonce?: string;
-}
+export interface PartytownProps extends PartytownConfig {}
 
 /**
  * The React `<Partytown/>` component should be placed within the `<head>`