Security Header Reporting Dashboard

// Simple security headers dashboard
class SecurityHeadersDashboard {
    constructor() {
        this.data = {
            endpoints: new Map(),
            history: [],
            alerts: []
        };
    }
    
    generateHTML() {
        return `
<!DOCTYPE html>
<html>
<head>
    <title>Security Headers Dashboard</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .endpoint { border: 1px solid #ddd; padding: 10px; margin: 10px 0; }
        .score { font-size: 24px; font-weight: bold; }
        .score.good { color: green; }
        .score.warning { color: orange; }
        .score.bad { color: red; }
        .header { margin: 5px 0; }
        .header.missing { color: red; }
        .header.present { color: green; }
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        .alert { background: #ffe6e6; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <h1>Security Headers Dashboard</h1>
    <div id="last-updated">Last Updated: ${new Date().toLocaleString()}</div>
    
    <h2>Active Alerts</h2>
    <div id="alerts">
        ${this.renderAlerts()}
    </div>
    
    <h2>Endpoint Status</h2>
    <div id="endpoints">
        ${this.renderEndpoints()}
    </div>
    
    <h2>Security Headers Matrix</h2>
    ${this.renderMatrix()}
    
    <script>
        // Auto-refresh every 60 seconds
        setTimeout(() => location.reload(), 60000);
    </script>
</body>
</html>
        `;
    }
    
    renderAlerts() {
        if (this.data.alerts.length === 0) {
            return '<p>No active alerts</p>';
        }
        
        return this.data.alerts.map(alert => `
            <div class="alert">
                <strong>${alert.type}:</strong> ${alert.message}
                <br><small>${alert.timestamp}</small>
            </div>
        `).join('');
    }
    
    renderEndpoints() {
        const endpoints = Array.from(this.data.endpoints.entries());
        
        return endpoints.map(([url, data]) => {
            const scoreClass = data.score >= 85 ? 'good' : 
                               data.score >= 70 ? 'warning' : 'bad';
            
            return `
                <div class="endpoint">
                    <h3>${url}</h3>
                    <div class="score ${scoreClass}">Score: ${data.score}/100</div>
                    <div class="headers">
                        ${this.renderHeaders(data.headers)}
                    </div>
                </div>
            `;
        }).join('');
    }
    
    renderHeaders(headers) {
        const requiredHeaders = [
            'content-security-policy',
            'x-content-type-options',
            'x-frame-options',
            'strict-transport-security',
            'referrer-policy',
            'permissions-policy'
        ];
        
        return requiredHeaders.map(header => {
            const present = headers[header];
            const className = present ? 'present' : 'missing';
            const value = present ? headers[header] : 'Not Set';
            
            return `
                <div class="header ${className}">
                    <strong>${header}:</strong> ${value}
                </div>
            `;
        }).join('');
    }
}

Testing and monitoring security headers requires a multi-faceted approach combining manual verification, automated testing, continuous monitoring, and integration with development workflows. By implementing comprehensive testing strategies and maintaining vigilant monitoring, organizations can ensure their security headers provide consistent protection against evolving threats. Remember that security is an ongoing process – regular testing and monitoring are essential for maintaining a strong security posture.## Security Headers Best Practices and Common Mistakes

Implementing security headers effectively requires more than technical knowledge—it demands understanding common pitfalls, following established best practices, and maintaining a security-first mindset throughout the development lifecycle. This chapter consolidates real-world experience and lessons learned from security header implementations across various industries, providing actionable guidance to avoid mistakes that could compromise your security posture.