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=/";

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.

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"

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();
}

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=/;";

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.

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:

http

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

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.

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;

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.

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