Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách tạo Session Cookie (Cookie chỉ tồn tại trong phiên) bằng JavaScript

Session Cookie (Cookie phiên) là cookie không có ngày hết hạn (expires/max-age). Nó tự động bị xóa khi người dùng đóng trình duyệt (hoặc tab cuối cùng của domain đó).

Cách tạo Session Cookie (Đúng chuẩn)

KHÔNG đặt thuộc tính expires hoặc max-age.

// Cú pháp cơ bản
document.cookie = "cookieName=cookieValue; path=/; SameSite=Lax";

// Ví dụ: Lưu ngôn ngữ người dùng cho phiên hiện tại
document.cookie = "lang=vi; path=/; SameSite=Lax; Secure"; // Secure: chỉ gửi qua HTTPS

❌ SAI LẦM THƯỜNG GẶP

// SAI: Đặt expires vào tương lai -> thành Persistent Cookie (Lưu lâu)
document.cookie = "sessionId=abc123; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// SAI: Xóa expires (để trống) -> Một số trình duyệt hiểu sai thành session, nhưng KHÔNG CHUẨN.
document.cookie = "sessionId=abc123; expires=; path=/";

Thuộc tính quan trọng cho Cookie an toàn

Thuộc tínhMô tảKhuyên dùng cho Session Cookie
path=/Áp dụng cho toàn bộ domain✅ Bắt buộc
SameSite=LaxBảo vệ CSRF (mặc định hiện đại)✅ Bắt buộc
SecureChỉ gửi qua HTTPS✅ Bắt buộc (Production)
HttpOnlyKhông truy cập bằng JS (document.cookie)✅ Bắt buộc (Set từ Server)
DomainDomain áp dụng (mặc định: host hiện tại)Thường không cần set

Lưu ý quan trọng

  • HttpOnly: Không thể set bằng JavaScript. Phải set từ Server (HTTP Response Header: Set-Cookie: sessionId=abc; HttpOnly; Secure; SameSite=Lax; Path=/). Session cookie nhạy cảm (session ID, token) PHẢI HttpOnly để chống XSS.
  • SameSite=Lax là mặc định hiện đại (Chrome 80+, Firefox, Edge). SameSite=None yêu cầu Secure và cho cross-site request (ít dùng cho session).
  • Kích thước: Mỗi cookie ≤ 4KB. Tổng cookie/domain ≤ ~50-300 (tùy browser).
  • Xóa Session Cookie thủ công (khi logout): Set lại cookie với max-age=0 hoặc expires=Thu, 01 Jan 1970 00:00:00 GMT.

Ví dụ hoàn chỉnh (Client-side JS - Chỉ cho cookie KHÔNG nhạy cảm)

// Set session cookie (ví dụ: cài đặt UI, ngôn ngữ, filter - KHÔNG dùng cho auth token)
function setSessionCookie(name, value, options = {}) {
    const opts = {
        path: "/",
        sameSite: "Lax",
        secure: location.protocol === "https:", // Chỉ set Secure nếu HTTPS
        ...options
    };
    let cookieStr = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    for (const [key, val] of Object.entries(opts)) {
        if (val === true) cookieStr += `; ${key}`;
        else if (val !== false && val !== undefined) cookieStr += `; ${key}=${val}`;
    }
    document.cookie = cookieStr;
}

// Sử dụng
setSessionCookie("theme", "dark");
setSessionCookie("sidebar_open", "true");

// Get cookie
function getCookie(name) {
    const cookies = document.cookie.split("; ");
    for (const c of cookies) {
        const [key, val] = c.split("=");
        if (key === name) return decodeURIComponent(val);
    }
    return null;
}

// Delete cookie (logout)
function deleteCookie(name) {
    document.cookie = `${encodeURIComponent(name)}=; max-age=0; path=/; SameSite=Lax`;
}

Tóm lại: Session Cookie = Cookie KHÔNG CÓ expires/max-age. Tự xóa khi đóng browser. Dùng cho state UI, ngôn ngữ... KHÔNG dùng cho authentication token (phải HttpOnly từ Server). Luôn set path=/; SameSite=Lax; Secure.