HttpOnly Cookies

The `HttpOnly` cookie attribute prevents client-side JavaScript from directly accessing a cookie through APIs such as `document.cookie`. It helps reduce the impact of cookie theft through cross-site scripting (XSS), but it does not prevent the browser from sending the cookie with matching HTTP requests.

A cookie marked `HttpOnly` remains available to the browser's HTTP networking layer but is hidden from client-side JavaScript. This is useful for session or authentication cookies because application scripts cannot simply read the cookie value and send it elsewhere.

`HttpOnly` is an attribute set by the server in the `Set-Cookie` response header. For example, `Set-Cookie: session=abc123; HttpOnly; Secure` tells the browser to store the cookie while restricting script access and requiring a secure connection for transmission.

The attribute does not stop XSS itself. Malicious JavaScript may still execute in the application's origin and can perform actions using the victim's authenticated browser session, even though it cannot read the `HttpOnly` cookie value. Other cookie attributes such as `Secure` and `SameSite` address different parts of the security problem.

From frontend code, an `HttpOnly` cookie cannot be retrieved with `document.cookie`. A frontend application can still make requests that cause the browser to attach an applicable cookie; the server then uses that cookie to identify the session.

Key points

• `HttpOnly` prevents JavaScript from reading the cookie value.
• The server normally sets it through the `Set-Cookie` response header.
• The browser can still send an `HttpOnly` cookie with matching requests.
• It mitigates cookie-value theft through XSS but does not prevent XSS.
• `HttpOnly`, `Secure`, and `SameSite` provide different security controls.

Interview questions

What does the HttpOnly cookie attribute do?

`HttpOnly` prevents client-side JavaScript from reading the cookie through APIs such as `document.cookie`. The browser can still attach the cookie to matching HTTP requests. It is commonly used for session cookies so an XSS payload cannot simply extract the session-cookie value.

How would you set an HttpOnly cookie?

The server sets it with the `Set-Cookie` response header. A typical authentication cookie might include `HttpOnly`, `Secure`, and an appropriate `SameSite` value. Frontend JavaScript should not try to create or read the protected session cookie when the server owns it.

Does HttpOnly prevent XSS?

No. It prevents JavaScript from directly reading the cookie value, but it does not prevent malicious JavaScript from executing in the application's origin. Such code may still make authenticated requests using the victim's browser session. Therefore, XSS prevention remains necessary even when authentication cookies are `HttpOnly`.

Why is HttpOnly useful for authentication cookies?

Authentication cookies often contain a session identifier that grants access to a user's account. If JavaScript could read that value, an XSS vulnerability could expose it to an attacker who could potentially reuse the session elsewhere. `HttpOnly` removes direct script access to that credential while preserving the browser's ability to send it to the server.

A frontend cannot read its session cookie. How can it still make authenticated API requests?

The browser can attach an applicable cookie automatically when making a request to the cookie's scope. JavaScript does not need to know the cookie's value for this to happen. With `fetch`, whether cookies are included also depends on the request context and the `credentials` setting, particularly for cross-origin requests.