DEV Community

Fatima Alam
Fatima Alam

Posted on

JavaScript: All about Cookies

Cookies are small pieces of data stored on the client's browser by a website. They are used to remember information about the user between page loads or sessions. Here's a detailed explanation of cookies in JavaScript and the differences between HTTP and HTTPS cookies:
Cookies in JavaScript
Creating and Setting Cookies

To create and set a cookie in JavaScript, you can use the document.cookie property. Here’s an example:

javascript

// Set a cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";
Enter fullscreen mode Exit fullscreen mode
username=JohnDoe: The name and value of the cookie. 
expires: The expiration date and time. If not set, the cookie will be a session cookie and will be deleted when the browser is closed.
path=/: The path where the cookie is accessible. If set to /, the cookie is accessible within the entire domain.
Enter fullscreen mode Exit fullscreen mode

Reading Cookies

To read cookies, you can access document.cookie, which returns all cookies as a single string:

// Read all cookies
const cookies = document.cookie; // "username=JohnDoe; otherCookie=SomeValue"
Enter fullscreen mode Exit fullscreen mode

To get a specific cookie value, you may need to parse this string:

// Get specific cookie value
function getCookie(name) {
    const value = ; ${document.cookie};
    const parts = value.split(; ${name}=);
    if (parts.length === 2) return parts.pop().split(';').shift();
}
Enter fullscreen mode Exit fullscreen mode

Deleting Cookies

To delete a cookie, set its expiration date to a past date:

// Delete a cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Enter fullscreen mode Exit fullscreen mode

HTTP vs. HTTPS Cookies
HTTP Cookies

 Unsecured Transmission: HTTP cookies are transmitted over regular HTTP connections. This means the data, including the cookie information, is not encrypted and can be intercepted by attackers.
    Set with the Set-Cookie Header: When a server responds to an HTTP request, it can include a Set-Cookie header to store a cookie in the browser.
    Basic Usage: Suitable for non-sensitive data or during development in a secure environment.
Enter fullscreen mode Exit fullscreen mode

HTTPS Cookies

Secured Transmission: HTTPS cookies are transmitted over HTTPS connections, ensuring that the data is encrypted during transmission. This prevents eavesdropping and man-in-the-middle attacks.

    Secure Attribute: When setting cookies for HTTPS, you can use the Secure attribute to ensure the cookie is only sent over HTTPS:
Enter fullscreen mode Exit fullscreen mode
http
Enter fullscreen mode Exit fullscreen mode

Set-Cookie: name=value; Secure

HttpOnly Attribute: This attribute can be added to cookies to prevent JavaScript from accessing them, enhancing security against XSS (Cross-Site Scripting) attacks:

http

Set-Cookie: name=value; HttpOnly
Enter fullscreen mode Exit fullscreen mode

Differences

Security:
    HTTP: Data is not encrypted, making it vulnerable to interception.
    HTTPS: Data is encrypted, providing a secure transmission.

Attributes:
    Secure Attribute: Ensures cookies are only sent over HTTPS.
    HttpOnly Attribute: Prevents access to cookies via JavaScript, providing additional security.

Usage:
    HTTP Cookies: Suitable for non-sensitive data or during development.
    HTTPS Cookies: Recommended for sensitive data and production environments to ensure data security.
Enter fullscreen mode Exit fullscreen mode

Example

Here’s an example of setting a secure and HttpOnly cookie:

http

Set-Cookie: sessionToken=abc123; Secure; HttpOnly; Path=/; Expires=Fri, 31 Dec 2024 12:00:00 GMT;
Enter fullscreen mode Exit fullscreen mode
sessionToken=abc123: The name and value of the cookie.
Secure: The cookie is only sent over HTTPS.
HttpOnly: The cookie cannot be accessed via JavaScript.
Path=/: The cookie is accessible within the entire domain.
Expires: The expiration date and time.
Enter fullscreen mode Exit fullscreen mode

By understanding and correctly implementing cookies, you can manage user sessions, store user preferences, and enhance the security of your web applications.

Top comments (0)