| name | xss-protection |
| description | Guidelines and workflows for detecting and fixing Cross-Site Scripting (XSS) vulnerabilities in frontend code. Use this skill when auditing frontend components, reviewing PRs with user-generated content, or investigating reported XSS issues. |
XSS Protection Skill
This skill provides a systematic approach to identifying, reproducing, and mitigating XSS vulnerabilities.
Detection Workflow
- Identify Sinks: Search for code locations where strings are interpreted as HTML.
- Grep for:
innerHTML, dangerouslySetInnerHTML, bindPopup, L.divIcon.
- Trace Sources: Determine if the data reaching these sinks comes from an untrusted source (User input, API response, URL params).
- Audit Utils: Check text processing utilities (linkifiers, decoders, formatters) for greedy regex or unsafe DOM APIs.
Mitigation Patterns
- Sanitization: Use
DOMPurify.sanitize() for any HTML string before rendering.
- Escaping: Use
lodash/escape to escape individual variables before template interpolation.
- Safe Decoding: Use
DOMParser or regex for entity decoding to prevent script execution.
- Protocol Whitelisting: Validate URL protocols to only allow
http: and https:.
Pre-Commit Detection
To prevent XSS from entering the repository:
- Linting: Ensure
eslint-plugin-react is configured with react/no-danger.
- SAST: Use static analysis tools (e.g., SonarQube, Snyk, Semgrep) in CI/CD.
- Audit Scripts: Use a local grep-based script to flag dangerous sinks in new changes.
Advanced References
