XSS Prevention Agent Skill
XSS prevention — Content Security Policy, DOMPurify, output encoding, CSP nonces.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: XSS prevention — Content Security Policy, DOMPurify, output encoding, CSP nonces.
homepage: https://yepapi.com/skills/xss-prevention
metadata:
tags: [security, xss, csp, sanitization]
---
# XSS Prevention
## Rules
- Set Content Security Policy headers: restrict `script-src` to `'self'` + nonces, block `unsafe-inline`
- Never use `dangerouslySetInnerHTML` without sanitizing with DOMPurify first
- React/Vue/Svelte auto-escape output by default — never bypass with raw HTML injection
- Generate unique nonces per request for inline scripts: `crypto.randomBytes(16).toString('base64')`
- Sanitize user-generated markdown before rendering — use a sanitizing markdown library or DOMPurify post-render
- Enable CSP violation reporting to catch issues in production
\`\`\`ts
// Next.js CSP headers in next.config.js
const cspHeader = `
default-src 'self';
script-src 'self' 'nonce-${nonce}';
style-src 'self' 'unsafe-inline';
img-src 'self' blob: data:;
connect-src 'self';
frame-ancestors 'none';
report-uri /api/csp-report;
`.replace(/\n/g, "");
\`\`\`
\`\`\`ts
// Safe user HTML rendering in React
import DOMPurify from "isomorphic-dompurify";
function UserComment({ html }: { html: string }) {
const clean = DOMPurify.sanitize(html, {
ALLOWED_TAGS: ["b", "i", "a", "p", "br", "ul", "li"],
ALLOWED_ATTR: ["href"],
});
return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}
\`\`\`
## Avoid
- `dangerouslySetInnerHTML` with unsanitized user content — direct XSS
- `eval()`, `new Function()`, or `document.write()` with any user data
- CSP with `unsafe-inline` and `unsafe-eval` — defeats the entire purpose
- Trusting markdown libraries to be XSS-safe by default — most are not
- Reflecting URL parameters into the page without encodingInstall
Why Use the XSS Prevention Skill?
Without this skill, your AI guesses at xss prevention patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the XSS Prevention skill installed. Your AI knows the context and writes code that fits.
"Add Content Security Policy headers with nonces to my Next.js app"
"Sanitize user-generated HTML content with DOMPurify before rendering"
"Set up CSP violation reporting to detect XSS attempts in production"
Works Great With
XSS Prevention skill — FAQ
It provides rules for Content Security Policy headers, DOMPurify sanitization, CSP nonces for inline scripts, and safe rendering of user-generated content. Your AI writes XSS-resistant code by default.
Run `npx skills add YepAPI/skills --skill xss-prevention` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
React auto-escapes output in JSX by default, but dangerouslySetInnerHTML bypasses this protection. The skill ensures you sanitize with DOMPurify before using raw HTML injection and set proper CSP headers.