Based on FAC original workshop.
Learning Outcomes
- What are cookies?
- Why do we use them?
- How do we set and remove cookies using headers?
- How do we check whether or not a request contains a cookie?
๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช
So now that you know how to store a user's password safely, the question is: just how does your server remember a browser?
A cookie is a piece of data that your server, hosted on a certain domain (localhost
, google.com
etc) sends back to the browser, which the browser will then keep, and attach to every future request to that domain. An amazon.com
cookie will not be attached to a request to an ebay.com
domain, for example.
(If you open up DevTools, and go to the 'Application' tab you will be able to see all the cookies attached to the domain you are currently on.)
๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช
Cookies are useful as they allow us to store information about a client. As the client keeps hold of the cookie the server can simply check the cookies has the correct information. You send cookies to the frontend via the response object and read a clients cookie on server via the request object.
๐ฅ WARNING ๐ฅ
Here we are setting a very simple cookie with a name of logged
for an exapmle and a value of true
.
// Cookie: logged=true
It will do for now as we are focusing purely on how to transmit cookies, but in reality there are two problems.
- If you have multiple users, there is no way of telling the difference between them.
- There is NO SECURITY in place. Cookies can very easily be edited in Devtools. For example, if you have a cookie of
admin=false
, it is very easy to change that toadmin=true
! The different ways to protect cookies from tampering will be in workshop 3...
๐ WARNING OVER ๐
๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช ๐ช
You can also add 'flags' to the cookie header to enable certain behaviour. Some of the more important ones are:
Flag | Description |
---|---|
HttpOnly |
This stops your cookie being accessed by the browser's Javascript (including your own front-end code). Without this flag, an attacker could intercept the user's cookies in a process known as Cross-Site Scripting (XSS). With the cookies of the legitimate user at hand, the attacker is able to act as the user in his/her interaction with a website - effectively identity theft. |
Secure |
This means the cookie will only be set over a HTTPS connection. This prevents a man-in-the-middle attack. |
Max-Age |
This sets the cookie lifetime in seconds in node and milliseconds in express. |
More flags can be found here.
- Clone this repo
$ npm i
$ npm run dev
- Navigate to
localhost:3000
You will see that index.html
has three buttons, now you must implement the cookie logic on the server side:
Note: Click on the relevant button to check that you have implemented the cookie logic correctly
Check express docs to know how to add, remove and read a cookie.
Endpoint | Action |
---|---|
/login |
Should add a cookie and redirect to / |
/logout |
Should remove the cookie and redirect to / |
/auth-check |
Based on the validity of the cookie, should send back a 200 or 401 response, and an informative message! |