Cookies Web security basics

What are cookies and why are they used? basics of web security

Basics of cookies for web security

Cookies are small text files that have non-executable content in them these are just to store user’s information that the application might want to recognize the user because HTTP is stateless you need these once set are sent subsequently with each request.

Many server-side frameworks provide functionality on how to parse them and make there values useable programmatically.

Cookies are sent with the response header from the server to a browser and they are stored in the browser for persisting data there these common attributes of cookies.

These cookies can store up to 4096 bytes of data with these above attributes we can set as many custom attributes as we like.

How can we create cookies ?

In http you can send response with Set-cookie Header that is the most barebones way now you can do it with any library like express or by scratch but in response a cookie must look like this

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: Name=ironman
Set-Cookie: team=Marvel
... Rest of the page

We can further add a expiration date and flags like secure which will only let the cookie sent through https and httponly flag means that the cookie can not be read by the browser or be modified by it.

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 19 Mar 2030 03:30:00 GMT; Secure; HttpOnly

We can use JavaScript to set cookie’s it works something like this

// logs something like "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// This equal sign does not work as you expect
document.cookie = "alligator=alligator_cookie_content;"
// logs "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// Notice that the previous piece of code appends the new cookie we created

// A rough implementation of a cookie interface could look like this:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// For a real update we would first check if the cookie exists
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';

Credits for above example goes to Jack Misteli

Types of cookies

  • Persistent cookies are those cookies that have an expiry date mentioned. So when user close’s the browser these are not deleted. We can set a cookie to expire in one day or 50 years.
  • Session cookies These are the cookies that get deleted after the browser session is over. This means that once the browser is closed these cookies get cleared out. These cookies do not have an expiration date set. That is the whole difference between session and a persistent cookie. That in this one you don’t need to specify an expiry date and cookie becomes session only cookie. These are also used for session management.
  • Third-party cookies These are the cookies that do not come from the same domain as the website. For example, google analytics cookie it is an example of a third-party cookie. Used for user tracking and analytics. If the cookie doesn’t have the same domain in its attributes than it is a third party cookie
  • SubCookies These are not real cookies. This is one method to bypass the 20 cookies per domain limit set by browsers. In this technique, cookies are embedded with more name-value pairs inside of the cookie. For example, name=a=b&c=d&e=f&g=h. There is only one downside that we need to write custom parsers to parse these cookies inside of cookies.

Cookie attributes

Cookie Max-Age vs Expire

Cookies are temporary and we might just want to delete them on a specific date or We can simply not do that and choose a relative date. Example if we want to set an age of the cookie to specific dates for example on 19 Mar 2030. We will use the expire attribute in this format <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

or if you want to set relative age for the cookie we can use Max-age but it is not supported by all the browsers but modern ones support it. forces a cookie to expire in certain amount of seconds.

// Expires after one day
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

Domain attribute

it is generally set to the domain from which the cookie is sent to the browser by default. The hostname that sends the cookie that is the what the domain attribute is set to for each cookie. Domain flag can increase the domains for which the cookie values are going to be sent.

Example :- this is the site that sends the cookie’s but google has many subdomains like or etc. Now browser performs a tail comparison of the hostname. For example, all of these domains end in a * domain by tail comparison is will show all of them are valid domains coming from Now if their domain flag is set to something like let’s say on this same site then it will be invalid domain and will be ignored by the browser because that introduces security issues.

Path attribute

The option path indicates a URL path that must exist in the requested resources before sending the cookie header. The comparison is done by comparing the path value character by character against the start of the request URL. For example

Set-Cookie: name=sheeraz; path=/blog

this will match anything that starts with blog for example /blogroll etc. anything that begins with our bath value is valid.

Secure attribute

This attribute is just a flag if it is present in the cookie. We can not send it over the HTTP protocol that cookie’s can only be sent through the https protocol. Usually, nothing confidential should be sent or stored in cookie’s entire mechanism is inherently insecure.

HTTP only cookies

This flag is set to instruct the browser to not let JavaScript access these cookies. this was implemented to prevent XSS attacks where attacker can steal cookies from attacking clients and access the cookies via document.cookie function. once this is set there is no access to cookie via document.cookie

You can read my other articles and write ups here .

Posts created 16

One thought on “What are cookies and why are they used? basics of web security

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top