123 lines
7.1 KiB
Markdown
123 lines
7.1 KiB
Markdown
---
|
||
sidebar_position: 7
|
||
---
|
||
|
||
# Cookie
|
||
|
||
Файлы **cookie** используются веб-сайтами для хранения небольших объемов данных прямо в браузере пользователя. Они играют важную роль в авторизации, отслеживании сессий, персонализации и аналитике.
|
||
|
||
- **Cookie** – это простой способ хранить данные между запросами.
|
||
- **JavaScript** может управлять ими через `document.cookie`.
|
||
- **Используются** для авторизации, сессий, настроек, трекинга.
|
||
- **Осторожно:** Если не защищены (`Secure`, `HttpOnly`, `SameSite`), могут быть украдены через XSS.
|
||
|
||
## Как работают cookie в браузере?
|
||
Когда вы заходите на сайт, сервер может отправить HTTP-заголовок `Set-Cookie`, и браузер сохранит эту информацию. При последующих запросах к тому же сайту браузер автоматически отправляет cookie обратно на сервер в заголовке `Cookie`.
|
||
```http request
|
||
HTTP/1.1 200 OK
|
||
Set-Cookie: session_id=abc123; Path=/; Expires=Wed, 30 May 2025 12:00:00 GMT
|
||
```
|
||
|
||
Теперь при каждом запросе к этому домену браузер будет отправлять:
|
||
|
||
```http request
|
||
GET /profile HTTP/1.1
|
||
Cookie: session_id=abc123
|
||
```
|
||
|
||
## JavaScript и работа с cookie
|
||
JavaScript может **читать, создавать, изменять и удалять** cookie через свойство `document.cookie`.
|
||
|
||
📌 Чтение всех cookie
|
||
```js
|
||
console.log(document.cookie);
|
||
// Выведет строку вида "name=value; name2=value2"
|
||
```
|
||
📌 Установка новой cookie
|
||
```js
|
||
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
|
||
```
|
||
**Параметры:**
|
||
- `expires` – срок действия (если не указать, cookie удалится при закрытии браузера).
|
||
- `max-age` – время жизни в секундах (альтернатива `expires`).
|
||
- `path=/` – на каких страницах доступна cookie (по умолчанию текущий путь).
|
||
- `domain` – для какого домена (по умолчанию текущий).
|
||
- `secure` – передавать **только по HTTPS**.
|
||
- Cookie отправляется **только через зашифрованное** соединение (HTTPS).
|
||
- При HTTP-запросах cookie **не будет отправлено**.
|
||
- 🔥 Чтобы защитить cookie от перехвата через незашифрованные соединения (MITM-атаки).
|
||
- `HttpOnly` - Запрещает доступ к cookie из **JavaScript**
|
||
- Cookie доступно **только серверу** (через HTTP-заголовки).
|
||
- JS-код не сможет прочитать, изменить или удалить cookie.
|
||
- 🔥 Чтобы защитить cookie от кражи при **XSS-атаках**.
|
||
- `samesite` – защита от CSRF (`Strict`, `Lax`, `None`).
|
||
- `Strict` — cookie **отправляется только** при переходе в пределах одного сайта.
|
||
- `Lax` — cookie отправляется при **некоторых межсайтовых переходах**, например, при переходе по ссылке (GET-запросы).
|
||
- `None` — cookie отправляется всегда, даже с других сайтов, но **требует флага** `Secure`.
|
||
- 🔥 Чтобы предотвратить **CSRF-атаки** — когда сайт пытается заставить пользователя отправить запрос на другой домен, используя его авторизационные cookie.
|
||
|
||
| Параметр | Назначение | Защищает от |
|
||
|------------|--------------------------------------------|------------------------|
|
||
| `Secure` | Отправлять cookie только по HTTPS | Перехват cookie (MITM) |
|
||
| `HttpOnly` | Запретить доступ из JavaScript | XSS |
|
||
| `SameSite` | Контролировать межсайтовую отправку cookie | CSRF |
|
||
|
||
💡 Пример безопасного cookie
|
||
```http request
|
||
Set-Cookie: sessionId=abc123; Secure; HttpOnly; SameSite=Strict
|
||
```
|
||
Такой cookie:
|
||
- Не будет передан по HTTP,
|
||
- Не доступен через JS,
|
||
- Не будет отправлен при запросах с других сайтов.
|
||
|
||
📌 Изменение cookie
|
||
Просто перезапишите её с тем же именем:
|
||
```js
|
||
document.cookie = "username=Anna; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
|
||
```
|
||
|
||
📌 Удаление cookie
|
||
Установите `**expires**` в прошлое:
|
||
```js
|
||
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
|
||
```
|
||
|
||
## Примеры использования cookie в JS
|
||
|
||
🔹 Сохранение авторизации
|
||
```js
|
||
// После успешного входа
|
||
document.cookie = `auth_token=${token}; max-age=3600; path=/; secure`;
|
||
```
|
||
🔹 Запоминание пользовательских настроек
|
||
```js
|
||
// Сохраняем тему
|
||
document.cookie = "theme=dark; max-age=2592000"; // 30 дней
|
||
|
||
// Читаем тему
|
||
const cookies = document.cookie.split(';').map(c => c.trim());
|
||
const themeCookie = cookies.find(c => c.startsWith('theme='));
|
||
const theme = themeCookie ? themeCookie.split('=')[1] : 'light';
|
||
```
|
||
🔹 Корзина покупок
|
||
```js
|
||
// Добавление товара
|
||
let cart = JSON.parse(localStorage.getItem('cart') || '[]');
|
||
cart.push({ id: 123, name: "Phone" });
|
||
document.cookie = `cart=${JSON.stringify(cart)}; max-age=86400`;
|
||
```
|
||
|
||
## Ограничения cookie
|
||
- **Размер:** Обычно до **4 КБ** на cookie.
|
||
- **Количество:** Зависит от браузера (~50 на домен).
|
||
- **Доступ:** Только для своего домена (если не указан `domain`).
|
||
- **Безопасность:** Уязвимы к XSS, если не стоит `HttpOnly` (тогда JS не сможет читать).
|
||
|
||
## Альтернативы cookie
|
||
- **localStorage / sessionStorage** – больше места (5-10 МБ), но не отправляются на сервер автоматически.
|
||
- **JWT (JSON Web Tokens)** – для авторизации без куки.
|
||
- **IndexedDB** – для хранения больших объемов данных.
|
||
|
||
🚀 **_Источник: DeepSeek_** \
|
||
🚀 **Источник: [Cookies. Все, что нужно знать о Cookies: Настройка, Использование и Безопасность](https://www.youtube.com/watch?v=Xqc3T9QtqvI)** |