Chapter 70: Permissions Policy & Modern Security Headers

Sec-Fetch Metadata Request Headers (CSRF Defense)

**Part 14: Security & Best Practices** — Chapter 70: Feature Policy & Permissions Policy

LEARNING OBJECTIVES ⌵
  • Understand W3C Fetch Metadata Request Headers (Sec-Fetch-Site, Sec-Fetch-Mode, Sec-Fetch-Dest, Sec-Fetch-User).
  • Implement server-side Fetch Metadata validation rules to block Cross-Site Request Forgery (CSRF) and Cross-Site Script Inclusion (XSSI).
  • Differentiate between same-origin, same-site, and cross-site requests.
  • Build zero-token CSRF defense middleware in web frameworks.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

The Sec-Fetch Headers

# Attached automatically by modern browsers on all HTTP requests (cannot be forged by JS):
Sec-Fetch-Site: cross-site       # [same-origin, same-site, cross-site, none]
Sec-Fetch-Mode: navigate         # [navigate, cors, no-cors, same-origin, websocket]
Sec-Fetch-Dest: document         # [document, image, script, style, empty, iframe]
Sec-Fetch-User: ?1               # ?1 if initiated by human user click/keypress

Universal CSRF Defense Rule:

If Sec-Fetch-Site === 'cross-site' AND request method is state-modifying (POST, PUT, DELETE), REJECT with 403 Forbidden!

📌 Key Takeaways

  • Sec-Fetch-* headers are browser-managed and cannot be manipulated or spoofed by malicious JavaScript.
  • Fetch Metadata allows servers to isolate cross-site requests from internal API endpoints effortlessly.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?

🏋️ Study Exercise

Task: Review the http example above. Identify the key directives and their purpose, then try writing your own version from memory.

# Attached automatically by modern browsers on all HTTP requests (cannot be forged by JS): Sec-Fetch-Site: cross-site # [same-origin, same-site, cross-site, none] Sec-Fetch-Mode: navigate # [navigate, cors, no-cors, same-origin, websocket] Sec-Fetch-Dest: document # [document, image, script, style, empty, iframe] Sec-Fetch-User: ?1 # ?1 if initiated by human user click/keypress