feat(perf): enhance CSP handling and nonce management for improved security and performance

Author: sayak-sarkar

frontend/scripts/advanced-post-build-optimize.cjs

@@ -245,17 +245,20 @@ try {
     <link rel="preload" href="/assets/logos/thinkRED-np.svg" as="image" fetchpriority="high">
     <link rel="preload" href="/assets/avatars/assistant-red.webp" as="image">`;
 
-  // 4. ENHANCED CSP WITH NONCE
-  const cspMeta = `
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-${nonce}' https://script.google.com https://script.googleusercontent.com; style-src 'self' 'nonce-${nonce}' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://script.google.com https://script.googleusercontent.com; frame-src 'self' https://script.google.com; object-src 'none'; base-uri 'self'; form-action 'self';">`;
+  // 4. ENHANCED CSP WITH NONCE - Replace existing CSP if present
+  const cspMeta = `<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-${nonce}' https://script.google.com https://script.googleusercontent.com; style-src 'self' 'nonce-${nonce}' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://script.google.com https://script.googleusercontent.com; frame-src 'self' https://script.google.com; object-src 'none'; base-uri 'self'; form-action 'self';">`;
+
+  // Remove any existing CSP headers to prevent conflicts
+  html = html.replace(/<meta[^>]*Content-Security-Policy[^>]*>/gi, '');
 
   // 5. ADDITIONAL SECURITY AND PERFORMANCE HEADERS
   const securityMeta = `
     <meta http-equiv="X-Content-Type-Options" content="nosniff">
     <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
     <meta http-equiv="X-XSS-Protection" content="1; mode=block">
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
-    <meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=(), payment=()">`;
+    <meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=(), payment=()">
+  `;
 
   // 6. SERVICE WORKER REGISTRATION
   const serviceWorkerScript = `
@@ -291,9 +294,17 @@ try {
     '<script$1 fetchpriority="high">'
   );
 
-  // Add nonce to inline scripts and styles
-  html = html.replace(/<script(?![^>]*src)([^>]*)>/g, `<script$1 nonce="${nonce}">`);
-  html = html.replace(/<style([^>]*)>/g, `<style$1 nonce="${nonce}">`);
+  // Add nonce to inline scripts and styles that don't already have one
+  // More robust regex to prevent duplicate nonces
+  html = html.replace(/<script(?![^>]*nonce=)(?![^>]*src)([^>]*)>/g, `<script$1 nonce="${nonce}">`);
+  html = html.replace(/<style(?![^>]*nonce=)([^>]*)>/g, `<style$1 nonce="${nonce}">`);
+  
+  // Add nonce to stylesheet links that don't already have one
+  html = html.replace(/<link([^>]*rel="stylesheet"[^>]*?)(?![^>]*nonce=)>/g, `<link$1 nonce="${nonce}">`);
+  
+  // Remove any duplicate nonce attributes that might have been created
+  html = html.replace(/nonce="[^"]*"\s+nonce="[^"]*"/g, `nonce="${nonce}"`);
+  html = html.replace(/nonce="[^"]*"\s+([^>]*)\s+nonce="[^"]*"/g, `nonce="${nonce}" $1`);
 
   // 9. LAZY LOADING OPTIMIZATION
   // Add loading="lazy" to images that are not critical

frontend/scripts/optimize-accessibility.cjs

@@ -279,9 +279,14 @@ function addReducedMotionSupport(html) {
 }
 
 function enhanceColorContrast(html) {
+  // Extract existing nonce from any style tag if present
+  const nonceMatch = html.match(/nonce="([^"]+)"/);
+  const nonce = nonceMatch ? nonceMatch[1] : '';
+  const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
+  
   // Enhanced contrast styles
   const contrastCSS = `
-    <style>
+    <style${nonceAttr}>
       /* Enhanced contrast for accessibility */
       .text-gray-600 { color: #374151 !important; } /* 7.02:1 contrast ratio */
       .text-gray-700 { color: #1f2937 !important; } /* 12.63:1 contrast ratio */
@@ -350,8 +355,13 @@ function addSemanticImprovements(html) {
 }
 
 function addKeyboardNavigation(html) {
+  // Extract existing nonce from any script tag if present
+  const nonceMatch = html.match(/nonce="([^"]+)"/);
+  const nonce = nonceMatch ? nonceMatch[1] : '';
+  const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
+  
   const keyboardScript = `
-    <script>
+    <script${nonceAttr}>
       // Enhanced keyboard navigation
       (function() {
         // Add keyboard support for custom interactive elements

frontend/scripts/optimize-css.cjs

@@ -228,10 +228,13 @@ img{max-width:100%;height:auto}
     let html = fs.readFileSync(indexPath, 'utf8');
 
     // Find and replace or insert critical CSS
-    const criticalCSSRegex = /<!-- Critical above-the-fold CSS[^>]*-->\s*<style[^>]*>[\s\S]*?<\/style>/;
+    const criticalCSSRegex = /<!-- Critical above-the-fold CSS[^>]*-->\s*<style([^>]*)>[\s\S]*?<\/style>/;
 
     if (criticalCSSRegex.test(html)) {
-      html = html.replace(criticalCSSRegex, `<!-- Critical above-the-fold CSS --><style>${criticalCSS}</style>`);
+      // Preserve the style tag attributes (including nonce)
+      html = html.replace(criticalCSSRegex, (match, styleAttrs) => {
+        return `<!-- Critical above-the-fold CSS --><style${styleAttrs}>${criticalCSS}</style>`;
+      });
     } else {
       // Insert before closing head tag
       html = html.replace('</head>', `<style>${criticalCSS}</style>\n</head>`);