Security Headers

Definition

HTTP response headers that instruct the user's browser to enforce strict security rules, mitigating attacks like Clickjacking, XSS, and MIME-sniffing.

Explain Like I'm New

When your server sends a webpage to a browser, it attaches invisible instructions. One instruction says: 'Never allow another website to embed my site in an `<iframe>`'. This prevents hackers from overlaying an invisible button over your 'Transfer Money' button (Clickjacking).

Real World Example

Configuring a Content Security Policy (CSP) header that tells the browser: 'ONLY execute JavaScript that comes exactly from my domain. Refuse to run any scripts from third-party URLs'.

Common Use Cases

•Enterprise security compliance
•Preventing Clickjacking
•Preventing XSS

Interactive Example

Console output will appear here...

Interview Questions

basic

What file in a Next.js project is the best place to configure global HTTP Security Headers?

intermediate

What does the `Strict-Transport-Security` (HSTS) header do?

Flash Cards

Question

Which file?

Click to reveal answer

Answer

`next.config.js` using the `async headers()` function.

Question

HSTS header?

Click to reveal answer

Answer

It tells the browser to NEVER, under any circumstances, load the website using insecure HTTP. It forces the browser to automatically upgrade all requests to encrypted HTTPS.