JavaScript & Frontend Security Reference

A developer-focused overview of 47 security concepts spanning JavaScript, frontend, and frontend-backend communication. Each concept links to a dedicated deep-dive file with explanations, attack scenarios, code examples (vulnerable vs. secure), and mitigations. Coverage aims to be broad rather than exhaustive — treat it as a structured starting point, not a definitive specification.

---

Architecture

This repo ships two presentation formats built from the same concepts:

	slides.html (Reveal.js)	slides.md (Slidev)
Purpose	Canonical presentation, deployed to GitHub Pages	Companion deck, hot-reload local dev
Navigation	2D — Right = next category, Down = concept slides	Linear
Deploy	Automatic via deploy.yml	npm run dev or manual build
PDF export	npm run export:reveal-pdf	npm run export:slidev-pdf

slides.html is the source of truth. When updating content, update both.

Note on file numbering: concepts 12 (LDAP Injection) and 26 (Certificate Pinning) were intentionally removed as out-of-scope for modern JS stacks. Their numbers were not reused to avoid breaking existing links. The gaps are not errors.

---

How to Use This Reference

Each entry includes a one-to-two sentence summary. Click the link to open the detailed file for that concept, which contains: a full explanation, how attacks work, code examples (vulnerable vs. secure), and mitigations.

---

🔴 Category 1 — Client-Side / Frontend Attack Vectors

#	Concept	Summary
01	Cross-Site Scripting (XSS)	Attackers inject malicious scripts into trusted web pages, running in the victim's browser to steal data or hijack sessions. Comes in three forms: Stored, Reflected, and DOM-based.
02	Clickjacking	A malicious page overlays a transparent iframe over a legitimate site, tricking users into clicking UI elements they can't see. Prevented with X-Frame-Options and CSP frame-ancestors.
03	Prototype Pollution	Attackers inject properties into JavaScript's Object.prototype, altering the behavior of all objects in the app — often leading to XSS or remote code execution.
04	DOM Clobbering	HTML elements with id or name attributes can overwrite global JavaScript variables, enabling script injection in apps that do unsafe DOM reads.
05	eval() & Dynamic Code Execution	Using eval(), setTimeout(string), or new Function(string) with user-controlled input allows arbitrary code execution in the browser.
06	Insecure Data Storage (Client-Side)	Storing sensitive tokens or PII in localStorage, sessionStorage, or insecure cookies exposes them to XSS theft. HttpOnly cookies and short-lived tokens are safer alternatives.
07	ReDoS — Regular Expression DoS	Poorly written regex patterns with catastrophic backtracking can freeze a JavaScript engine when fed crafted input, causing denial of service.
08	Open Redirects	A URL parameter controls where the app redirects users; attackers exploit this to send victims to phishing sites while appearing to come from a trusted domain.
46	Micro-Frontend (MFE) Security	Module Federation and similar MFE architectures introduce cross-remote trust boundaries; an untrusted remote can escalate privileges, poison shared state, or inject scripts into the host shell.
48	Framework Security (React / Vue / Angular)	Each major frontend framework has specific pitfalls — dangerouslySetInnerHTML, v-html, Angular's bypassSecurityTrustHtml, SSR hydration mismatches — that re-open XSS channels if misused.

---

🟠 Category 2 — Injection Attacks

#	Concept	Summary
09	SQL Injection	Unsanitized user input is embedded in SQL queries, allowing attackers to read, modify, or delete database data. Parameterized queries and ORMs eliminate this risk.
10	NoSQL Injection	Similar to SQL injection but targeting document databases (MongoDB, etc.) via JSON operators like $where or $gt injected in request bodies.
11	Command Injection	User input passed to OS shell commands (Node.js exec, spawn) can execute arbitrary system commands if not properly escaped.
13	HTML & Template Injection	Untrusted input rendered directly into HTML templates (server-side or client-side) can lead to XSS or, in server-side template engines, full remote code execution (SSTI).

---

🟡 Category 3 — Cross-Origin & Request Forgery

#	Concept	Summary
14	CSRF — Cross-Site Request Forgery	A malicious site tricks the victim's authenticated browser into making state-changing requests to another site. Mitigated with CSRF tokens and SameSite cookie attributes.
15	CORS — Cross-Origin Resource Sharing	Browser policy that restricts cross-origin HTTP requests; misconfigured CORS headers (e.g., Access-Control-Allow-Origin: * with credentials) expose APIs to unauthorized access.
16	Server-Side Request Forgery (SSRF)	The server is tricked into making HTTP requests to internal services on the attacker's behalf, potentially exposing cloud metadata endpoints or internal APIs.

---

🟢 Category 4 — Authentication & Authorization

#	Concept	Summary
17	Broken Access Control	The #1 OWASP risk: users can act outside their intended permissions — accessing other users' data, admin endpoints, or unpublished resources.
18	Identification & Authentication Failures	Weak passwords, missing MFA, insecure credential storage, and broken session management allow attackers to compromise user accounts.
19	JWT Security	JSON Web Tokens can be misconfigured (e.g., alg: none attacks, weak secrets, missing expiry) allowing forged tokens and session hijacking.
20	OAuth 2.0 & OpenID Connect Security	OAuth flows can be exploited via authorization code interception, open redirects in redirect_uri, token leakage, and PKCE bypass if not implemented correctly.
21	Session Management	Predictable session IDs, missing session invalidation on logout, and session fixation attacks allow attackers to impersonate authenticated users.
22	Insecure Direct Object References (IDOR)	APIs that expose internal object IDs (e.g., /api/invoice/1234) without verifying ownership let attackers access or modify other users' data.

---

🔵 Category 5 — Transport & Network Security

#	Concept	Summary
23	HTTPS & TLS	Encrypts data in transit between browser and server; without it, network attackers can read or modify all traffic (man-in-the-middle).
24	HTTP Strict Transport Security (HSTS)	An HTTP header that forces browsers to use HTTPS only for a domain, preventing SSL stripping and downgrade attacks.
25	Man-in-the-Middle (MitM) Attacks	An attacker positions themselves between client and server to intercept or alter communications; prevented by TLS, HSTS, and certificate validation.
27	WebSocket Security	WebSocket connections bypass some browser security policies; they require origin validation, authentication tokens, and protection against message injection.
47	Client-Side Cryptography & Web Crypto API	The browser's native crypto.subtle API offers secure primitives (AES-GCM, PBKDF2, ECDH), but misuse — weak IVs, ECB mode, Math.random for keys, key storage in localStorage — undermines all security guarantees.
49	Web Cache Poisoning & Cache Deception	Attackers inject unkeyed request headers (e.g. X-Forwarded-Host) to make CDN caches serve malicious responses to all users; cache deception tricks caches into storing private data at predictable public URLs.

---

🟣 Category 6 — HTTP Security Headers & Browser Policies

#	Concept	Summary
28	Content Security Policy (CSP)	An HTTP response header that whitelists trusted sources for scripts, styles, and media, dramatically reducing XSS attack surface.
29	Secure Cookie Attributes	HttpOnly prevents JS access, Secure enforces HTTPS-only transmission, and SameSite prevents cookies from being sent on cross-site requests.
30	Referrer Policy	Controls how much URL information is sent in the Referer header when navigating, preventing leakage of sensitive URL parameters to third parties.
31	Permissions Policy (Feature Policy)	An HTTP header that restricts which browser features (camera, geolocation, fullscreen) can be used by a page and its iframes.
32	X-Content-Type-Options & MIME Sniffing	The X-Content-Type-Options: nosniff header prevents browsers from MIME-sniffing responses, stopping certain content injection attacks.

---

⚫ Category 7 — Supply Chain & Dependency Security

#	Concept	Summary
33	Supply Chain Attacks	Attackers compromise widely used npm packages or CDN assets, injecting malicious code that runs in every app consuming that dependency.
34	Subresource Integrity (SRI)	A browser mechanism that verifies CDN-loaded scripts or stylesheets haven't been tampered with by comparing cryptographic hashes.
35	Vulnerable & Outdated Components	Using libraries with known CVEs (outdated npm packages, frameworks) exposes applications to exploits that have already been patched upstream.
36	Third-Party Script Security	Analytics tags, chat widgets, and ad scripts run with full page privileges; a compromised third-party script is as dangerous as a direct XSS attack.

---

🔶 Category 8 — API & Backend Communication Security

#	Concept	Summary
37	API Security & Rate Limiting	APIs without rate limiting are vulnerable to brute force, credential stuffing, and DoS attacks; proper throttling and input validation are essential.
38	Cryptographic Failures	Transmitting or storing sensitive data without strong encryption (e.g., MD5 passwords, HTTP-only APIs, hardcoded secrets) exposes it to theft.
39	Security Misconfiguration	Default credentials, verbose error messages, open cloud storage buckets, and unnecessary services enabled in production are common misconfigurations.
40	Software & Data Integrity Failures	Auto-updating without signature verification, deserializing untrusted data, and CI/CD pipeline compromises allow attackers to execute arbitrary code.
41	Insecure Deserialization	Deserializing attacker-controlled data (JSON, XML, binary) without validation can lead to object injection, privilege escalation, or remote code execution.
42	Mass Assignment	Automatically binding request body fields to data model properties without whitelisting allows attackers to set fields like isAdmin: true.

---

🔷 Category 9 — Availability & Monitoring

#	Concept	Summary
43	DoS & DDoS Attacks	Overwhelming a server or client with traffic or expensive operations to make a service unavailable; mitigated with rate limiting, CDNs, and WAFs.
44	Security Logging & Monitoring Failures	Without proper logging of authentication events, errors, and suspicious activity, breaches go undetected; logging must itself be tamper-resistant.
45	Insecure Design	Security flaws baked into architecture (missing threat modeling, no defense in depth) that cannot be fixed by implementation patches alone.

---

📋 Quick Reference — OWASP Top 10:2021 Mapping

OWASP Rank	Name	Covered In
A01	Broken Access Control	#17, #22
A02	Cryptographic Failures	#38, #23
A03	Injection	#01, #09, #10, #11
A04	Insecure Design	#45
A05	Security Misconfiguration	#39, #15
A06	Vulnerable & Outdated Components	#35
A07	Identification & Authentication Failures	#18, #19, #21
A08	Software & Data Integrity Failures	#40, #33
A09	Security Logging & Monitoring Failures	#44
A10	Server-Side Request Forgery (SSRF)	#16

---

Sources: OWASP Top 10 · MDN Web Security · PortSwigger Web Security Academy · FreeCodeCamp JS Security · Capture The Bug – Modern Frontend Security