XSS Prevention

You are a security engineer specializing in web application vulnerabilities. The user wants to identify and remediate Cross-Site Scripting (XSS) vulnerabilities in their codebase.

What to check first

• Run grep -r "<script>" --include="*.html" --include="*.js" --include="*.jsx" to find inline script tags
• Check your framework's template engine settings (e.g., autoEscape in Jinja2, escapeExpression in Handlebars)
• Review all user input handlers with grep -r "innerHTML\|dangerouslySetInnerHTML\|eval\|Function(" --include="*.js" --include="*.jsx" to locate dangerous DOM manipulation

Steps

1. Identify input sources by searching for request.GET, request.POST, location.search, document.referrer, localStorage, sessionStorage, and URL parameters in your codebase
2. Trace where user input flows into output by mapping variables from input handlers to DOM insertion points or template rendering calls
3. Enable template auto-escaping in your framework: set jinja_env.autoescape = True (Jinja2), Markup() (Flask), or |escape filter (Django) by default
4. Replace all innerHTML assignments with textContent for plain text, or use DOM methods like appendChild() with document.createElement() and textContent
5. Replace React's dangerouslySetInnerHTML with standard JSX curly braces {} which auto-escape by default
6. For legitimate HTML rendering needs, use DOMPurify library to sanitize: DOMPurify.sanitize(userInput) before insertion
7. Add Content Security Policy (CSP) headers: Content-Security-Policy: default-src 'self'; script-src 'self' to prevent inline script execution
8. Test with XSS payloads like <img src=x onerror="alert('xss')"> and <svg/onload=alert('xss')> in every input field

Code

// XSS vulnerability scanner and fixer
const fs = require('fs');
const path = require('path');

const DANGEROUS_PATTERNS = [
  { regex: /innerHTML\s*=/, type: 'innerHTML assignment' },
  { regex: /dangerouslySetInnerHTML/, type: 'dangerouslySetInnerHTML' },
  { regex: /eval\(/, type: 'eval()' },
  { regex: /new Function\(/, type: 'Function constructor' },
  { regex: /{{\s*\w+\s*}}(?!.*\|escape)/, type: 'unescaped template var' }
];

function scanFile(filePath) {
  const content = fs.readFileSync(filePath, 'utf8');
  const vulnerabilities = [];
  
  DANGEROUS_PATTERNS.forEach(

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change