Fix the default CSP directive for frameAncestors (#1883)

Resolves #1783
Shopify · Mar 21, 2024 · 9e89921 · 9e89921
1 parent adb37c3
commit 9e89921
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/smooth-cooks-attend.md b/.changeset/smooth-cooks-attend.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix default content secuirty policy directive for `frameAncestors`. Resolves [#1783](https://github.com/Shopify/hydrogen/issues/1793)
diff --git a/packages/hydrogen/src/csp/csp.test.ts b/packages/hydrogen/src/csp/csp.test.ts
@@ -18,7 +18,7 @@ afterEach(() => {
 describe('createContentSecurityPolicy', () => {
   it('creates default policy', () => {
     expect(createContentSecurityPolicy().header).toBe(
-      `base-uri 'self'; default-src 'self' 'nonce-somenonce' https://cdn.shopify.com https://shopify.com; frame-ancestors none; style-src 'self' 'unsafe-inline' https://cdn.shopify.com; connect-src 'self' https://monorail-edge.shopifysvc.com`,
+      `base-uri 'self'; default-src 'self' 'nonce-somenonce' https://cdn.shopify.com https://shopify.com; frame-ancestors 'none'; style-src 'self' 'unsafe-inline' https://cdn.shopify.com; connect-src 'self' https://monorail-edge.shopifysvc.com`,
     );
   });
 
@@ -28,7 +28,7 @@ describe('createContentSecurityPolicy', () => {
         styleSrc: ['https://some-custom-css.cdn'],
       }).header,
     ).toBe(
-      `base-uri 'self'; default-src 'self' 'nonce-somenonce' https://cdn.shopify.com https://shopify.com; frame-ancestors none; style-src https://some-custom-css.cdn 'self' 'unsafe-inline' https://cdn.shopify.com; connect-src 'self' https://monorail-edge.shopifysvc.com`,
+      `base-uri 'self'; default-src 'self' 'nonce-somenonce' https://cdn.shopify.com https://shopify.com; frame-ancestors 'none'; style-src https://some-custom-css.cdn 'self' 'unsafe-inline' https://cdn.shopify.com; connect-src 'self' https://monorail-edge.shopifysvc.com`,
     );
   });
 
@@ -38,7 +38,7 @@ describe('createContentSecurityPolicy', () => {
         scriptSrc: ['https://some-custom-css.cdn'],
       }).header,
     ).toBe(
-      `base-uri 'self'; default-src 'self' 'nonce-somenonce' https://cdn.shopify.com https://shopify.com; frame-ancestors none; style-src 'self' 'unsafe-inline' https://cdn.shopify.com; connect-src 'self' https://monorail-edge.shopifysvc.com; script-src https://some-custom-css.cdn 'nonce-somenonce'`,
+      `base-uri 'self'; default-src 'self' 'nonce-somenonce' https://cdn.shopify.com https://shopify.com; frame-ancestors 'none'; style-src 'self' 'unsafe-inline' https://cdn.shopify.com; connect-src 'self' https://monorail-edge.shopifysvc.com; script-src https://some-custom-css.cdn 'nonce-somenonce'`,
     );
   });
 });

diff --git a/packages/hydrogen/src/csp/csp.ts b/packages/hydrogen/src/csp/csp.ts
@@ -59,7 +59,7 @@ function createCSPHeader(
   const defaultDirectives: Record<string, string[] | string | boolean> = {
     baseUri: ["'self'"],
     defaultSrc,
-    frameAncestors: ['none'],
+    frameAncestors: ["'none'"],
     styleSrc,
     connectSrc,
   };