Cookie là gì?

Web được thiết kế sao cho mọi yêu cầu từ trình duyệt web đến một trang web đều tách biệt. Theo thiết kế, web không có "bộ nhớ". Mỗi khi bạn mở một trang web, trang web bạn đang truy cập sẽ không thể nhớ thông tin từ phiên trước. Điều này giúp web hoạt động hiệu quả vì không cần cơ chế theo dõi các yêu cầu và phản hồi.

Nhưng bản chất hay quên của web cũng gây ra một vấn đề. Ví dụ: làm cách nào để giỏ hàng hoạt động nếu trang web bạn đang truy cập không thể nhớ những gì bạn vừa thêm vào giỏ hàng?

Cookie được phát minh để giải quyết vấn đề đó.

Cookie giúp các trang web ghi nhớ thông tin

Khi bạn truy cập một trang trên trang web, trình duyệt web sẽ gửi yêu cầu đến máy chủ của trang web để lấy các tài nguyên có trên trang, chẳng hạn như HTML, CSS, JavaScript hoặc hình ảnh.

Trình duyệt web và trang web tương tác với nhau bằng cách tuân theo giao thức HTTP. Đây là một bộ quy tắc chuẩn hoá để giao tiếp.

Để phản hồi một yêu cầu HTTP về một tài nguyên, máy chủ trang web có thể thêm thông tin bổ sung được gọi là tiêu đề cùng với chính tài nguyên đó. Tiêu đề Set-Cookie đi kèm với phản hồi HTTP sẽ hướng dẫn trình duyệt của bạn lưu trữ một số văn bản: tên và giá trị. Đây được gọi là cookie. Ví dụ: tiêu đề phản hồi Set-Cookie: cat=tabby yêu cầu trình duyệt lưu trữ một cookie có tên "cat" và giá trị "tabby".

Sau khi cookie đó được đặt, các yêu cầu tiếp theo từ trình duyệt của bạn đến trang web sẽ bao gồm tiêu đề Cookie: cat=tabby. Máy chủ của trang web có thể truy cập vào cookie từ tiêu đề yêu cầu và sử dụng giá trị đó.

Cách hoạt động của cookie: từng bước

Hãy tưởng tượng bạn truy cập vào trang web cats.example. Trang web này muốn cho bạn xem một hình ảnh ngẫu nhiên về mèo và lưu giữ hồ sơ về chú mèo đã được hiển thị cho bạn.

Các bước sau đây giải thích cách thực hiện việc đó bằng cookie.

1. Trình duyệt yêu cầu một tệp

Bạn truy cập vào trang chủ của trang web cats.example.

Sau khi trình duyệt xử lý HTML của trang chủ, trình duyệt sẽ yêu cầu các tệp trên trang, bao gồm cả cat.jpg từ cats.example.

Yêu cầu HTTP đến https://cats.example/cat.jpg

2. Máy chủ trang web phản hồi

Máy chủ tại cats.example phản hồi bằng tệp hình ảnh cat.jpg.

Khi phản hồi, máy chủ sẽ thêm một tiêu đề: Set-Cookie: cat=tabby.

Phản hồi HTTP từ https://cats.example/cat.jpg, có tiêu đề Set-Cookie: cat=tabby

3. Trình duyệt nhận được phản hồi

Trình duyệt của bạn sẽ nhận được tệp hình ảnh và xử lý tiêu đề Set-Cookie: cat=tabby đi kèm.

Một cookie được lưu trữ: tên cat, giá trị tabby.

Mèo cookie=mèo mướp trong trình duyệt web trên máy tính xách tay.

4. Trình duyệt đưa ra các yêu cầu bổ sung

Kể từ bây giờ, trình duyệt của bạn sẽ bao gồm tiêu đề Cookie: cat=tabby trong các yêu cầu đến cats.example.

Yêu cầu HTTP đến https://cats.example/cat.jpg, có tiêu đề Cookie: cat=tabby

Khi máy chủ web cats.example nhận được một yêu cầu, máy chủ này có thể xử lý cookie và làm bất cứ điều gì nó muốn với giá trị đó, chẳng hạn như đảm bảo rằng nó không gửi lại cho bạn hình ảnh về cùng một chú mèo mướp.

Sau đây là toàn bộ quy trình về cookie:

  1. Trình duyệt của bạn yêu cầu một tệp từ máy chủ của một trang web.
  2. Máy chủ có thể thêm một tiêu đề, chẳng hạn như Set-Cookie: cat=tabby, vào tệp mà máy chủ gửi để phản hồi yêu cầu.
  3. Khi nhận được phản hồi, trình duyệt của bạn sẽ lưu trữ cookie.
  4. Với mỗi yêu cầu tiếp theo, trình duyệt của bạn sẽ gửi cookie đến máy chủ trong tiêu đề Cookie: cat=tabby.


Sơ đồ trình tự cho thấy các yêu cầu và phản hồi giữa một trình duyệt web, cats.example và cats.example, cho thấy cách cookie được đặt và gửi.

Truy cập vào cookie bằng JavaScript

Ví dụ trước sử dụng tiêu đề phản hồi Set-Cookie để đặt cookie.

Bạn cũng có thể tạo cookie bằng JavaScript bằng phương thức document.cookie.

Hãy thử bản minh hoạ: javascript-cookie.glitch.me.

Tìm hiểu thêm: Tài liệu: thuộc tính cookie.

Tại sao chúng tôi cần cookie?

Năm 1994, kỹ sư Lou Montulli làm việc tại công ty phần mềm Netscape. Công ty này sau đó đã xây dựng trình duyệt web phổ biến nhất vào giữa những năm 1990. Trong khi đó, một tập đoàn viễn thông là MCI đang cố gắng xây dựng một giỏ hàng cho một trong những cửa hàng trực tuyến đầu tiên trên thế giới. MCI đã liên hệ với Montulli để giải thích vấn đề của họ. Montulli đã phản hồi bằng cách thêm một tính năng vào HTTP, cho phép một trang web lưu trữ một lượng nhỏ văn bản trên trình duyệt web của người dùng, một tên và một giá trị: chẳng hạn như cart-id=123. Ông gọi đó là "cookie", vì vào thời đó, các lập trình viên dùng từ "cookie thần kỳ" cho một phần nhỏ thông tin bổ sung đi kèm với dữ liệu liên lạc.

Montulli hoàn thành công việc về cookie HTTP trong vòng chưa đầy một tuần. Ông không hề biết rằng cookie sẽ trở thành yếu tố cơ bản đối với các tính năng quan trọng của nền tảng web, bao gồm cả quảng cáo, đăng nhập, thanh toán và phát hiện hành vi gian lận. Cookie là một công nghệ có vẻ đơn giản nhưng lại có những tác dụng phụ sâu rộng.

Mục đích sử dụng cookie

Cookie cho phép trình duyệt lưu trữ một lượng nhỏ thông tin về người dùng, để "ghi nhớ" một nội dung nào đó trên nhiều yêu cầu. Cookie có nhiều mục đích sử dụng:

  • Quản lý phiên
    Cho phép một trang web nhận dạng người dùng, ví dụ: duy trì trạng thái đã đăng nhập trên các trang khác nhau.
  • Cá nhân hoá
    Lưu trữ các lựa chọn ưu tiên của người dùng, chẳng hạn như ngôn ngữ, giao diện hoặc các mục đã xem gần đây, để tuỳ chỉnh trải nghiệm trên trang web.
  • Theo dõi
    Trước đây, cookie được dùng để theo dõi hành vi của người dùng trên các trang web, cho quảng cáo được nhắm mục tiêu và các trường hợp sử dụng khác.

Cookie chủ yếu được dùng cho giá trị nhận dạng, thay vì lưu trữ thông tin trực tiếp.

Ví dụ: cookie cho giỏ hàng của bạn tại một cửa hàng thú cưng trực tuyến sẽ không liệt kê các sản phẩm, mà thay vào đó cung cấp một mã nhận dạng tài khoản cho phép cửa hàng thú cưng tra cứu những mặt hàng trong giỏ hàng của bạn trong bộ nhớ dữ liệu phía máy chủ.

Một yêu cầu gửi đến máy chủ của cửa hàng thú cưng có thể bao gồm một tiêu đề cookie như sau:

Cookie: _cart=CART1.2.34567890.123456789

Sau đó, máy chủ có thể tra cứu tài khoản _cart trong kho dữ liệu của mình và đưa ra các thông tin khác về yêu cầu.

Tìm hiểu thêm