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.
BuilderIO · 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>`