client-side-security

Client-Side Web Security

Protect browser clients against code injection, request forgery, UI redress, cross-site leaks, and unsafe third-party scripts with layered, context-aware controls.

XSS Prevention (Context-Aware)

• HTML context: prefer textContent. If HTML is required, sanitize with a vetted library (e.g., DOMPurify) and strict allow-lists.
• Attribute context: always quote attributes and encode values.
• JavaScript context: do not build JS from untrusted strings; avoid inline event handlers; use addEventListener.
• URL context: validate protocol/domain and encode; block javascript: and data URLs where inappropriate.
• Redirects/forwards: never use user input directly for destinations; use server-side mapping (ID to URL) or validate against trusted domain allow-lists.
• CSS context: allow-list values; never inject raw style text from users.

Example sanitization:

const clean = DOMPurify.sanitize(userHtml, {
  ALLOWED_TAGS: ['b','i','p','a','ul','li'],
  ALLOWED_ATTR: ['href','target','rel'],
  ALLOW_DATA_ATTR: false
});

DOM-based XSS and Dangerous Sinks

• Prohibit innerHTML, outerHTML, document.write with untrusted data.
• Prohibit eval, new Function, string-based setTimeout/setInterval.
• Validate and encode data before assigning to location or event handler properties.
• Use strict mode and explicit variable declarations to prevent global namespace pollution from DOM clobbering.
• Adopt Trusted Types and enforce strict CSP to prevent DOM sink exploitation.

Trusted Types + CSP:

Content-Security-Policy: script-src 'self' 'nonce-{random}'; object-src 'none'; base-uri 'self'; require-trusted-types-for 'script'

Content Security Policy (CSP)

• Prefer nonce-based or hash-based CSP over domain allow-lists.
• Start with Report-Only mode; collect violations; then enforce.
• Baseline to aim for: default-src 'self'; style-src 'self' 'unsafe-inline'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; base-uri 'none'; upgrade-insecure-requests.