DOM-based Vulnerabilities

How to Prevent DOM-based Vulnerabilities

1. Use Safe DOM Methods and Properties

Instead of vulnerable methods, use safer alternatives:

• Use textContent instead of innerHTML when adding text content
• Use createElement() and appendChild() instead of document.write()
• Avoid eval(), setTimeout()/setInterval() with string arguments, and new Function()

// Unsafe way
element.innerHTML = userControlledValue;

// Safe way
element.textContent = userControlledValue;

// When HTML is needed:
const sanitizedHTML = DOMPurify.sanitize(userControlledValue);
element.innerHTML = sanitizedHTML;
        

2. Use HTML Sanitization Libraries

When you need to set HTML content, use a sanitization library like DOMPurify:

// Include the library
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script>

// Use it to sanitize HTML before insertion
const userHTML = getParameterFromUrl('content');
const clean = DOMPurify.sanitize(userHTML, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'ol', 'li'],
    ALLOWED_ATTR: ['href', 'target']
});
element.innerHTML = clean;
        

3. Implement Input Validation

Always validate user input on the client side (in addition to server-side validation):

// Validate URL parameters before use
function getValidatedParameter(param, pattern) {
    const value = new URLSearchParams(window.location.search).get(param);
    
    if (!value) return null;
    
    // Check against a whitelist pattern
    if (pattern && !pattern.test(value)) {
        console.error(`Invalid value for parameter ${param}`);
        return null;
    }
    
    return value;
}

// Example usage
const userId = getValidatedParameter('userId', /^[0-9]{1,10}$/);
if (userId) {
    loadUserProfile(userId);
}
        

4. Apply URL Encoding/Decoding Correctly

Use proper URL encoding/decoding functions:

// When adding parameters to URLs
const params = new URLSearchParams();
params.append('search', userInput); // Automatically handles encoding

// Creating a URL with parameters
const url = new URL('/search', window.location.origin);
url.searchParams.append('term', userInput);
history.pushState({}, '', url);

// When extracting URL parameters
const urlParams = new URLSearchParams(window.location.search);
const term = urlParams.get('term'); // Automatically handles decoding
        

5. Implement Content Security Policy (CSP)

Use CSP to restrict script execution and prevent many DOM-based attacks:

// Add this header to your server responses
Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none'
        

6. Secure postMessage Communication

Always validate the origin and message structure:

// Sending messages
targetWindow.postMessage({
    type: 'USER_ACTION',
    action: 'save',
    data: { id: 123, name: 'Example' }
}, 'https://trusted-target.com');

// Receiving messages
window.addEventListener('message', function(event) {
    // Always verify the origin
    if (event.origin !== 'https://trusted-source.com') {
        console.error('Message from untrusted origin:', event.origin);
        return;
    }
    
    // Validate the message structure
    try {
        const data = typeof event.data === 'object' ? event.data : JSON.parse(event.data);
        
        if (!data.type || typeof data.type !== 'string') {
            throw new Error('Invalid message format');
        }
        
        // Process message based on type
        switch (data.type) {
            case 'USER_ACTION':
                handleUserAction(data);
                break;
            // Other cases
            default:
                console.error('Unknown message type');
        }
    } catch (e) {
        console.error('Invalid message:', e);
    }
});
        

7. Use JavaScript Frameworks Securely

Follow security best practices for your framework:

• React: Avoid using dangerouslySetInnerHTML when possible
• Angular: Use the built-in sanitization and avoid bypassSecurityTrustHtml
• Vue: Be careful with v-html directives