Scan Frontend Code for XSS Vulnerabilities

This skill turns Claude into a frontend security specialist that detects and prevents Cross-Site Scripting (XSS) in React, Vue, Angular, and vanilla JavaScript code: scanning for unsafe HTML manipulation (innerHTML, document.write, insertAdjacentHTML), framework-specific risks (dangerouslySetInnerHTML in React, v-html in Vue), URL/protocol injection, and unsanitized event handlers, each mapped to CWE-79 with a severity level and a concrete fix.

Use it when scanning a codebase or reviewing a diff for XSS vulnerability scanning, when you need a checklist or best practices for safe DOM manipulation, or when generating a structured vulnerability report grouped by severity with file/line references and fixes. Skip it for anything outside XSS-specific frontend code review - it is not a general security audit or a backend/API security tool. Detection is heuristic (pattern-plus-context, e.g. flagging innerHTML only when the same line also references props/state/params/query/input/formData), so findings should be treated as leads for review, not a certified scan. Its Output Format also names a Risk Analysis (impact assessment per vulnerability) and a Sanitization Guide (DOMPurify usage patterns) alongside the vulnerability report, fix recommendations, and prevention checklist.

Inputs: a directory or file path of JavaScript/TypeScript/framework source to scan. Outputs: an XSSFinding[] array (file, line, severity, vulnerability type, the vulnerable code snippet, description, fix, and CWE id) and a generated Markdown report grouping findings by severity with counts, plus secure-code replacement patterns for each vulnerability class (e.g. element.textContent = userInput or DOMPurify.sanitize(userInput) in place of raw innerHTML, a URL-constructor-based protocol check for links, and DOMPurify.sanitize(html) wrapped around React's dangerouslySetInnerHTML).

Recommends and can wire up automated tooling alongside its own scanner: eslint-plugin-security (eslint . --plugin security) and Semgrep's XSS ruleset (semgrep --config=p/xss --json). Its own prevention checklist covers HTML manipulation (never innerHTML with user input, prefer textContent, sanitize with DOMPurify, avoid document.write), URL handling (validate protocols, block javascript:/data:), event handlers (use addEventListener over inline handlers, avoid string-to-code patterns), and framework-specific guidance (React sanitize before unsafe APIs, Vue prefer v-text over v-html, Angular rely on built-in sanitization).

npm install --save-dev eslint-plugin-security
semgrep --config=p/xss --json

Frontend developers and security reviewers who need a framework-aware, actionable XSS scan - findings with file/line, severity, and a drop-in secure code fix - rather than a generic linter warning, and who want that layered with dedicated tools like eslint-plugin-security and Semgrep's XSS ruleset for broader static-analysis coverage - a pre-commit or PR-time gate on the specific injection classes (raw HTML, unsanitized URLs, unsafe framework directives) that generic linters don't flag as security issues.