Menu
When hardening a web application against Cross-Site Scripting (XSS) and injection attacks.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
When improving read performance and reducing database load.
When designing loosely coupled systems that react to state changes asynchronously.
When setting up telemetry, debugging distributed systems, or standardizing application output.
When creating or extending an HTTP API for client consumption.
When addressing slow application endpoints, high database CPU usage, or standardizing data access patterns.
When designing how a system recovers from and reports failures.
| name | dom-security-hardening |
| description | When hardening a web application against Cross-Site Scripting (XSS) and injection attacks. |
| version | 2.0.0 |
| category | frontend |
| tags | ["frontend","security","xss","csp"] |
| skill_type | security |
| author | skiLLM |
| license | MIT |
| compatible_agents | ["claude-code","cursor","copilot","codex"] |
| estimated_context_tokens | 2200 |
| dangerous | false |
| requires_review | true |
| security_level | dangerous |
| dependencies | ["react-component-design"] |
| triggers | ["xss","injection","dom manipulation","csp","security","innerHTML","dangerouslySetInnerHTML"] |
| permissions | {"filesystem":{"read":true,"write":true},"network":{"outbound":false},"shell":{"execute":false}} |
| input_requirements | ["HTML codebase","JavaScript with DOM manipulation"] |
| output_contract | ["no inline scripts","no inline styles","csp enforced","no unsafe dom apis"] |
| failure_conditions | ["required sanitizer library unavailable","csp cannot be enforced","legacy framework requires unsafe-inline"] |
| last_updated | "2026-05-15T00:00:00.000Z" |
XSS attacks kill applications. This skill hardens the DOM attack surface by enforcing a strict Content Security Policy, eliminating unsafe DOM APIs, and stripping execution vectors like inline scripts and styles. Following this skill is MANDATORY for any user-facing web application handling user input.
index.html or document root of a web application<meta http-equiv="Content-Security-Policy"> tag in HTML <head> (or HTTP headers)<script> and <style> blocks into separate .js and .css filesonclick="...", onchange="..." with standard addEventListener bindingsinnerHTML, outerHTML, dangerouslySetInnerHTML with textContent or innerTextdefault-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'<script> blocks in HTMLstyle="..." attributeseval(), setTimeout(string), new Function(string)innerHTML, outerHTML, or dangerouslySetInnerHTML with user inputtextContent or innerText for all dynamic text insertions'unsafe-inline' or 'unsafe-eval' in CSPinnerHTML Assignment: element.innerHTML = userInput (immediate XSS)javascript: URIs: href="javascript:void(0)" or href="javascript:alert(1)"Content-Security-Policy: default-src *; script-src 'unsafe-inline'innerHTML used with user inputdangerouslySetInnerHTML used without sanitization'unsafe-inline' or 'unsafe-eval'<script> tags with inline code (all external)style="..." attributes (all CSS classes)onclick, onchange, oninput inline event handlerstextContent or innerTextinnerHTML, outerHTML, or dangerouslySetInnerHTML with user inputeval(), setTimeout(string), new Function(string) calls<head>, external <script> tags at end of <body>textContent, className, setAttribute).css files, no inline styles anywhere'unsafe-inline' or 'unsafe-eval' in CSP, ignore sanitization requirements, leave inline event handlers❌ Anti-pattern (Unsafe XSS vectors, no CSP):
<!-- No CSP -->
<a href="javascript:void(0)" onclick="submitForm()">Click me</a>
<div id="user-bio"></div>
<script>
// Unsafe: direct user input to DOM
document.getElementById('user-bio').innerHTML = getUserInput();
// Unsafe: inline style
document.getElementById('user-bio').setAttribute('style', 'color: red;');
// Unsafe: event handler string
setTimeout("console.log('vulnerable')", 1000);
</script>
✅ Correct pattern (Hardened, safe):
<!-- Strict CSP enforced -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'; img-src 'self' https:; font-src 'self';"
>
<a href="#" id="submit-btn">Click me</a>
<div id="user-bio"></div>
<!-- External script only -->
<script src="/js/app.js"></script>
// app.js
// 1. Safe event binding
document.getElementById('submit-btn').addEventListener('click', (e) => {
e.preventDefault();
submitForm();
});
// 2. Safe text insertion (escapes HTML by default)
document.getElementById('user-bio').textContent = getUserInput();
// 3. Safe styling via CSS classes
document.getElementById('user-bio').classList.add('text-red');
// 4. If HTML rendering is absolutely required, sanitize first
import DOMPurify from 'dompurify';
document.getElementById('user-bio').innerHTML = DOMPurify.sanitize(getUserMarkdown());