Secure JavaScript: XSS, CSP, and Dependency Safety
Part of the Cybersecurity Skills Guide — This article is one deep-dive in our complete guide series.
By HADESS Team | February 28, 2026 | Updated: February 28, 2026 | 5 min read
JavaScript runs on both the client and server, and each context has distinct security problems. Browser-side JavaScript faces XSS and prototype pollution. The npm ecosystem introduces supply chain risk. Understanding both attack surfaces is non-negotiable for anyone building or reviewing web applications.
XSS Prevention
Cross-site scripting happens when untrusted data reaches the DOM without proper encoding. The three contexts that matter:
HTML context: Use textContent instead of innerHTML. If you must insert HTML, sanitize with DOMPurify:
“javascript import DOMPurify from 'dompurify'; element.innerHTML = DOMPurify.sanitize(userInput); `
Attribute context: Never interpolate user input into event handlers or href attributes. javascript: URIs in href bypass most output encoding.
JavaScript context: Avoid eval(), Function(), setTimeout(string), and setInterval(string). These execute arbitrary strings as code. ESLint rules like no-eval catch the obvious cases, but watch for indirect eval through template literals and dynamic imports.
React and Vue escape output by default in JSX/templates, but dangerouslySetInnerHTML (React) and v-html (Vue) bypass this protection. Audit every instance.
Content Security Policy
CSP is your second line of defense against XSS. Start strict and loosen only when necessary:
`
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self' https://api.example.com
Avoid ‘unsafe-inline’ and ‘unsafe-eval’ — they defeat the purpose of CSP. Use nonces or hashes for inline scripts that you control:
`
script-src 'nonce-randomValue123'
Deploy CSP in report-only mode first. Analyze violations before enforcing. CSP reporting endpoints will show you what breaks and what might be an attack.
Prototype Pollution
Prototype pollution occurs when an attacker modifies Object.prototype, affecting all objects in the application. It typically enters through deep merge functions, JSON parsing with recursive assignment, or query string parsers.
`javascript`
// Vulnerable pattern
function merge(target, source) {
for (let key in source) {
target[key] = source[key]; // __proto__ can be set here
}
}
Defend against it: use Object.create(null) for lookup maps, freeze prototypes where possible, and validate that keys like __proto__, constructor, and prototype are rejected in user input. Libraries like lodash have fixed their merge functions, but custom implementations often remain vulnerable.
Dependency Management
The average JavaScript project pulls in hundreds of transitive dependencies. Each one is a potential supply chain attack.
Run npm audit regularly. Use npm audit signatures to verify package provenance. Pin exact versions in package-lock.json and review diffs on updates. Tools like Socket.dev analyze packages for suspicious behavior — install scripts that execute arbitrary code, obfuscated payloads, and network calls during installation.
Set up .npmrc with ignore-scripts=true` for projects where install scripts are not needed. This blocks a common malware delivery mechanism.
Related Career Paths
JavaScript security expertise is a core requirement for the Application Security Expert career path. Most web application assessments involve JavaScript analysis on both client and server.
Next Steps
- Measure your JavaScript security skills with the skills assessment
- Browse the skills library for related XSS, CSP, and supply chain topics
- Get targeted study recommendations from the coaching tool
Related Guides in This Series
- Secure Coding in .NET: Input Validation, Auth, and CSRF Defense — HADESS | 2026
- Secure Java/Spring Development: From Config to Defense — HADESS | 2026
- Secure Node.js: Express Middleware, Auth, and Rate Limiting
Take the Next Step
Browse 80+ skills on HADESS. Go to the browse 80+ skills on hadess on HADESS.
See your certification roadmap. Check out the see your certification roadmap.
Get started free — Create your HADESS account and access all career tools.
Frequently Asked Questions
How long does it take to learn this skill?
Most practitioners build working proficiency in 4-8 weeks of dedicated study with hands-on practice. Mastery takes longer and comes primarily through on-the-job experience.
Do I need certifications for this skill?
Certifications validate your knowledge to employers but are not strictly required. Hands-on experience and portfolio projects often carry more weight in technical interviews. Check the certification roadmap for relevant options.
What career paths use this skill?
Explore the career path explorer to see which roles require this skill and how it fits into different cybersecurity specializations.
—
HADESS Team consists of cybersecurity practitioners, hiring managers, and career strategists who have collectively spent 50+ years in the field.
