Как создать Cookies?

Создание Cookies в браузере

Cookies — это механизм хранения данных на клиенте, которые автоматически отправляются на сервер с каждым запросом. Есть несколько способов создавать и управлять cookies.

Создание cookie через document.cookie

Самый простой способ — присвоить значение document.cookie:

// Создание простой cookie
document.cookie = "username=John";

// Создание cookie с параметрами
document.cookie = "username=John; path=/; max-age=3600";

// Cookie с датой истечения
const expiryDate = new Date();
expiryDate.setTime(expiryDate.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 дней
document.cookie = `username=John; expires=${expiryDate.toUTCString()}; path=/`;

Параметры cookie

// Все доступные параметры
document.cookie = `
  name=value;
  max-age=3600;           // Время жизни в секундах (приоритет выше expires)
  expires=Wed, 09 Jun 2026 10:00:00 UTC;  // Дата истечения
  path=/;                 // Путь (по умолчанию текущий путь)
  domain=.example.com;    // Домен (должен быть текущим или родительским)
  secure;                 // Только HTTPS
  samesite=Strict;        // CSRF защита (Strict, Lax, None)
`;

Практические примеры

// Функция для создания cookie
function setCookie(name, value, options = {}) {
  let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
  
  for (let key in options) {
    if (options[key]) {
      cookieString += `; ${key}`;
      
      // Для параметров со значениями
      if (options[key] !== true) {
        cookieString += `=${options[key]}`;
      }
    }
  }
  
  document.cookie = cookieString;
}

// Использование
setCookie('sessionId', 'abc123xyz', {
  maxAge: 3600,
  path: '/',
  secure: true,
  sameSite: 'Strict'
});

setCookie('tracking', 'user123', {
  maxAge: 86400 * 365,  // 1 год
  path: '/'
});

Чтение cookies

// Получить все cookies
function getAllCookies() {
  return document.cookie
    .split('; ')
    .map(cookie => {
      const [name, value] = cookie.split('=');
      return {
        name: decodeURIComponent(name),
        value: decodeURIComponent(value)
      };
    });
}

// Получить значение конкретной cookie
function getCookie(name) {
  const cookies = getAllCookies();
  const cookie = cookies.find(c => c.name === name);
  return cookie ? cookie.value : null;
}

// Использование
console.log(getCookie('sessionId'));
console.log(getAllCookies());

Удаление cookie

// Удалить cookie по имени
function deleteCookie(name) {
  document.cookie = `${name}=; max-age=0; path=/`;
}

// Или через истечение даты
function deleteCookieExpires(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:01 UTC; path=/`;
}

// Использование
deleteCookie('sessionId');

Cookie на сервере (Node.js/Express)

const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());

// Создание cookie на сервере
app.get('/login', (req, res) => {
  res.cookie('sessionId', 'abc123', {
    httpOnly: true,     // Недоступна из JS
    secure: true,       // Только HTTPS
    sameSite: 'strict', // CSRF защита
    maxAge: 3600000     // 1 час
  });
  res.send('Logged in');
});

// Чтение cookie на сервере
app.get('/profile', (req, res) => {
  const sessionId = req.cookies.sessionId;
  res.send(`Session: ${sessionId}`);
});

// Удаление cookie на сервере
app.get('/logout', (req, res) => {
  res.clearCookie('sessionId');
  res.send('Logged out');
});

Cookie на сервере (Python/Flask)

from flask import Flask, request, make_response

app = Flask(__name__)

@app.route('/login')
def login():
    resp = make_response('Logged in')
    
    # Создание cookie
    resp.set_cookie(
        'sessionId',
        value='abc123',
        httponly=True,      # Недоступна из JS
        secure=True,        # Только HTTPS
        samesite='Strict',  # CSRF защита
        max_age=3600        # 1 час
    )
    
    return resp

@app.route('/profile')
def profile():
    # Чтение cookie
    session_id = request.cookies.get('sessionId')
    return f'Session: {session_id}'

@app.route('/logout')
def logout():
    resp = make_response('Logged out')
    # Удаление cookie
    resp.delete_cookie('sessionId')
    return resp

Практический пример: система аутентификации

class AuthManager {
  static setAuthToken(token) {
    document.cookie = `
      authToken=${token};
      max-age=${7 * 24 * 60 * 60};
      path=/;
      samesite=strict
    `;
  }
  
  static getAuthToken() {
    return this.getCookie('authToken');
  }
  
  static isAuthenticated() {
    return !!this.getAuthToken();
  }
  
  static logout() {
    document.cookie = 'authToken=; max-age=0; path=/; samesite=strict';
  }
  
  static getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return null;
  }
}

// Использование
AuthManager.setAuthToken('token123xyz');
console.log(AuthManager.isAuthenticated()); // true
console.log(AuthManager.getAuthToken());    // 'token123xyz'
AuthManager.logout();
console.log(AuthManager.isAuthenticated()); // false

Важные ограничения

1. Размер — максимум 4KB на cookie
2. Количество — браузер хранит около 180 cookies
3. Доступ — cookie доступна только для того домена, который её создал
4. Путь — можно ограничить путём (path=/admin работает только для /admin/*)
5. Безопасность — никогда не храни чувствительные данные в обычных cookies

SameSite в деталях

// SameSite=Strict — отправляется ТОЛЬКО для same-site запросов
document.cookie = 'id=123; sameSite=Strict';

// SameSite=Lax — отправляется для top-level переходов
document.cookie = 'id=123; sameSite=Lax';

// SameSite=None — отправляется везде (нужна флаг Secure)
document.cookie = 'id=123; sameSite=None; secure';

Cookies — важная и потенциально опасная технология. Всегда используй HttpOnly для чувствительных данных и SameSite для защиты от CSRF.