Security Review

// VULNERABLE: innerHTML with user data
element.innerHTML = userInput;

// SAFE: Use textContent
element.textContent = userInput;

// SAFE: Use createTextNode
document.createTextNode(userInput);

<!-- VULNERABLE: Unquoted attribute -->
<input value=${userInput}>

<!-- VULNERABLE: Event handler with user data -->
<button onclick="doSomething('${userInput}')">

<!-- SAFE: Quoted attribute with encoding -->
<input value="${htmlEncode(userInput)}">

// VULNERABLE: eval with user input
eval(userInput);

// VULNERABLE: setTimeout with string
setTimeout("doSomething('" + userInput + "')", 1000);

// VULNERABLE: Function constructor
new Function("return " + userInput)();

// SAFE: JSON encoding for data
const data = JSON.parse(jsonString);

// SAFE: setTimeout with function
setTimeout(() => doSomething(userInput), 1000);

// VULNERABLE: User input in href
element.href = userInput;

// VULNERABLE: javascript: URL scheme
<a href="javascript:${userInput}">

// SAFE: Validate URL scheme
const url = new URL(userInput);
if (url.protocol === 'https:' || url.protocol === 'http:') {
    element.href = url.toString();
}

// SAFE: Encode URL parameters
const encoded = encodeURIComponent(userInput);

/* VULNERABLE: User input in style */
.element { background: url(${userInput}); }

/* VULNERABLE: Expression in CSS */
.element { behavior: expression(${userInput}); }

elem.textContent = variable;
elem.insertAdjacentText('beforeend', variable);
elem.className = variable;  // for class names
elem.setAttribute('data-value', variable);
formField.value = variable;
document.createTextNode(variable);

elem.innerHTML = variable;        // XSS
elem.outerHTML = variable;        // XSS
document.write(variable);         // XSS
document.writeln(variable);       // XSS
eval(variable);                   // Code execution
setTimeout(variable);             // If string argument
setInterval(variable);            // If string argument
new Function(variable);           // Code execution
elem.insertAdjacentHTML();        // XSS
elem.onevent = variable;          // Event handler

// SAFE: Auto-escaped by default
<div>{userInput}</div>

// VULNERABLE: dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{__html: userInput}} />

// SAFE: Sanitize before using dangerouslySetInnerHTML
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(userInput)}} />

// SAFE: Auto-escaped by default
<div>{{ userInput }}</div>

// VULNERABLE: bypassSecurityTrust*
this.sanitizer.bypassSecurityTrustHtml(userInput);

// Use bypassSecurityTrust* only with sanitized input

<!-- SAFE: Auto-escaped -->
<div>{{ userInput }}</div>

<!-- VULNERABLE: v-html directive -->
<div v-html="userInput"></div>

<!-- SAFE: Sanitize first -->
<div v-html="sanitizedInput"></div>

<!-- SAFE: Auto-escaped by default -->
{{ user_input }}

<!-- VULNERABLE: |safe filter -->
{{ user_input|safe }}

<!-- VULNERABLE: {% autoescape off %} -->
{% autoescape off %}
    {{ user_input }}
{% endautoescape %}

// Recommended: DOMPurify
import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(dirty);

// With configuration
const clean = DOMPurify.sanitize(dirty, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
    ALLOWED_ATTR: ['href']
});

Content-Security-Policy:
    default-src 'self';
    script-src 'nonce-{RANDOM}' 'strict-dynamic';
    object-src 'none';
    base-uri 'none';

<!-- Server generates unique nonce per request -->
<script nonce="r4nd0m123">
    // Allowed script
</script>

<script>
    // Blocked - no nonce
</script>

Content-Security-Policy: script-src 'sha256-base64hash...'

// Attacker-controllable sources
location.hash
location.search
document.referrer
window.name
postMessage data

// VULNERABLE: Direct use of source in sink
element.innerHTML = location.hash.slice(1);

// SAFE: Validate and encode
const hash = location.hash.slice(1);
if (/^[a-zA-Z0-9-]+$/.test(hash)) {
    element.textContent = hash;
}

# Dangerous DOM sinks
grep -rn "innerHTML\|outerHTML\|document\.write" --include="*.js" --include="*.jsx"
grep -rn "dangerouslySetInnerHTML" --include="*.jsx" --include="*.tsx"
grep -rn "v-html" --include="*.vue"
grep -rn "\|safe\|autoescape off" --include="*.html" --include="*.jinja"

# Dangerous JavaScript
grep -rn "eval(\|Function(\|setTimeout.*string\|setInterval.*string" --include="*.js"

# Framework bypasses
grep -rn "bypassSecurityTrust" --include="*.ts"
grep -rn "mark_safe\|SafeString" --include="*.py"

<script>alert('XSS')</script>
<img src=x onerror=alert('XSS')>
<svg onload=alert('XSS')>

" onmouseover="alert('XSS')
' onclick='alert("XSS")

';alert('XSS')//
\';alert(\'XSS\')//
</script><script>alert('XSS')</script>