Cookies

Yum.

What are cookies?

An HTTP cookie (also called web cookie, Internet cookie, browser cookie or simply cookie) is a small piece of data sent from a website and stored in the user's web browser while the user is browsing. Cookies were designed to be a reliable mechanism for websites to remember stateful information (such as items added in the shopping cart in an online store) or to record the user's browsing activity (including clicking particular buttons, logging in, or recording which pages were visited in the past). They can also be used to remember arbitrary pieces of information that the user previously entered into form fields such as names, addresses, passwords, and credit card numbers.

lol don't do this

tl;dr

Cookies store data in the browser

But what kind of data?

Boolean

String

Number

Object

Array

Function

null

undefined

But that's okay

Strings are pretty cool.

#JSON

Chrome Developer Tools

  1. Select the Resources tab
  2. Open the Cookies dropdown

Name & Value

  • Like query strings, cookies values are separated with equal signs.
  • Unlike query strings, cookie values are separated by semicolons.
document.cookie

"_octo=GH1.1.1037928181.1453964753; gsScrollPos=; tz=Pacific%2FHonolulu"

Avoid using whitespace characters, semicolons, and equal signs in cookie values. You can avoid this by using the encodeURIComponent function.

Setting a cookie

Although document.cookie returns all accessible cookies as a string. Setting document.cookie will append a new key/value pair to the cookies

/* Tip: You can right click a domain name in the cookie list 
 * and "clear" all cookies.
 */

// Assume there are no cookies

document.cookie = 'name=bob'; //"name=bob"

document.cookie = 'age=42';   // "age=42'

document.cookie               //"name=bob; age=42"

Expiring a cookie

Just like normal cookies, web cookies can have an expiration date.

If there is no expiration date set, then it will default to a session cookie and will expire when the browser is closed.

Set the date!

A cookie string can contain an expires key that is set the a UTC formatted string.

// Setting a cookie that expires after 10 seconds.

let expirationDate = new Date(Date.now() + 10000);
document.cookies = `snack=oreos; expires=${expirationDate}`;

"snack=oreos; expires=Sat Jul 30 2016 00:25:04 GMT-1000 (HST)"

A cookie value that has an expiration date set will persist even if the browser is closed and then reopened.

Seems like a lot of work for 10 seconds...

Alternatively, you could specify a max-age key which is provided in seconds.

// Setting a cookie that expires after 10 seconds.

let maxAge = 10;
document.cookies = `gottaGo=fast; max-age=${maxAge}`;

"gottaGo=fast; max-age=10"

Cookie domain

By default a cookie is associated with whatever domain it was created on.

You can not set a cookie on different domain since it opens up a potential security risk.

However...

Subdomains are a different story...

  • Let's say a cookie value is set on github.com.
  • All subdomains will also receive that cookie value.
    • gist.github.com
    • blog.github.com
    • help.github.com
    • api.github.com
  • However, setting a cookie on a subdomain does not set it on the parent domain. (By default)

Setting the domain

Let's assume we are on gist.github.com.

document.cookie = "username=bob";
document.cookie = "search=nodejs; domain=gist.github.com";
document.cookie = "langauge=javascript; domain=github.com";

Which cookies will appear on:

  • gist.github.com
  • github.com

It is possible to set the domain using the domain key.

all of them!

only the last one...

Setting the path

Just like with the domain key, we can set the path if we want a key to only appear on a specific path.

document.cookie = "query=nodejs; path="/search";

The path key defaults to the root path of a domain (/).

This affects all nested paths of /search as well.

Enforcing SSL protocol

document.cookie = "secret=shh; secure";

Having the secure key will only be accessible on pages that are using the https protocol.

Setting cookies from the server

Setting the Set-Cookie header on a response from the server allows the server set cookie values on the client browser.

app.get('/', function (req, res) {
  res.set('Set-Cookie', 'type=shortbread;');
  res.end('Yum!');
});

HTTP only?

The HttpOnly key can only be set on a cookie from the server. The value will NOT be accessible via JavaScript.

This is used to prevent client javascript from tampering with cookie values.

app.get('/', function (req, res) {
  res.set('Set-Cookie', 'token=Rog5Coaf6keIj0O; HttpOnly');
  res.end(';)');
});

Resources

Cookies

By Tony Gaskell

Cookies

  • 1,717