fix: allow script injection from react dev tools in dev and stage envs (#6120)

.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

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
    */

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:"],