✨ add applyDefault option to createContentSecurityPolicy

.changeset/heavy-coins-tickle.md

@@ -0,0 +1,18 @@
+---
+'@shopify/hydrogen': patch
+---
+
+✨ add applyDefault option to createContentSecurityPolicy which allow use to add policy in front of the existing rules instead of overriding them. The default value of applyDefault option is false which is the current behaviour.
+
+Example usage:
+
+```diff
+const {nonce, header, NonceProvider} = createContentSecurityPolicy(
+  {connectSrc: 'wss://public-domain:*'},
++ {applyDefault: true},
+);
+```
+
+Result of connect-src when `applyDefault=false` is "wss://public-domain:\*"
+
+Result of connect-src when `applyDefault=true` is "wss://public-domain:\* 'self' 'https://cdn.shopify.com' 'https://shopify.com'"

packages/hydrogen/src/csp/csp.ts

@@ -26,9 +26,10 @@ type ContentSecurityPolicy = {
  */
 export function createContentSecurityPolicy(
   directives: Record<string, string[] | string | boolean> = {},
+  options: {applyDefault?: boolean} = {},
 ): ContentSecurityPolicy {
   const nonce = generateNonce();
-  const header = createCSPHeader(nonce, directives);
+  const header = createCSPHeader(nonce, directives, options?.applyDefault);
 
   const Provider = ({children}: {children: ReactNode}) => {
     return createElement(NonceProvider, {value: nonce}, children);
@@ -44,6 +45,7 @@ export function createContentSecurityPolicy(
 function createCSPHeader(
   nonce: string,
   directives: Record<string, string[] | string | boolean> = {},
+  applyDefault = false,
 ): string {
   const nonceString = `'nonce-${nonce}'`;
   const styleSrc = ["'self'", "'unsafe-inline'", 'https://cdn.shopify.com'];
@@ -78,6 +80,14 @@ function createCSPHeader(
   }
 
   const combinedDirectives = Object.assign({}, defaultDirectives, directives);
+  if (applyDefault) {
+    for (const key in defaultDirectives) {
+      combinedDirectives[key] = addCspDirective(
+        directives[key],
+        defaultDirectives[key],
+      );
+    }
+  }
 
   // Make sure that at least script-src includes a nonce directive.
   // If someone doesn't want a nonce in their CSP, they probably
@@ -98,3 +108,19 @@ function createCSPHeader(
     directives: combinedDirectives,
   });
 }
+
+function addCspDirective(
+  currentValue: string[] | string | boolean,
+  value: string[] | string | boolean,
+): boolean | string[] {
+  const normalizedValue = typeof value === 'string' ? [value] : value;
+  const normalizedCurrentValue = Array.isArray(currentValue)
+    ? currentValue
+    : [String(currentValue)];
+
+  const newValue = Array.isArray(normalizedValue)
+    ? [...normalizedCurrentValue, ...normalizedValue]
+    : normalizedValue;
+
+  return newValue;
+}