JavaScript: All about Cookies
Published: 2024-06-15 03:16:42

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

```JS
// 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:

```JS
// Read all cookies
const cookies = document.cookie; // "username=JohnDoe; otherCookie=SomeValue"
```

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

```JS
// 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:


```JS
// 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

    

```JS
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

```JS
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.