Docs
21.1-Security-Fundamentals
21.1 Security Fundamentals
Overview
Web security is critical for protecting users and data. This section covers the most common JavaScript security vulnerabilities and how to prevent them.
The Security Landscape
┌────────────────────────────────────────────────────────────────────────────┐
│ Web Application Threats │
├────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ │
│ │ Attacker │ │
│ └──────┬───────┘ │
│ │ │
│ ┌──────────────────────┼──────────────────────┐ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ XSS │ │ CSRF │ │ Injection │ │
│ │ Cross-Site │ │ Request │ │ Attacks │ │
│ │ Scripting │ │ Forgery │ │ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │ │ │
│ └──────────────────────┼──────────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Your Application │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ User Data │ │ │
│ │ │ Sessions │ │ │
│ │ │ Credentials │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Cross-Site Scripting (XSS)
XSS Attack Types
┌────────────────────────────────────────────────────────────────────────────┐
│ XSS Attack Types │
├─────────────┬──────────────────────────────────────────────────────────────┤
│ Type │ Description │
├─────────────┼──────────────────────────────────────────────────────────────┤
│ Stored XSS │ Malicious script stored in database, served to all users │
│ │ Example: Comment with <script> tag stored in forum │
├─────────────┼──────────────────────────────────────────────────────────────┤
│ Reflected │ Script in URL parameter reflected in page response │
│ XSS │ Example: Search query displayed without escaping │
├─────────────┼──────────────────────────────────────────────────────────────┤
│ DOM-based │ Client-side script modifies DOM unsafely │
│ XSS │ Example: innerHTML with user input │
└─────────────┴──────────────────────────────────────────────────────────────┘
XSS Attack Flow
Stored XSS:
┌──────────┐ POST /comment ┌──────────────┐
│ Attacker │ ───────────────────► │ Server │
│ │ <script>evil()</ │ │
└──────────┘ script> │ Stores in │
│ Database │
└──────┬───────┘
│
▼
┌──────────┐ GET /comments ┌──────────────┐
│ Victim │ ◄─────────────────── │ Server │
│ │ Returns page with │ │
│ Browser │ malicious script └──────────────┘
│ executes │
│ script! │
└──────────┘
XSS Prevention
// ❌ VULNERABLE - Direct HTML insertion
element.innerHTML = userInput;
// ✓ SAFE - Use textContent for text
element.textContent = userInput;
// ✓ SAFE - Escape HTML entities
function escapeHTML(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
// ✓ SAFE - Use DOM APIs
const link = document.createElement('a');
link.href = sanitizedUrl;
link.textContent = userText;
container.appendChild(link);
Cross-Site Request Forgery (CSRF)
CSRF Attack Flow
┌────────────────────────────────────────────────────────────────────────────┐
│ CSRF Attack Flow │
└────────────────────────────────────────────────────────────────────────────┘
1. User logs into Bank.com
┌──────────┐ ┌─────────────┐
│ User │ ──────► │ Bank.com │
│ │ ◄────── │ (logged in) │
└──────────┘ Cookie └─────────────┘
2. User visits malicious site
┌──────────┐ ┌─────────────┐
│ User │ ──────► │ Evil.com │
│ │ │ Contains: │
└──────────┘ │ <img src= │
│ "bank.com/ │
│ transfer? │
│ to=hacker │
│ &amt=1000">│
└──────┬──────┘
│
3. Browser auto-sends cookie │
┌──────────┐ │ ┌─────────────┐
│ Browser │ ──────────────┘──► │ Bank.com │
│ (victim) │ GET /transfer?... │ Thinks it's │
└──────────┘ + session cookie │ the user! │
└─────────────┘
CSRF Prevention
// Server generates CSRF token
const csrfToken = crypto.randomBytes(32).toString('hex');
// Store in session and embed in forms
// HTML Form
<form action="/transfer" method="POST">
<input type="hidden" name="csrf_token" value="{{csrfToken}}">
<input type="text" name="amount">
<button>Transfer</button>
</form>
// Fetch with CSRF token
fetch('/api/transfer', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken
},
body: JSON.stringify({ amount: 100 })
});
// Server validation
function validateCSRF(req, res, next) {
const token = req.headers['x-csrf-token'] || req.body.csrf_token;
if (!token || token !== req.session.csrfToken) {
return res.status(403).json({ error: 'Invalid CSRF token' });
}
next();
}
Content Security Policy (CSP)
CSP Header Configuration
┌────────────────────────────────────────────────────────────────────────────┐
│ Content Security Policy Directives │
├────────────────────┬───────────────────────────────────────────────────────┤
│ Directive │ Purpose │
├────────────────────┼───────────────────────────────────────────────────────┤
│ default-src │ Default fallback for other directives │
│ script-src │ Valid sources for JavaScript │
│ style-src │ Valid sources for stylesheets │
│ img-src │ Valid sources for images │
│ connect-src │ Valid sources for fetch, XHR, WebSocket │
│ font-src │ Valid sources for fonts │
│ frame-src │ Valid sources for iframes │
│ object-src │ Valid sources for plugins │
│ report-uri │ URL to send CSP violation reports │
└────────────────────┴───────────────────────────────────────────────────────┘
CSP Examples
// Strict CSP (recommended for new projects)
Content-Security-Policy:
default-src 'self';
script-src 'self' 'nonce-abc123';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
connect-src 'self' https://api.example.com;
frame-ancestors 'none';
base-uri 'self';
form-action 'self';
// Using nonces for inline scripts
<script nonce="abc123">
// This script is allowed
console.log('Allowed by CSP');
</script>
<script>
// This script is BLOCKED by CSP
// No nonce attribute
</script>
Injection Attacks
Types of Injection
┌────────────────────────────────────────────────────────────────────────────┐
│ Injection Attack Types │
├──────────────────┬─────────────────────────────────────────────────────────┤
│ Type │ Example & Prevention │
├──────────────────┼─────────────────────────────────────────────────────────┤
│ SQL Injection │ Input: "1 OR 1=1" breaks query logic │
│ │ Fix: Use parameterized queries │
├──────────────────┼─────────────────────────────────────────────────────────┤
│ NoSQL Injection │ Input: {"$gt": ""} bypasses filters │
│ │ Fix: Validate input types, sanitize │
├──────────────────┼─────────────────────────────────────────────────────────┤
│ Command Inject │ Input: "; rm -rf /" executes system commands │
│ │ Fix: Avoid shell, use safe APIs │
├──────────────────┼─────────────────────────────────────────────────────────┤
│ Code Injection │ Input to eval() executes arbitrary code │
│ │ Fix: Never eval() user input │
├──────────────────┼─────────────────────────────────────────────────────────┤
│ Path Traversal │ Input: "../../../etc/passwd" accesses files │
│ │ Fix: Validate, normalize, restrict paths │
└──────────────────┴─────────────────────────────────────────────────────────┘
Injection Prevention
// ❌ SQL Injection vulnerable
const query = `SELECT * FROM users WHERE id = ${userId}`;
// ✓ Parameterized query (safe)
const query = 'SELECT * FROM users WHERE id = ?';
db.query(query, [userId]);
// ❌ Command injection vulnerable
exec(`echo ${userInput}`);
// ✓ Safe alternative
spawn('echo', [userInput], { shell: false });
// ❌ Code injection vulnerable
eval(userCode);
new Function(userCode)();
// ✓ Safe alternative: use sandbox or avoid entirely
const vm = require('vm');
const sandbox = { result: null };
vm.createContext(sandbox);
vm.runInContext('result = 1 + 1', sandbox, { timeout: 100 });
Security Headers
Essential Security Headers
┌────────────────────────────────────────────────────────────────────────────┐
│ Essential Security Headers │
├──────────────────────────┬─────────────────────────────────────────────────┤
│ Header │ Purpose │
├──────────────────────────┼─────────────────────────────────────────────────┤
│ Strict-Transport-Security│ Force HTTPS connections │
│ X-Content-Type-Options │ Prevent MIME type sniffing │
│ X-Frame-Options │ Prevent clickjacking │
│ X-XSS-Protection │ Enable browser XSS filter (legacy) │
│ Referrer-Policy │ Control referrer information │
│ Permissions-Policy │ Control browser features │
│ Content-Security-Policy │ Control resource loading │
└──────────────────────────┴─────────────────────────────────────────────────┘
Express.js Security Headers
const helmet = require('helmet');
app.use(
helmet({
contentSecurityPolicy: {
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "'nonce-abc123'"],
styleSrc: ["'self'", "'unsafe-inline'"],
imgSrc: ["'self'", 'data:', 'https:'],
},
},
hsts: {
maxAge: 31536000, // 1 year
includeSubDomains: true,
preload: true,
},
frameguard: { action: 'deny' },
noSniff: true,
referrerPolicy: { policy: 'strict-origin-when-cross-origin' },
})
);
Client-Side Security
Secure Cookie Configuration
// Setting secure cookies
document.cookie = 'session=abc123; Secure; HttpOnly; SameSite=Strict';
// Cookie attributes explained:
// Secure - Only sent over HTTPS
// HttpOnly - Not accessible via JavaScript (prevents XSS theft)
// SameSite - Prevents CSRF
// - Strict: Never sent cross-site
// - Lax: Sent on top-level navigation
// - None: Always sent (requires Secure)
Secure Storage
// ❌ Don't store sensitive data in localStorage
localStorage.setItem('authToken', token); // Vulnerable to XSS
// ✓ Use HttpOnly cookies for auth tokens
// Set by server:
Set-Cookie: authToken=abc123; HttpOnly; Secure; SameSite=Strict
// For less sensitive data, encrypt before storing
async function encryptAndStore(key, data, encryptionKey) {
const encrypted = await encrypt(data, encryptionKey);
sessionStorage.setItem(key, encrypted);
}
async function retrieveAndDecrypt(key, encryptionKey) {
const encrypted = sessionStorage.getItem(key);
return await decrypt(encrypted, encryptionKey);
}
Security Checklist
┌────────────────────────────────────────────────────────────────────────────┐
│ Security Checklist │
├────────────────────────────────────────────────────────────────────────────┤
│ │
│ XSS Prevention: │
│ □ Never use innerHTML with user input │
│ □ Escape all output by default │
│ □ Implement Content Security Policy │
│ □ Use textContent instead of innerHTML where possible │
│ │
│ CSRF Prevention: │
│ □ Implement CSRF tokens for state-changing operations │
│ □ Use SameSite cookies │
│ □ Verify Origin/Referer headers │
│ │
│ Injection Prevention: │
│ □ Use parameterized queries │
│ □ Validate and sanitize all input │
│ □ Never use eval() with user input │
│ □ Avoid shell commands with user input │
│ │
│ Authentication: │
│ □ Use HTTPS everywhere │
│ □ Implement secure password hashing (bcrypt) │
│ □ Use HttpOnly, Secure cookies │
│ □ Implement rate limiting │
│ │
│ Headers: │
│ □ Enable HSTS │
│ □ Set X-Content-Type-Options: nosniff │
│ □ Set X-Frame-Options or CSP frame-ancestors │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Key Takeaways
- •Trust no input - All user input is potentially malicious
- •Escape all output - Context-aware encoding is essential
- •Defense in depth - Multiple layers of security
- •Principle of least privilege - Minimal permissions needed
- •Keep dependencies updated - Security patches are critical
- •Monitor and log - Detect attacks early
- •Security headers - Use them all
Files in This Section
- •
README.md- This documentation - •
examples.js- Security vulnerability demonstrations - •
exercises.js- Security practice exercises