← ClaudeAtlas

client-side-securitylisted

Apply when reviewing or writing browser-facing code that handles user input, renders HTML, sets cookies, or loads third-party scripts. Covers XSS, CSRF, CSP, clickjacking, XS-Leaks, and HTTP security headers.
backspace-shmackspace/claude-devkit · ★ 15 · Code & Development · score 79
Install: claude install-skill backspace-shmackspace/claude-devkit
# 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: ```javascript 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 Tru