Cookies are small pieces of data that a server sends to a user's browser. They are stored on the user's device and sent back to the server with subsequent requests. Cookies are primarily used to maintain stateful information between HTTP requests, which are otherwise stateless by nature.
A cookie consists of the following components:
HttpOnly flag, client-side cookies can be accessed and modified by JavaScript running on the webpage.Example (Setting a cookie with JavaScript):
document.cookie = "username=Ash; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";
Set-Cookie HTTP header, and these cookies are automatically stored by the browser.HttpOnly is set: For security reasons, cookies with the HttpOnly attribute cannot be accessed or modified by client-side scripts.Example (Setting a cookie in an HTTP response):
Set-Cookie: session_id=abc123; HttpOnly; Secure; Path=/; Expires=Wed, 13 Oct 2024 07:28:00 GMT
| Type | Who Sets It? | Who Can Access It? | Example Use Case | Security Considerations |
|---|---|---|---|---|
| Client-Side | Client (Browser) | Client (JavaScript), unless HttpOnly |
Storing user preferences | Vulnerable to XSS unless HttpOnly |
| Server-Side | Server | Server (via HTTP headers), sometimes Client | Session management, authentication | Use HttpOnly, Secure flags for security |
Session Management: Track user sessions on websites. The server generates a session ID and stores it in a cookie. The browser sends this session ID with each request, enabling the server to recognize the user and maintain their session.
Personalization: Remember user preferences, such as language settings or themes (dark mode/light mode).
Tracking and Analytics: Track user activity across pages or different websites for analytics or advertising purposes.
Set-Cookie header in the response.Secure attribute ensures cookies are only sent over HTTPS.HttpOnly. Always use the HttpOnly flag for sensitive data like session tokens.| Type | Who Sets It? | Who Can Access It? | Example Use Case | Security Considerations |
|---|---|---|---|---|
| Client-Side | Client (Browser) | Client (JavaScript), unless HttpOnly |
Storing user preferences | Vulnerable to XSS unless HttpOnly |
| Server-Side | Server | Server (via HTTP headers), sometimes Client | Session management, authentication | Use HttpOnly, Secure flags for security |
Cookies are a key way to store data client-side in web browsers. In JavaScript, you can set, retrieve, and delete cookies to manage information like session identifiers or user preferences.
Cookies are set using the document.cookie API. You can specify a key-value pair along with several attributes such as expires, path, domain, etc.
Example: Setting a Cookie in JavaScript
// Set a cookie that expires in one day
const date = new Date();
date.setTime(date.getTime() + (24 * 60 * 60 * 1000)); // 1 day in milliseconds
const expires = "expires=" + date.toUTCString();
document.cookie = "username=Ash; " + expires + "; path=/";
username and holds the value "Ash".path=/ makes the cookie accessible across the entire site.You can read cookies using document.cookie, which returns all cookies as a single string. You can split this string into individual cookies and access the values.
Example: Reading a Cookie
function getCookie(name) {
let decodedCookie = decodeURIComponent(document.cookie);
let cookiesArray = decodedCookie.split(';');
for (let cookie of cookiesArray) {
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1);
}
if (cookie.indexOf(name + "=") === 0) {
return cookie.substring(name.length + 1, cookie.length);
}
}
return "";
}
// Retrieve the 'username' cookie
let username = getCookie("username");
console.log(username); // Outputs: Ash
To delete a cookie, set its expires attribute to a past date:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
FastAPI makes working with cookies on the server-side straightforward. You can set cookies in responses, read them from requests, and configure security settings such as HttpOnly, Secure, and SameSite.
You can use the set_cookie() method in a FastAPI route to add a cookie to the response.
Example: Setting a Cookie in FastAPI
from fastapi import FastAPI, Response
app = FastAPI()
@app.get("/set-cookie/")
def set_cookie(response: Response):
response.set_cookie(
key="session_id",
value="abc123",
httponly=True, # HttpOnly cookies are inaccessible to JavaScript
secure=True, # Secure cookies are only sent over HTTPS
samesite="lax", # Helps prevent cross-site request forgery (CSRF)
max_age=3600, # Expires in 1 hour
)
return {"message": "Cookie set successfully"}
You can retrieve cookies using the Cookie dependency in FastAPI.
Example: Reading a Cookie in FastAPI
from fastapi import FastAPI, Cookie
app = FastAPI()
@app.get("/read-cookie/")
def read_cookie(session_id: str = Cookie(None)):
if session_id:
return {"session_id": session_id}
return {"error": "No session_id cookie found"}
You can delete cookies by setting their expiration to a past date using the delete_cookie() method:
@app.get("/delete-cookie/")
def delete_cookie(response: Response):
response.delete_cookie(key="session_id")
return {"message": "Cookie deleted"}
FastAPI provides several options for customizing cookies, including:
lax, strict, or none).Example: Custom Cookie Settings
@app.get("/set-custom-cookie/")
def set_custom_cookie(response: Response):
response.set_cookie(
key="custom_cookie",
value="custom_value",
httponly=True,
secure=True,
samesite="strict", # Strict SameSite policy
path="/custom-path", # Available only on /custom-path
domain="example.com", # Available to the domain example.com
max_age=7200, # Expires in 2 hours
)
return {"message": "Custom cookie set with specific attributes"}
"strict", "lax", or "none".When working with web applications, both LocalStorage and Cookies are used to store data on the client-side. However, they have significant differences in terms of capacity, accessibility, security, and use cases.
Summary: LocalStorage offers much larger storage capacity compared to cookies.
Summary: LocalStorage persists indefinitely, while cookies can expire based on server-side settings.
HttpOnly is set) and the server. Cookies are automatically sent with every HTTP request.Summary: LocalStorage is only client-side, while cookies can be sent to the server automatically.
HttpOnly flag (making them inaccessible to JavaScript) and Secure flag (ensuring they are only transmitted over HTTPS).Summary: Cookies offer better security features for sensitive data.
Summary: Cookies are useful when you need to send data to the server automatically, like session management.
Summary: LocalStorage is more efficient for frequent read/write operations.
Summary: Cookies offer more control over where they are valid, while LocalStorage is available across the entire domain.
| Feature | LocalStorage | Cookies |
|---|---|---|
| Capacity | 5-10MB | 4KB |
| Expiration | Persistent until manually cleared | Can expire based on max-age or expires |
| Accessibility | Client-side (JavaScript only) | Accessible to both client-side and server-side |
| Security | Vulnerable to XSS | Can be secured with HttpOnly and Secure flags |
| Automatic Server Transmission | Not automatically sent to server | Automatically sent with every HTTP request |
| Use Cases | Storing non-sensitive, client-side data | Storing session data, authentication tokens |
| Data Scope | Domain-wide | Can be restricted to specific paths/domains |