From a7dd5c6798d04fa96b589f95d624aa36037ad287 Mon Sep 17 00:00:00 2001
From: Apoorv Mishra <apoorvmishra101092@gmail.com>
Date: Thu, 9 Nov 2023 10:40:04 +0530
Subject: [PATCH] fix: allow script injection from react dev tools in dev and
 stage envs (#6120)

---
 .env.sample            | 5 +++++
 server/env.ts          | 8 ++++++++
 server/services/web.ts | 7 ++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/.env.sample b/.env.sample
index 3e8cadbe4..8ebec5632 100644
--- a/.env.sample
+++ b/.env.sample
@@ -195,3 +195,8 @@ RATE_LIMITER_DURATION_WINDOW=60
 # Iframely API config
 # IFRAMELY_URL=
 # IFRAMELY_API_KEY=
+
+# Enable unsafe-inline in script-src CSP directive
+# Setting it to true allows React dev tools add-on in
+# Firefox to successfully detect the project
+DEVELOPMENT_UNSAFE_INLINE_CSP=false
diff --git a/server/env.ts b/server/env.ts
index 3d0a2efaa..90551f918 100644
--- a/server/env.ts
+++ b/server/env.ts
@@ -686,6 +686,14 @@ export class Environment {
   @CannotUseWithout("IFRAMELY_URL")
   public IFRAMELY_API_KEY = this.toOptionalString(process.env.IFRAMELY_API_KEY);
 
+  /**
+   * Enable unsafe-inline in script-src CSP directive
+   */
+  @IsBoolean()
+  public DEVELOPMENT_UNSAFE_INLINE_CSP = this.toBoolean(
+    process.env.DEVELOPMENT_UNSAFE_INLINE_CSP ?? "false"
+  );
+
   /**
    * The product name
    */
diff --git a/server/services/web.ts b/server/services/web.ts
index fcdd1cec3..e2fdc1148 100644
--- a/server/services/web.ts
+++ b/server/services/web.ts
@@ -104,7 +104,12 @@ export default function init(app: Koa = new Koa(), server?: Server) {
       directives: {
         defaultSrc,
         styleSrc,
-        scriptSrc: [...scriptSrc, `'nonce-${ctx.state.cspNonce}'`],
+        scriptSrc: [
+          ...scriptSrc,
+          env.DEVELOPMENT_UNSAFE_INLINE_CSP
+            ? "'unsafe-inline'"
+            : `'nonce-${ctx.state.cspNonce}'`,
+        ],
         mediaSrc: ["*", "data:", "blob:"],
         imgSrc: ["*", "data:", "blob:"],
         frameSrc: ["*", "data:"],