feat(core): ARC-78 added CSP

feat(security): implement CSP via react-helmet-async in React frontend

Author: piyushsinghgaur1

.env.development.example

@@ -0,0 +1,9 @@
+VITE_CSP_DEFAULT_SRC=
+VITE_CSP_SCRIPT_SRC=
+VITE_CSP_STYLE_SRC=
+VITE_CSP_IMG_SRC=
+VITE_CSP_CONNECT_SRC=
+VITE_CSP_OBJECT_SRC=
+VITE_CSP_BASE_URI=
+VITE_CSP_FORM_ACTION=
+VITE_CSP_BLOCK_ALL_MIXED_CONTENT=

.env.production.example

@@ -0,0 +1,9 @@
+VITE_CSP_DEFAULT_SRC=
+VITE_CSP_SCRIPT_SRC=
+VITE_CSP_STYLE_SRC=
+VITE_CSP_IMG_SRC=
+VITE_CSP_CONNECT_SRC=
+VITE_CSP_OBJECT_SRC=
+VITE_CSP_BASE_URI=
+VITE_CSP_FORM_ACTION=
+VITE_CSP_BLOCK_ALL_MIXED_CONTENT=

.gitignore

@@ -19,6 +19,7 @@
 .env.test.local
 .env.production.local
 .env.production
+.env.development
 
 npm-debug.log*
 yarn-debug.log*

package-lock.json

@@ -43,6 +43,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-idle-timer": "^5.7.2",
     "react-redux": "^8.1.0",
     "react-router": "^6.4.3",

package.json

@@ -0,0 +1,54 @@
+import {Helmet} from 'react-helmet-async';
+/**
+ * The `CSPMeta` function generates a Content Security Policy (CSP) meta tag using environment
+ * variables that start with the prefix `VITE_CSP_`. It converts these variable names into
+ * standard CSP directive keys by stripping the prefix and formatting them.
+ * If the value is `'true'`, only the directive key is added (for flags like `block-all-mixed-content`).
+ * If the value includes `'env:VITE_*'`, it dynamically resolves the referenced environment variable.
+ * The resulting CSP string is injected into the document head using a Helmet meta tag.
+ */
+
+const CSPMeta = () => {
+  const env = import.meta.env;
+  const directives: string[] = [];
+  Object.entries(env).forEach(([key, rawValue]) => {
+    if (!key.startsWith('VITE_CSP_')) return;
+
+    const directiveKey = key
+      .replace(/^VITE_CSP_/, '')
+      .replace(/_/g, '-')
+      .toLowerCase();
+
+    const value = rawValue?.trim();
+
+    if (!value) return;
+    if (value === 'true') {
+      directives.push(`${directiveKey};`);
+      return;
+    }
+    const parts = value
+      .split(' ')
+      .map((p: string) => {
+        if (p.startsWith('env:')) {
+          const envVarKey = p.slice(4);
+          return env[envVarKey] ?? null;
+        }
+        return p;
+      })
+      .filter(Boolean);
+
+    if (parts.length > 0) {
+      directives.push(`${directiveKey} ${parts.join(' ')};`);
+    }
+  });
+
+  const csp = directives.join(' ').trim();
+
+  return (
+    <Helmet>
+      <meta httpEquiv="Content-Security-Policy" content={csp} />
+    </Helmet>
+  );
+};
+
+export default CSPMeta;

src/Components/CSP.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import {HelmetProvider} from 'react-helmet-async';
 import AppWrapper from './AppWrapper';
-
+import CSPMeta from './Components/CSP';
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
   <React.StrictMode>
-    <AppWrapper />
+    <HelmetProvider>
+      <CSPMeta />
+      <AppWrapper />
+    </HelmetProvider>
   </React.StrictMode>,
 );