fix(build): resolve CSP nonce conflicts causing blank page on refresh

- Implement shared nonce system across build optimizers
- Fix CSS regex escaping preventing builds
- Disable conflicting Vite CSP plugin in production
- Ensure consistent base64 nonce format across all inline content

Fixes blank page issues from CSP violations due to mismatched nonces.

Author: sayak-sarkar

frontend/package.json

@@ -24,7 +24,7 @@
   "scripts": {
     "dev": "vite",
     "start": "vite",
-    "build": "vite build && cp -r ../docs/* dist/docs/ && cp public/maintenance.html dist/maintenance.html && node scripts/advanced-post-build-optimize.cjs && node scripts/optimize-images.cjs && node scripts/optimize-css.cjs && node scripts/optimize-accessibility.cjs && node scripts/gtmetrix-optimizer.cjs && node scripts/bundle-optimizer.cjs && node ../scripts/fix-css-compatibility.js",
+    "build": "vite build && cp -r ../docs/* dist/docs/ && cp public/maintenance.html dist/maintenance.html && node scripts/optimize-images.cjs && node scripts/optimize-css.cjs && node scripts/optimize-accessibility.cjs && node scripts/gtmetrix-optimizer.cjs && node scripts/advanced-post-build-optimize.cjs && node scripts/bundle-optimizer.cjs && node ../scripts/fix-css-compatibility.js",
     "build:fast": "vite build && cp -r ../docs/* dist/docs/ && cp public/maintenance.html dist/maintenance.html && node scripts/post-build-optimize.cjs",
     "build:analyze": "ANALYZE=true vite build",
     "clean": "rm -rf dist .vite",

frontend/public/_headers

@@ -1,6 +1,5 @@
 # Netlify Headers Configuration - Not YAML format
 /*
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://api.thinkred.tech https://script.google.com https://script.googleusercontent.com; object-src 'none'; media-src 'self'; child-src 'none'; frame-src 'none'; worker-src 'self'; manifest-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self' https://script.google.com
   Cross-Origin-Opener-Policy: same-origin
   Cross-Origin-Embedder-Policy: require-corp
   X-Content-Type-Options: nosniff

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

@@ -9,7 +9,7 @@
 
 const fs = require('fs');
 const path = require('path');
-const crypto = require('crypto');
+const { getOrCreateNonce } = require('./nonce-generator.cjs');
 
 const distDir = path.join(__dirname, '..', 'dist');
 const indexPath = path.join(distDir, 'index.html');
@@ -18,8 +18,8 @@ const assetsDir = path.join(distDir, 'assets');
 console.log('🚀 Starting Advanced Performance Optimization...');
 
 try {
-  // Generate unique nonce for CSP
-  const nonce = crypto.randomBytes(16).toString('base64');
+  // Use shared nonce generator
+  const nonce = getOrCreateNonce();
 
   // Read the index.html file
   let html = fs.readFileSync(indexPath, 'utf8');
@@ -248,16 +248,16 @@ try {
   // 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, '');
+  // Remove any existing CSP headers to prevent conflicts - more comprehensive patterns
+  html = html.replace(/<meta[^>]*http-equiv=["']?Content-Security-Policy["']?[^>]*>/gi, '');
+  html = html.replace(/<meta[^>]*content=["'][^"']*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=(), fullscreen=(self)">
   `;
 
   // 6. SERVICE WORKER REGISTRATION
@@ -278,6 +278,9 @@ try {
   // Remove existing critical CSS and replace with optimized version
   html = html.replace(/<style[^>]*>[\s\S]*?<\/style>/g, '');
 
+  // Replace nonce placeholders with actual nonce
+  html = html.replace(/__CSP_NONCE__/g, nonce);
+  
   // Find the head tag and insert optimized content
   const headEndIndex = html.indexOf('</head>');
   if (headEndIndex !== -1) {

frontend/scripts/gtmetrix-optimizer.cjs

@@ -20,6 +20,7 @@
 
 const fs = require('fs');
 const path = require('path');
+const { getOrCreateNonce } = require('./nonce-generator.cjs');
 
 const distDir = path.join(process.cwd(), 'dist');
 const assetsDir = path.join(distDir, 'assets');
@@ -220,9 +221,12 @@ function deferOffscreenImages() {
 
   let html = fs.readFileSync(indexPath, 'utf8');
 
+  // Get shared nonce for script tag
+  const nonce = getOrCreateNonce();
+  
   // Add intersection observer for images
   const lazyLoadScript = `
-<script>
+<script nonce="${nonce}">
 (function() {
   'use strict';
   
@@ -392,10 +396,18 @@ function additionalOptimizations() {
     @media(max-width:768px){.text-4xl{font-size:1.875rem}.text-xl{font-size:1.125rem}}
   </style>`;
 
-  // Insert critical CSS in head
-  const firstLinkIndex = html.indexOf('<link');
-  if (firstLinkIndex !== -1) {
-    html = html.slice(0, firstLinkIndex) + criticalCSS + '\n  ' + html.slice(firstLinkIndex);
+  // Insert critical CSS after the last meta tag but before the first link/style/script
+  const lastMetaIndex = html.lastIndexOf('</meta>') !== -1 ? html.lastIndexOf('</meta>') : html.lastIndexOf('<meta');
+  if (lastMetaIndex !== -1) {
+    // Find the end of the last meta tag
+    const insertIndex = html.indexOf('>', lastMetaIndex) + 1;
+    html = html.slice(0, insertIndex) + criticalCSS + '\n  ' + html.slice(insertIndex);
+  } else {
+    // Fallback: insert before first link
+    const firstLinkIndex = html.indexOf('<link');
+    if (firstLinkIndex !== -1) {
+      html = html.slice(0, firstLinkIndex) + criticalCSS + '\n  ' + html.slice(firstLinkIndex);
+    }
   }
 
   fs.writeFileSync(indexPath, html);

frontend/scripts/nonce-generator.cjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+
+/**
+ * Shared nonce generator for build optimization scripts
+ * Ensures consistent nonce across all optimizers
+ */
+
+const crypto = require('crypto');
+const fs = require('fs');
+const path = require('path');
+
+const NONCE_FILE = path.join(__dirname, '..', 'dist', '.build-nonce');
+
+/**
+ * Generate or retrieve existing nonce for this build
+ * @returns {string} Base64 encoded nonce
+ */
+function getOrCreateNonce() {
+  // Check if nonce already exists for this build
+  if (fs.existsSync(NONCE_FILE)) {
+    try {
+      const existingNonce = fs.readFileSync(NONCE_FILE, 'utf8').trim();
+      if (existingNonce && existingNonce.length > 0) {
+        return existingNonce;
+      }
+    } catch (error) {
+      // If we can't read the existing nonce, generate a new one
+    }
+  }
+  
+  // Generate new nonce
+  const nonce = crypto.randomBytes(16).toString('base64');
+  
+  // Store nonce for other scripts to use
+  try {
+    fs.writeFileSync(NONCE_FILE, nonce, 'utf8');
+  } catch (error) {
+    console.warn('Warning: Could not save nonce to file:', error.message);
+  }
+  
+  return nonce;
+}
+
+/**
+ * Clean up nonce file after build
+ */
+function cleanupNonce() {
+  try {
+    if (fs.existsSync(NONCE_FILE)) {
+      fs.unlinkSync(NONCE_FILE);
+    }
+  } catch (error) {
+    // Ignore cleanup errors
+  }
+}
+
+module.exports = {
+  getOrCreateNonce,
+  cleanupNonce
+};
+
+// If called directly, output the nonce
+if (require.main === module) {
+  console.log(getOrCreateNonce());
+}

frontend/scripts/optimize-css.cjs

@@ -71,7 +71,14 @@ function isCriticalSelector(selector) {
     if (critical.endsWith('-')) {
       return selector.includes(critical);
     }
-    return selector.includes(critical) || selector.match(new RegExp(critical.replace(/\\/g, '')));
+    try {
+      // Escape special regex characters to prevent invalid regex errors
+      const escapedCritical = critical.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      return selector.includes(critical) || selector.match(new RegExp(escapedCritical));
+    } catch {
+      // Fallback to simple string match if regex fails
+      return selector.includes(critical);
+    }
   });
 }
 

frontend/vite.config.ts

@@ -20,8 +20,9 @@ export default defineConfig({
       }
     }),
     // CSP Plugin for secure Content Security Policy - Addresses GitHub Issue #45
+    // Note: Disabled during build - post-build optimizers handle CSP nonces
     createCSPPlugin({
-      enabled: true,
+      enabled: process.env.NODE_ENV !== "production",
       development: process.env.NODE_ENV !== "production",
     }),
   ],