From 2c7d48cf4e09e221a6ec96c68beef87300390c80 Mon Sep 17 00:00:00 2001
From: Matthieu Jacq <67386567+matthieujacq@users.noreply.github.com>
Date: Mon, 9 Oct 2023 17:02:15 +0200
Subject: [PATCH] feat: configure CSP for self-hosting and multiple ports in
 dev mode (#1364)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #1358
Closes #1359

⚠️ Need to update the preview and prod environment with a
"NEXT_PUBLIC_FRONTEND_URL" variable before merging.
---
 .frontend_env.example   |  2 +-
 frontend/next.config.js | 36 ++++--------------------------------
 2 files changed, 5 insertions(+), 33 deletions(-)

diff --git a/.frontend_env.example b/.frontend_env.example
index 4b1d39130..766b4d6d5 100644
--- a/.frontend_env.example
+++ b/.frontend_env.example
@@ -1,5 +1,6 @@
 NEXT_PUBLIC_ENV=local
 NEXT_PUBLIC_BACKEND_URL=http://localhost:5050
+NEXT_PUBLIC_FRONTEND_URL=http://localhost:*
 NEXT_PUBLIC_SUPABASE_URL=<change-me>
 NEXT_PUBLIC_SUPABASE_ANON_KEY=<change-me>
 
@@ -12,4 +13,3 @@ NEXT_PUBLIC_GA_ID=<ignore-me-or-change-me>
 NEXT_PUBLIC_E2E_URL=http://localhost:3003
 NEXT_PUBLIC_E2E_EMAIL=<ignore-me-or-change-me>
 NEXT_PUBLIC_E2E_PASSWORD=<ignore-me-or-change-me>
-
diff --git a/frontend/next.config.js b/frontend/next.config.js
index b266558c3..f83eaaaca 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -24,11 +24,7 @@ const ContentSecurityPolicy = {
     "https://fonts.googleapis.com",
     process.env.NEXT_PUBLIC_SUPABASE_URL,
     "https://api.june.so",
-    {
-      prod: "https://www.quivr.app/",
-      preview: "https://preview.quivr.app/",
-      local: ["http://localhost:3000", "http://localhost:3001"],
-    },
+    process.env.NEXT_PUBLIC_FRONTEND_URL,
   ],
   "connect-src": [
     "'self'",
@@ -43,44 +39,20 @@ const ContentSecurityPolicy = {
   "media-src": [
     "'self'",
     "https://user-images.githubusercontent.com",
-    "https://www.quivr.app/",
+    process.env.NEXT_PUBLIC_FRONTEND_URL,
     "https://quivr-cms.s3.eu-west-3.amazonaws.com",
   ],
   "script-src": [
     "'unsafe-inline'",
     "'unsafe-eval'",
     "https://va.vercel-scripts.com/",
-    {
-      prod: "https://www.quivr.app/",
-      preview: "https://preview.quivr.app/",
-      local: ["http://localhost:3000", "http://localhost:3001"],
-    },
+    process.env.NEXT_PUBLIC_FRONTEND_URL,
     "https://www.google-analytics.com/",
   ],
   "frame-ancestors": ["'none'"],
-  "style-src": [
-    "'unsafe-inline'",
-    {
-      prod: "https://www.quivr.app/",
-      preview: "https://preview.quivr.app/",
-      local: ["http://localhost:3000", "http://localhost:3001"],
-    },
-  ],
+  "style-src": ["'unsafe-inline'", process.env.NEXT_PUBLIC_FRONTEND_URL],
 };
 
-// Resolve environment-specific CSP values
-for (const directive of Object.values(ContentSecurityPolicy)) {
-  for (const [index, resource] of directive.entries()) {
-    if (typeof resource === "string") {
-      continue;
-    }
-    directive[index] = resource[process.env.NEXT_PUBLIC_ENV];
-    if (Array.isArray(directive[index])) {
-      directive[index] = directive[index].join(" ");
-    }
-  }
-}
-
 // Build CSP string
 const cspString = Object.entries(ContentSecurityPolicy)
   .map(([key, values]) => `${key} ${values.join(" ")};`)