Cookie trong lập trình Web — Giải thích chi tiết

1. Cookie là gì?

Trong lập trình web, Cookie là một lượng dữ liệu nhỏ mà website yêu cầu trình duyệt lưu lại trên thiết bị của người dùng. Sau đó, trình duyệt có thể tự động gửi Cookie đó trở lại website trong những lần truy cập/request tiếp theo.

Nói đơn giản:

Cookie = “mẩu ghi nhớ” của website được trình duyệt lưu trên máy bạn.

Ví dụ bạn vào một website, chọn Dark Mode. Website có thể lưu:

id="tm68a8"
theme=dark

Lần sau bạn mở lại website → JavaScript đọc Cookie → biết bạn thích Dark Mode → tự bật Dark Mode.

2. Cookie nằm ở đâu?

Cookie được quản lý bởi trình duyệt như Chrome, Edge, Firefox...

Ví dụ:

id="v1d93j"
Website
   ↓
Chrome
   ↓
Cookie Storage
   ├── theme=dark
   ├── language=vi
   └── consent=yes

Website không trực tiếp tự ý ghi file vào ổ C: của bạn.

Trình duyệt đứng giữa và quản lý Cookie.

3. Cookie hoạt động như thế nào?

Có hai phía:

Server: máy chủ website.
Client: trình duyệt của bạn.

Ví dụ bạn đăng nhập:

id="onar8x"
Bạn
 │
 │ POST /login
 │ username + password
 ↓
Server
 │
 │ xác thực thành công
 │
 │ Set-Cookie: session=ABC123
 ↓
Chrome
 │
 │ lưu Cookie
 ↓
Cookie Storage

Sau đó bạn truy cập:

id="zxxd87"
GET /profile
Cookie: session=ABC123

Server nhìn thấy:

id="riz0s2"
session=ABC123

và hiểu:

"À, đây là phiên đăng nhập của người dùng này."

4. Cookie có thể chứa gì?

Cookie thường chứa các thông tin nhỏ như:

id="dpxh3i"
theme=dark
language=vi
cookie_consent=true
session_id=abc123

Ví dụ:

id="s3sj70"
user=quan
theme=dark
language=vi

Nhưng không nên lưu dữ liệu nhạy cảm trực tiếp trong Cookie, chẳng hạn:

id="l2e8l0"
password=123456
credit_card=...

Đặc biệt:

Cookie không phải nơi để lưu mật khẩu.

5. Cookie có phải file không?

Về mặt khái niệm, bạn có thể hiểu nó như một dạng key-value storage:

id="bygej3"
key        value
-----------------------
theme      dark
language   vi
consent    true

Nhưng trình duyệt quản lý cách lưu trữ bên dưới. Bạn không nên giả định nó là một file .cookie đơn giản nằm đâu đó trên ổ đĩa.

6. Cookie khác LocalStorage như thế nào?

Đây là phần rất quan trọng nếu bạn đang làm website.

Đặc điểm	Cookie	localStorage
Dung lượng	Nhỏ	Lớn hơn nhiều
Tự gửi lên server	✅ Có	❌ Không
JavaScript đọc được	Có, nếu không `HttpOnly`	✅ Có
Dùng lưu đăng nhập	✅ Rất phổ biến	Không lý tưởng
Lưu theme	✅	✅
Lưu ngôn ngữ	✅	✅
Lưu dữ liệu lớn	❌	❌
Có thời hạn	✅	Thường tồn tại đến khi xóa
Gửi theo HTTP request	✅	❌

Ví dụ:

Cookie

id="ezph3p"
document.cookie = "theme=dark; max-age=31536000; path=/";

localStorage

id="7afxj9"
localStorage.setItem("theme", "dark");

Sau đó:

id="uno0p9"
localStorage.getItem("theme");

→

id="2ka2zr"
dark

7. Cookie có phải virus không?

Không.

Cookie bản thân nó chỉ là dữ liệu.

Ví dụ:

id="e8ah72"
language=vi
theme=dark

hoàn toàn bình thường.

Nhưng Cookie có thể được sử dụng trong tracking.

Ví dụ một hệ thống quảng cáo có thể tạo identifier:

id="eghnr4"
tracking_id=8F31A92B

Sau đó dùng nó để nhận diện trình duyệt giữa nhiều lần truy cập.

Vì vậy Cookie có liên quan đến privacy (quyền riêng tư).

8. First-party Cookie và Third-party Cookie

Có hai khái niệm quan trọng.

First-party Cookie

Bạn đang ở:

id="wnjoai"
example.com

và chính:

id="efm59x"
example.com

tạo Cookie.

→ First-party Cookie

Ví dụ:

id="u80ezd"
theme=dark

Website của bạn có thể dùng loại này để nhớ:

Dark/Light Mode
Ngôn ngữ
Trạng thái đăng nhập
Đồng ý Cookie

Third-party Cookie

Bạn đang ở:

id="mkso6y"
example.com

nhưng một dịch vụ bên ngoài có thể liên quan đến Cookie của domain khác.

Ví dụ trước đây các hệ thống quảng cáo/tracking thường sử dụng cơ chế này.

Mục đích có thể là:

id="7yhl0u"
Website A
   ↓
Third-party service
   ↓
tracking identifier

Third-party Cookie đã bị các trình duyệt hiện đại hạn chế mạnh hơn trước vì vấn đề privacy.

9. Cookie có thời hạn

Cookie có thể được thiết lập thời gian sống.

Ví dụ:

id="2faf2y"
theme=dark
Expires=2027-08-08

Hoặc:

id="g9z37t"
Max-Age=31536000

31536000 giây ≈ 1 năm.

Khi hết hạn:

id="xmu3r0"
Cookie
   ↓
expired
   ↓
Browser xóa/không gửi nữa

10. Session Cookie

Có một loại rất thú vị:

Session Cookie

Nó thường không có thời hạn dài được chỉ định.

Ví dụ:

id="rjtj46"
session_id=ABC123

Cookie này thường dùng cho phiên làm việc.

Khái niệm:

id="04moal"
Mở trình duyệt
      ↓
Session bắt đầu
      ↓
Website cấp session ID
      ↓
Bạn sử dụng website
      ↓
Session kết thúc

Tuy nhiên hành vi chính xác phụ thuộc vào cách website và trình duyệt cấu hình session.

11. Cookie bảo mật quan trọng

Cookie có một số thuộc tính cực kỳ quan trọng.

`Secure`

id="78r27w"
Secure

Cookie chỉ được gửi qua HTTPS.

Ví dụ:

id="gb013j"
Set-Cookie: session=ABC123; Secure

Điều này giúp tránh Cookie bị gửi qua kết nối HTTP không mã hóa.

`HttpOnly`

id="0ie7k8"
Set-Cookie: session=ABC123; HttpOnly

Cookie có HttpOnly không thể được JavaScript thông thường đọc bằng document.cookie.

Ví dụ:

id="dd6iws"
document.cookie

sẽ không lấy được Cookie HttpOnly.

Điều này rất hữu ích cho Cookie chứa session identifier.

`SameSite`

Đây là cơ chế giúp kiểm soát Cookie được gửi trong các ngữ cảnh cross-site.

Ví dụ:

id="lyhox5"
SameSite=Strict

hoặc:

id="ljjg2b"
SameSite=Lax

hoặc:

id="6dwxrj"
SameSite=None; Secure

Nó có vai trò quan trọng trong việc giảm một số rủi ro như CSRF (Cross-Site Request Forgery).

12. Ví dụ thực tế cho website

Giả sử bạn có website:

id="vfln5h"
ATCX

Bạn muốn khi người dùng vào lần đầu tiên hiện:

Website này sử dụng Cookie để lưu cài đặt của bạn. Bạn có đồng ý không?

Có thể lưu:

id="ixljoz"
cookie_consent=true

Lần sau:

id="56lx9x"
Browser
   ↓
Cookie: cookie_consent=true
   ↓
Website kiểm tra
   ↓
Đã đồng ý?
   ↓
Có
   ↓
Không hiện banner nữa

JavaScript đơn giản:

document.cookie = "cookie_consent=true; max-age=31536000; path=/";

Kiểm tra:

console.log(document.cookie);

Có thể thấy:

cookie_consent=true

13. Ví dụ kết hợp Dark Mode + Cookie

Bạn có thể lưu:

theme=dark

Khi người dùng chọn Dark:

document.cookie = "theme=dark; max-age=31536000; path=/";

Khi website mở:

const cookies = document.cookie;

if (cookies.includes("theme=dark")) {
    document.documentElement.classList.add("dark");
}

Luồng hoạt động:

Người dùng chọn Dark Mode
          ↓
JavaScript
          ↓
theme=dark
          ↓
Cookie
          ↓
Đóng website
          ↓
Mở lại
          ↓
JavaScript đọc Cookie
          ↓
Dark Mode được khôi phục

Đây chính là một trong những trường hợp Cookie rất hợp lý.

14. Cookie có gửi dữ liệu lên server không?

Có, và đây là điểm khác biệt lớn với localStorage.

Ví dụ browser có:

session_id=ABC123

Khi gửi request đến domain phù hợp:

GET /dashboard
Cookie: session_id=ABC123

Server nhận được:

session_id = ABC123

Trong khi:

localStorage.setItem("theme", "dark");

thì browser không tự động gửi:

theme=dark

mỗi HTTP request.

15. Cookie và đăng nhập

Một hệ thống đăng nhập hiện đại thường không làm:

Cookie:
username=Quan
password=123456

Mà thường là:

Cookie:
session_id=random_value

Server giữ thông tin phiên:

session_id ABC123
       ↓
User ID 58291
       ↓
Logged in

Như vậy browser chỉ giữ một session identifier.

Đây là mô hình quan trọng trong web backend.

16. Cookie có thể bị đánh cắp không?

Có, nếu hệ thống bảo mật kém.

Ví dụ một website có lỗ hổng XSS (Cross-Site Scripting).

Nếu session Cookie không có HttpOnly, JavaScript độc hại có thể tìm cách đọc:

document.cookie

và lấy Cookie mà website cho phép JavaScript truy cập.

Vì vậy Cookie bảo mật thường nên cân nhắc:

Secure
HttpOnly
SameSite=Lax

hoặc chính sách SameSite phù hợp với kiến trúc ứng dụng.

17. Cookie ≠ Cache

Hai cái này rất dễ nhầm.

Cookie

"Lưu thông tin/trạng thái của người dùng"

Ví dụ:

theme=dark
language=vi
session=ABC123

Cache

"Lưu tài nguyên để tải nhanh hơn"

Ví dụ:

style.css
logo.png
app.js

Có thể hình dung:

Cookie → Website nhớ bạn

Cache → Browser nhớ tài nguyên website

18. Cookie ≠ Session ≠ LocalStorage

Ba khái niệm này liên quan nhưng không giống nhau:

Cookie
   ↓
Dữ liệu nhỏ, có thể tự gửi HTTP request

localStorage
   ↓
Kho dữ liệu phía trình duyệt

Session
   ↓
Trạng thái phiên làm việc của người dùng

Một website có thể dùng cả ba.

Ví dụ:

Cookie
└── session_id=ABC123

Server
└── Session ABC123
      ├── user_id = 58291
      └── logged_in = true

localStorage
└── editor_font_size=18

19. Cookie Consent

Nếu website chỉ sử dụng Cookie cần thiết cho chức năng, cách xử lý pháp lý có thể khác với Cookie dùng cho analytics/quảng cáo/tracking.

Đừng hiểu:

"Có Cookie = bắt buộc phải hiện popup xin phép."

Không đơn giản như vậy.

Còn phụ thuộc:

Cookie dùng để làm gì
Dữ liệu nào được lưu
Có tracking hay không
Có bên thứ ba hay không
Người dùng ở quốc gia/khu vực nào
Luật áp dụng cho website

Ví dụ Cookie:

session_id

phục vụ đăng nhập có bản chất khác với:

advertising_tracking_id

20. Nếu website chỉ có Dark Mode thì sao?

Nếu website chỉ cần:

theme=dark
language=vi

thì bạn thậm chí có thể dùng localStorage thay Cookie:

localStorage.setItem("theme", "dark");

và:

localStorage.setItem("language", "vi");

Vì hai dữ liệu này không cần server nhận trong mỗi request.

Ngược lại, nếu bạn cần:

session_id
authentication
server-side preferences

thì Cookie thường phù hợp hơn.

21. Tóm tắt bằng sơ đồ

                    WEBSITE
                       │
             ┌─────────┴─────────┐
             │                   │
         Frontend             Backend
             │                   │
       JavaScript             Server
             │                   │
             └───────┬───────────┘
                     │
                 HTTP Request
                     │
                     ↓
                 BROWSER
                     │
              ┌──────┴──────┐
              │             │
           Cookie       localStorage
              │             │
       Tự gửi HTTP       Không tự gửi
       request phù hợp   lên server

Nhớ ngắn gọn

Cookie là dữ liệu nhỏ do website yêu cầu trình duyệt lưu, dùng để duy trì trạng thái hoặc ghi nhớ một số thông tin; Cookie có thể được trình duyệt tự động gửi lại server trong các request phù hợp.

22. Gợi ý áp dụng cho website Smart Text Counter / File Editor

Nếu website là Smart Text Counter / File Editor, có thể phân chia như sau:

Cookie

Dùng cho:

cookie_consent
session_id       ← nếu có hệ thống tài khoản/server

localStorage

Dùng cho:

theme
language
editor_font_size
editor_settings
last_editor_mode
UI_preferences

Ví dụ:

Browser
│
├── Cookie
│   └── cookie_consent=true
│
└── localStorage
    ├── theme=dark
    ├── language=vi
    ├── font_size=18
    └── editor_mode=advanced

Cách phân chia này giúp tránh dùng Cookie cho những dữ liệu frontend không cần gửi lên server.

Kết luận

Cookie là một thành phần nền tảng của web, đặc biệt quan trọng trong:

Authentication
Session management
User preferences
Consent
Tracking
HTTP state management
Web security

Điểm cốt lõi cần nhớ:

Cookie được trình duyệt lưu.
Cookie có thể được gửi tự động trong HTTP request phù hợp.
Cookie khác localStorage.
Không lưu password trực tiếp trong Cookie.
HttpOnly, Secure, SameSite rất quan trọng đối với bảo mật.
Cookie có thể có thời hạn.
First-party và third-party Cookie có mục đích và vấn đề privacy khác nhau.
Session thường sử dụng Cookie để giữ session identifier.
Dark Mode/ngôn ngữ thường có thể dùng localStorage nếu không cần server.
Cookie Consent và tracking có liên quan đến yêu cầu pháp lý/privacy tùy trường hợp.

👨‍💻 Người thực hiện

ATCX

Smart Text Counter & File Editor được phát triển bởi ATCX.