5 Security Headers Every Web Developer Should Add Today
Web security doesn't have to be complicated. Learn how to protect your website from hackers using 5 simple HTTP headers that act as a shield for your application.
When we build websites, we often focus on how they look and how fast they run. But if you leave your site "unlocked," it doesn't matter how pretty it is—hackers can break in.
You don't need to be a cybersecurity expert to add a strong layer of protection. You just need to use HTTP Security Headers.
Think of these headers as instructions you give the browser. They tell the browser: "Hey, this site is strict. Do not allow X, Y, or Z."
Here are the 5 most important headers you should add to your project right now.
1. Strict-Transport-Security (HSTS)
The "HTTPS Only" Rule
- What it does: It forces the browser to only load your site using a secure HTTPS connection, never the insecure HTTP.
- Why you need it: Without this, a hacker at a coffee shop could intercept the connection when a user types
http://yoursite.com. HSTS automatically upgrades them tohttps://. - In simple terms: "Don't talk to me unless the line is encrypted."
2. X-Frame-Options
The "Anti-Clickjacking" Shield
- What it does: It stops other websites from putting your website inside an
<iframe>(a window inside a window). - Why you need it: Hackers can create a fake website, put your site in an invisible iframe on top of it, and trick users into clicking "Delete Account" on your site when they think they are clicking "Win a Prize" on the fake site.
- In simple terms: "Don't let anyone put my website inside a picture frame."
3. X-Content-Type-Options
The "Trust the Label" Rule
- What it does: It prevents the browser from guessing the file type.
- Why you need it: Sometimes, a hacker might upload a malicious script disguised as an image (e.g.,
virus.jpg). If the browser tries to be "smart" and runs it as a script, you get hacked. This header tells the browser: "If I say it's an image, treat it like an image. Do not guess." - In simple terms: "Stick to the labels. No guessing."
4. Referrer-Policy
The "Privacy" Guard
- What it does: It controls how much information is passed along when a user clicks a link from your site to another site.
- Why you need it: If your URL contains sensitive info (like
yoursite.com/reset-password?token=123), you don't want to send that URL to the next website the user visits. - In simple terms: "Don't tell strangers exactly where you came from."
5. Content-Security-Policy (CSP)
The "Bouncer" (Most Important)
- What it does: This is the ultimate shield. It creates a whitelist of trusted sources.
- Why you need it: It prevents Cross-Site Scripting (XSS). It tells the browser: "Only run scripts from my domain and https://www.google.com/search?q=google.com. If a script tries to run from
hacker.com, block it immediately." - In simple terms: "If it's not on the guest list, it doesn't get in."
How to Add These in Next.js
You don't need to configure a server manually. You can add these headers directly in your next.config.js file.
Here is a clean, copy-paste solution:
1// next.config.js
2
3const securityHeaders = [
4 {
5 key: 'X-DNS-Prefetch-Control',
6 value: 'on'
7 },
8 {
9 key: 'Strict-Transport-Security',
10 value: 'max-age=63072000; includeSubDomains; preload'
11 },
12 {
13 key: 'X-Frame-Options',
14 value: 'SAMEORIGIN' // Only your site can frame your site
15 },
16 {
17 key: 'X-Content-Type-Options',
18 value: 'nosniff'
19 },
20 {
21 key: 'Referrer-Policy',
22 value: 'origin-when-cross-origin'
23 }
24];
25
26module.exports = {
27 async headers() {
28 return [
29 {
30 // Apply these headers to all routes in your app
31 source: '/:path*',
32 headers: securityHeaders,
33 },
34 ];
35 },
36};
Conclusion
Security isn't about being paranoid; it's about being professional. Adding these headers takes 5 minutes, but it closes the most common doors that hackers look for.
Copy the code above, paste it into your config, and rest easier knowing your site is locked down.
Enjoyed this article?
Share it with your network or friends.