Cookies in Javascript
Published: 2024-06-14 17:45:38

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:


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

Secure

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

HttpOnly

   

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