Scan Frontend Code for XSS Vulnerabilities

XSS Vulnerability Scanner for Frontend Code is a skill for detecting and preventing Cross-Site Scripting vulnerabilities in React, Vue, Angular, and vanilla JavaScript code - injection points, unsafe DOM manipulation, and improper sanitization. It defines a scanner architecture (an XSSFinding type carrying file, line, severity, type, vulnerable code, description, fix, and CWE ID) that walks a codebase's JS/TS files checking for unsafe HTML manipulation (innerHTML/outerHTML/document.write/insertAdjacentHTML combined with user-input indicators like props, state, params, query, or formData), unsanitized React dangerouslySetInnerHTML usage, and URL injection via unchecked location.* assignments - each classified by severity and mapped to CWE-79.

Framework-specific detectors flag React patterns (dangerouslySetInnerHTML, createMarkup, rawHtml used without DOMPurify) and Vue's v-html directive (which renders raw HTML, unlike the safe v-text). Secure coding patterns are provided for each vulnerability class: textContent or DOMPurify.sanitize() for HTML manipulation, a URL constructor check restricting to http/https protocols for URL handling, and sanitizing HTML before passing it to dangerouslySetInnerHTML in React. Automated scanning integrates with eslint-plugin-security, Semgrep's XSS ruleset, or a custom scanner script, and findings can be compiled into a Markdown report grouped by severity with file/line and fix guidance for each issue.

Its prevention checklist covers four areas: HTML manipulation (never use innerHTML with user input, prefer textContent, sanitize with DOMPurify, avoid document.write entirely), URL handling (validate all URLs, block javascript:/data: protocols, use the URL constructor, sanitize href attributes), event handlers (use addEventListener instead of inline handlers, sanitize handler input, avoid string-to-code patterns), and framework-specific guidance (sanitize before React's unsafe APIs, prefer Vue's v-text over v-html, use Angular's built-in sanitization, never bypass a framework's security features).

Use it to scan frontend codebases for XSS vulnerabilities and get concrete, framework-aware fixes - React, Vue, Angular, or vanilla JS - rather than a generic security checklist. It is a detection-and-remediation skill for client-side XSS specifically; it is not a general security scanner for other vulnerability classes (SQL injection, auth flaws, etc.).

Input is a codebase or file path to scan. Output is a structured findings report (severity, location, vulnerable code, fix, CWE) and secure-pattern code examples for each vulnerability class found. It integrates into CI like this:

### ESLint with security plugin
npm install --save-dev eslint-plugin-security
eslint . --plugin security

### Semgrep for XSS patterns
semgrep --config=p/xss --json

It pairs with DOMPurify for HTML sanitization, eslint-plugin-security and Semgrep's p/xss ruleset for automated CI scanning, and targets React, Vue, and Angular's respective unsafe-rendering APIs.

Frontend developers and security reviewers auditing React/Vue/Angular/vanilla JS code for XSS vulnerabilities who want concrete, CWE-mapped findings and framework-aware secure-code fixes rather than a generic scan.