Menu
When hardening a web application against Cross-Site Scripting (XSS) and injection attacks.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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());