Browser Performance Optimization

Browser Performance Optimization

Different browsers handle CSP differently, requiring targeted optimization strategies:

// Browser-Specific CSP Optimizer
class BrowserCSPOptimizer {
  constructor() {
    this.browserProfiles = this.loadBrowserProfiles();
  }
  
  loadBrowserProfiles() {
    return {
      chrome: {
        name: 'Chrome/Edge',
        version: '90+',
        features: {
          strictDynamic: true,
          trustedTypes: true,
          reportTo: true,
          prefetch: true
        },
        optimizations: [
          'Use strict-dynamic for better performance',
          'Leverage Trusted Types for DOM XSS protection',
          'Use Report-To API instead of report-uri'
        ]
      },
      firefox: {
        name: 'Firefox',
        version: '88+',
        features: {
          strictDynamic: true,
          trustedTypes: false,
          reportTo: false,
          prefetch: true
        },
        optimizations: [
          'Avoid report-to directive',
          'Use prefetch-src for resource hints',
          'Minimize directive count'
        ]
      },
      safari: {
        name: 'Safari',
        version: '14+',
        features: {
          strictDynamic: false,
          trustedTypes: false,
          reportTo: false,
          prefetch: false
        },
        optimizations: [
          'Use explicit source lists instead of strict-dynamic',
          'Minimize policy complexity',
          'Test thoroughly on iOS devices'
        ]
      }
    };
  }
  
  optimizePolicyForBrowser(policy, userAgent) {
    const browser = this.detectBrowser(userAgent);
    const profile = this.browserProfiles[browser];
    
    if (!profile) {
      return policy; // Return unmodified for unknown browsers
    }
    
    let optimizedPolicy = { ...policy };
    
    // Apply browser-specific optimizations
    if (!profile.features.strictDynamic && policy['script-src']?.includes("'strict-dynamic'")) {
      // Replace strict-dynamic with explicit sources for Safari
      optimizedPolicy['script-src'] = this.expandStrictDynamic(policy['script-src']);
    }
    
    if (!profile.features.reportTo && policy['report-to']) {
      // Fallback to report-uri for browsers without Report-To support
      optimizedPolicy['report-uri'] = ['/csp-reports'];
      delete optimizedPolicy['report-to'];
    }
    
    return optimizedPolicy;
  }
  
  implementAdaptiveCSP() {
    return `
      // Adaptive CSP middleware
      class AdaptiveCSP {
        constructor() {
          this.policyCache = new Map();
          this.performanceData = new Map();
        }
        
        middleware() {
          return (req, res, next) => {
            const userAgent = req.headers['user-agent'];
            const connection = req.headers['connection'];
            const saveData = req.headers['save-data'] === 'on';
            
            // Generate cache key
            const cacheKey = this.getCacheKey(userAgent, connection, saveData);
            
            // Check cache
            let policy = this.policyCache.get(cacheKey);
            
            if (!policy) {
              // Generate optimized policy
              policy = this.generateOptimizedPolicy({
                userAgent,
                connection,
                saveData,
                performance: this.performanceData.get(userAgent)
              });
              
              this.policyCache.set(cacheKey, policy);
            }
            
            res.setHeader('Content-Security-Policy', policy);
            next();
          };
        }
        
        generateOptimizedPolicy(context) {
          let policy = this.basePolicy;
          
          // Optimize for slow connections
          if (context.saveData || context.connection === '3g') {
            policy = this.minimizePolicy(policy);
          }
          
          // Optimize for specific browsers
          if (context.userAgent.includes('Safari') && !context.userAgent.includes('Chrome')) {
            policy = this.optimizeForSafari(policy);
          }
          
          // Apply performance-based optimizations
          if (context.performance?.avgParseTime > 10) {
            policy = this.simplifyPolicy(policy);
          }
          
          return policy;
        }
        
        minimizePolicy(policy) {
          // Remove non-essential directives for slow connections
          const essential = [
            'default-src',
            'script-src',
            'style-src',
            'img-src'
          ];
          
          const minimized = {};
          essential.forEach(directive => {
            if (policy[directive]) {
              minimized[directive] = policy[directive];
            }
          });
          
          return this.formatPolicy(minimized);
        }
      }
    `;
  }
}