Real-time CSP Monitoring

Real-time CSP Monitoring

Implementing real-time monitoring helps catch CSP issues before they impact users:

// Real-time CSP Monitor
class CSPMonitor {
  constructor(config) {
    this.config = config;
    this.metrics = {
      violations: [],
      performance: [],
      availability: []
    };
    this.alerts = [];
  }
  
  startMonitoring() {
    // Client-side monitoring script
    const monitoringScript = `
      (function() {
        const monitor = {
          violations: [],
          startTime: performance.now(),
          
          init() {
            this.setupViolationListener();
            this.measurePerformance();
            this.sendMetrics();
          },
          
          setupViolationListener() {
            document.addEventListener('securitypolicyviolation', (e) => {
              this.violations.push({
                type: e.violatedDirective,
                blocked: e.blockedURI,
                source: e.sourceFile,
                line: e.lineNumber,
                time: Date.now()
              });
              
              // Send immediate alert for critical violations
              if (this.isCriticalViolation(e)) {
                this.sendAlert(e);
              }
            });
          },
          
          isCriticalViolation(event) {
            return event.violatedDirective.includes('script-src') ||
                   event.blockedURI.includes('eval');
          },
          
          measurePerformance() {
            // Measure CSP processing overhead
            const observer = new PerformanceObserver((list) => {
              for (const entry of list.getEntries()) {
                if (entry.name.includes('csp')) {
                  this.recordPerformance(entry);
                }
              }
            });
            
            observer.observe({ entryTypes: ['measure', 'navigation'] });
          },
          
          sendMetrics() {
            setInterval(() => {
              if (this.violations.length > 0) {
                fetch('/api/csp-metrics', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({
                    violations: this.violations,
                    performance: this.performanceMetrics,
                    timestamp: Date.now()
                  })
                });
                this.violations = [];
              }
            }, 30000); // Send every 30 seconds
          }
        };
        
        monitor.init();
      })();
    `;
    
    return monitoringScript;
  }
  
  analyzeMetrics() {
    const analysis = {
      violationRate: this.calculateViolationRate(),
      topViolations: this.getTopViolations(),
      performanceImpact: this.measurePerformanceImpact(),
      securityScore: this.calculateSecurityScore()
    };
    
    // Check thresholds and generate alerts
    if (analysis.violationRate > this.config.thresholds.violationRate) {
      this.generateAlert('High violation rate detected', 'critical');
    }
    
    return analysis;
  }
  
  calculateViolationRate() {
    const recentViolations = this.metrics.violations.filter(
      v => v.timestamp > Date.now() - 3600000 // Last hour
    );
    
    return recentViolations.length / 60; // Violations per minute
  }
  
  getTopViolations() {
    const violationCounts = {};
    
    this.metrics.violations.forEach(v => {
      const key = `${v.type}:${v.blocked}`;
      violationCounts[key] = (violationCounts[key] || 0) + 1;
    });
    
    return Object.entries(violationCounts)
      .sort(([,a], [,b]) => b - a)
      .slice(0, 10)
      .map(([violation, count]) => ({ violation, count }));
  }
}