security Best Practices

// XSS prevention utilities
class XSSProtection {
    static sanitizeHTML(input) {
        const div = document.createElement('div');
        div.textContent = input;
        return div.innerHTML;
    }
    
    static escapeHTML(input) {
        return input
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#x27;');
    }
    
    static validateInput(input, type) {
        const patterns = {
            email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            phone: /^\+?[1-9]\d{1,14}$/,
            alphanumeric: /^[a-zA-Z0-9]+$/,
            url: /^https?:\/\/.+/
        };
        
        return patterns[type] ? patterns[type].test(input) : false;
    }
}

// CSRF token management
class CSRFProtection {
    static generateToken() {
        const array = new Uint8Array(32);
        crypto.getRandomValues(array);
        return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
    }
    
    static setToken() {
        const token = this.generateToken();
        sessionStorage.setItem('csrf_token', token);
        return token;
    }
    
    static validateToken(token) {
        const storedToken = sessionStorage.getItem('csrf_token');
        return token === storedToken;
    }
    
    static addToForm(form) {
        const token = this.setToken();
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'csrf_token';
        input.value = token;
        form.appendChild(input);
    }
}

// CSP implementation
const cspConfig = {
    'default-src': ["'self'"],
    'script-src': ["'self'", "'unsafe-inline'"],
    'style-src': ["'self'", "'unsafe-inline'"],
    'img-src': ["'self'", "data:", "https:"],
    'connect-src': ["'self'"],
    'font-src': ["'self'"],
    'object-src': ["'none'"],
    'media-src': ["'self'"],
    'frame-src': ["'none'"]
};

// Set CSP header
function setCSP() {
    const csp = Object.entries(cspConfig)
        .map(([key, value]) => `${key} ${value.join(' ')}`)
        .join('; ');
    
    document.querySelector('meta[http-equiv="Content-security-Policy"]')
        ?.setAttribute('content', csp);
}

// Secure API client
class SecureAPIClient {
    constructor(baseURL, apiKey) {
        this.baseURL = baseURL;
        this.apiKey = apiKey;
    }
    
    async request(endpoint, options = {}) {
        const url = new URL(endpoint, this.baseURL);
        
        const config = {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${this.apiKey}`,
                'X-Requested-With': 'XMLHttpRequest'
            },
            ...options
        };
        
        // Add CSRF token if available
        const csrfToken = sessionStorage.getItem('csrf_token');
        if (csrfToken) {
            config.headers['X-CSRF-Token'] = csrfToken;
        }
        
        try {
            const response = await fetch(url, config);
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            return await response.json();
        } catch (error) {
            console.error('API request failed:', error);
            throw error;
        }
    }
}

// security vulnerability scanner
class SecurityScanner {
    static scanDOM() {
        const vulnerabilities = [];
        
        // Check for inline scripts
        const inlineScripts = document.querySelectorAll('script:not([src])');
        if (inlineScripts.length > 0) {
            vulnerabilities.push({
                type: 'XSS',
                severity: 'high',
                message: 'Inline scripts detected',
                elements: Array.from(inlineScripts)
            });
        }
        
        // Check for eval usage
        const scripts = document.querySelectorAll('script[src]');
        scripts.forEach(script => {
            fetch(script.src)
                .then(response => response.text())
                .then(code => {
                    if (code.includes('eval(')) {
                        vulnerabilities.push({
                            type: 'Code Injection',
                            severity: 'critical',
                            message: 'eval() usage detected',
                            file: script.src
                        });
                    }
                });
        });
        
        return vulnerabilities;
    }
    
    static checkHTTPS() {
        if (location.protocol !== 'https:') {
            return {
                type: 'security',
                severity: 'high',
                message: 'Site not served over HTTPS'
            };
        }
        return null;
    }
    
    static validateHeaders() {
        const issues = [];
        
        // Check for security headers
        const requiredHeaders = [
            'X-Content-Type-Options',
            'X-Frame-Options',
            'X-XSS-Protection'
        ];
        
        // Note: This would need to be implemented server-side
        // or through a security scanning service
        
        return issues;
    }
    
    static generateReport() {
        const vulnerabilities = this.scanDOM();
        const httpsIssue = this.checkHTTPS();
        const headerIssues = this.validateHeaders();
        
        return {
            timestamp: new Date().toISOString(),
            vulnerabilities: [
                ...vulnerabilities,
                ...(httpsIssue ? [httpsIssue] : []),
                ...headerIssues
            ],
            summary: {
                total: vulnerabilities.length + (httpsIssue ? 1 : 0) + headerIssues.length,
                critical: vulnerabilities.filter(v => v.severity === 'critical').length,
                high: vulnerabilities.filter(v => v.severity === 'high').length,
                medium: vulnerabilities.filter(v => v.severity === 'medium').length
            }
        };
    }
}