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,41 @@
+import {Helmet} from 'react-helmet-async';
+
+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();
+
+    let value;
+    if (rawValue === 'true') {
+      value = true;
+    } else if (rawValue === 'false') {
+      value = false;
+    } else {
+      value = rawValue;
+    }
+
+    if (typeof value === 'boolean') {
+      if (value) {
+        directives.push(`${directiveKey};`);
+      }
+    } else {
+      directives.push(`${directiveKey} ${value};`);
+    }
+  });
+
+  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>,
 );