feat(security): implement Content Security Policy using DOMPurify for chat content sanitization and update next.config.mjs for enhanced security

Author: alienx5499

SortVision/next.config.mjs

@@ -1,6 +1,37 @@
 /** @type {import('next').NextConfig} */
 const isProd = process.env.NODE_ENV === 'production';
 
+const cspScriptSources = [
+  "'self'",
+  "'unsafe-inline'",
+  ...(isProd ? [] : ["'unsafe-eval'"]),
+  'https://vercel.live',
+  'https://vitals.vercel-insights.com',
+  'https://va.vercel-scripts.com',
+  'https://www.googletagmanager.com',
+  'https://www.google-analytics.com',
+  'https://fonts.googleapis.com',
+  'https://www.sortvision.com',
+];
+
+const contentSecurityPolicy = [
+  "default-src 'self'",
+  `script-src ${cspScriptSources.join(' ')}`,
+  "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://www.sortvision.com",
+  "style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://www.sortvision.com",
+  `script-src-elem ${cspScriptSources.join(' ')}`,
+  "font-src 'self' https://fonts.gstatic.com data:",
+  "img-src 'self' data: https: blob:",
+  "media-src 'self' data: blob:",
+  "connect-src 'self' https: data: blob:",
+  "frame-src 'none'",
+  "object-src 'none'",
+  "base-uri 'self'",
+  "form-action 'self'",
+  "frame-ancestors 'none'",
+  "worker-src 'self' blob:",
+].join('; ');
+
 const nextConfig = {
   // Next.js 16 - Use App Router (default)
   // output: 'export', // Removed for SSR/SSG support
@@ -81,7 +112,7 @@ const nextConfig = {
           },
           {
             key: 'Content-Security-Policy',
-            value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://vercel.live https://vitals.vercel-insights.com https://va.vercel-scripts.com https://www.googletagmanager.com https://www.google-analytics.com https://fonts.googleapis.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://www.sortvision.com; style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://www.sortvision.com; script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' https://vercel.live https://vitals.vercel-insights.com https://va.vercel-scripts.com https://www.googletagmanager.com https://www.google-analytics.com https://fonts.googleapis.com https://www.sortvision.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: https: blob:; media-src 'self' data: blob:; connect-src 'self' https: data: blob:; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; worker-src 'self' blob:;",
+            value: contentSecurityPolicy,
           },
         ],
     };

SortVision/package.json

@@ -48,6 +48,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cors": "^2.8.6",
+    "dompurify": "^3.4.1",
     "dotenv": "^17.4.2",
     "ejs": "^5.0.2",
     "filelist": "^2.0.2",

SortVision/pnpm-lock.yaml

@@ -43,8 +43,6 @@ export const metadata = {
     contact: 'https://github.com/alienx5499',
     twitter: '@alienx5499',
     github: 'https://github.com/alienx5499',
-    'Content-Security-Policy':
-      "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://vercel.live https://vitals.vercel-insights.com https://va.vercel-scripts.com https://www.googletagmanager.com https://www.google-analytics.com https://fonts.googleapis.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: https: blob:; media-src 'self' data: blob:; connect-src 'self' https: data: blob:; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; worker-src 'self' blob:;",
   },
   verification: {
     google: 'google12e2679e2ea95334',

SortVision/src/app/layout.jsx

@@ -8,6 +8,7 @@ import {
   CardDescription,
   CardContent,
 } from '@/components/ui/card';
+import { sanitizeChatHtml } from './sanitizeChatHtml';
 
 const ChatModal = ({
   isOpen,
@@ -111,7 +112,9 @@ const ChatModal = ({
                       )}
                       <div
                         className="flex-1"
-                        dangerouslySetInnerHTML={{ __html: msg.content }}
+                        dangerouslySetInnerHTML={{
+                          __html: sanitizeChatHtml(msg.content),
+                        }}
                       />
                     </div>
                   </div>

SortVision/src/components/chatbot/ChatModal.jsx

@@ -0,0 +1,12 @@
+import DOMPurify from 'dompurify';
+
+const SANITIZE_OPTIONS = {
+  ALLOWED_TAGS: ['div', 'p', 'span', 'br', 'b', 'strong', 'i', 'em', 'code'],
+  ALLOWED_ATTR: ['class'],
+  FORBID_TAGS: ['style', 'script', 'iframe', 'object', 'embed'],
+  FORBID_ATTR: ['onerror', 'onclick', 'onload', 'style'],
+};
+
+export function sanitizeChatHtml(content) {
+  return DOMPurify.sanitize(String(content || ''), SANITIZE_OPTIONS);
+}