From 9e8992181ce7d27548d35f98b5a4f78b80795ce8 Mon Sep 17 00:00:00 2001
From: Bret Little <bret.little@shopify.com>
Date: Thu, 21 Mar 2024 11:39:48 -0700
Subject: [PATCH] Fix the default CSP directive for `frameAncestors` (#1883)

Resolves #1783
---
 .changeset/smooth-cooks-attend.md     | 5 +++++
 packages/hydrogen/src/csp/csp.test.ts | 6 +++---
 packages/hydrogen/src/csp/csp.ts      | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/smooth-cooks-attend.md

diff --git a/.changeset/smooth-cooks-attend.md b/.changeset/smooth-cooks-attend.md
new file mode 100644
index 0000000000..1ccc2429c6
--- /dev/null
+++ 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
index 9f2783e90c..1990a7c144 100644
--- 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
index 9fd315df79..32f4b484d2 100644
--- 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,
   };