Discussion on: Critique My Plan: API Key for Authentication

[tom]

Why so?

As I understand it, HttpOnly just means the cookie can't be read by JavaScript; the browser can still send it along with a cross-origin request.

[iyedb]

But how would you send a cross origin request without js? A cross origin request is basically a xhr request to different server (not only the domain but even the port number makes it different btw) than the one serving the current page. If you mark the cookies as http only you can of course still send a cors request but you don't have access to the cookies so you can't send then along with your cors request.

[tom]

What's missing from this picture is that the browser can read, and send, cookies even if JavaScript can't.

That's why HttpOnly cookies exists: they are only available within the HTTP request.

So, a cross-origin HTTP request made using an XMLHttpRequest (or the fetch API) can include cookies that the JavaScript itself can't read. This is referred to as "credentials".

With XMLHttpRequest:

// from https://a.com
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://b.com/c.json', true);
xhr.withCredentials = true;
xhr.send();

and fetch:

fetch('https://b.com/c.json', {
  credentials: 'include'
})

Hopefully that makes sense!

By the way, this system (cross-origin, secure, HTTP-only cookies) is how TweetDeck and Twitter Lite's authentication works against the Twitter API.

[iyedb]

Makes perfect sense. But it's not possible to configure that request by for example adding a authorization header with the value of a cookie.

[tom]

Good point!