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.
- Name: _GA
- Value: GA3.2.3134343414.314343242
- Domain: somewebsite.com
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
console.log(document.cookie) // 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;" console.log(document.cookie) // 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
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 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 + ';';
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 :- Google.com this is the site that sends the cookie’s but google has many subdomains like new.google.com or sports.google.com kid.google.com etc. Now browser performs a tail comparison of the hostname. For example, all of these domains end in a *.google.com domain by tail comparison is will show all of them are valid domains coming from google.com. Now if their domain flag is set to something like let’s say facebook.com on this same site then it will be invalid domain and will be ignored by the browser because that introduces security issues.
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.
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
document.cookie function. once this is set there is no access to cookie via
You can read my other articles and write ups here .