Hướng Dẫn Cookie trong JavaScript: Cách Thiết Lập, Lấy và Quản Lý Cookie An Toàn

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

Trong phát triển web sử dụng JavaScript, cookie được sử dụng rộng rãi như một cơ chế quan trọng để lưu trữ thông tin liên quan đến người dùng.
Ví dụ, chúng thường được dùng để duy trì phiên đăng nhập hoặc lưu trữ dữ liệu giỏ hàng, giúp cải thiện đáng kể sự tiện lợi cho người dùng.

Tuy nhiên, đối với người mới bắt đầu, các khái niệm như “Cookie là gì?” hay “Làm sao có thể thao tác cookie bằng JavaScript?” có thể khó hiểu.

Trong bài viết này, chúng tôi cung cấp giải thích chi tiết về việc xử lý cookie bằng JavaScript, từ các khái niệm cơ bản đến cách sử dụng nâng cao.
Với các ví dụ mã thực tế, hướng dẫn này được thiết kế để hữu ích cho cả người mới bắt đầu và các nhà phát triển trung cấp.

2. Cookie là gì?

Khái niệm cơ bản về Cookie

Cookie là một mẩu dữ liệu nhỏ được lưu trữ trong trình duyệt web.
Nó chủ yếu được sử dụng cho các mục đích sau:

• Lưu trữ thông tin người dùng nhập vào trên website (ví dụ: thông tin đăng nhập).
• Ghi lại hành vi của khách truy cập cho mục đích marketing và phân tích.
• Bảo tồn các cài đặt cấu hình (ví dụ: ngôn ngữ ưu tiên hoặc giao diện) để cải thiện trải nghiệm người dùng.

Cách hoạt động của Cookie

Cookie được tạo thành từ cặp khóa-giá trị và được lưu dưới định dạng sau:

name=value; expires=Wed, 31 Dec 2025 23:59:59 GMT; path=/

Trong ví dụ này, khóa name được gán giá trị value, cùng với ngày hết hạn và đường dẫn được chỉ định.

Các thành phần chính của một Cookie

1. Tên và Giá trị (name=value) – Thông tin cơ bản của cookie.
2. Ngày hết hạn (expires hoặc max-age) – Xác định thời gian cookie còn hiệu lực.
3. Path – Xác định thư mục hoặc các trang mà cookie có thể truy cập.
4. Thuộc tính Secure – Đảm bảo cookie chỉ được gửi qua kết nối HTTPS.
5. Thuộc tính SameSite – Giúp bảo vệ trước các cuộc tấn công cross-site request.

Các cài đặt linh hoạt này khiến cookie hữu ích trong việc nâng cao trải nghiệm người dùng đồng thời tăng cường bảo mật.

3. Các thao tác cơ bản với Cookie trong JavaScript

Trong JavaScript, cookie được thao tác thông qua thuộc tính document.cookie.
Phần này giới thiệu các thao tác cơ bản.

Đặt (tạo) một Cookie

Dưới đây là ví dụ về cách tạo một cookie mới.

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Các điểm quan trọng:

• username=John : Xác định khóa và giá trị.
• expires : Đặt ngày hết hạn. Nếu bỏ qua, cookie sẽ bị xóa khi trình duyệt đóng.
• path=/ : Làm cho cookie khả dụng trên toàn bộ site.

Lấy (đọc) Cookie

Tất cả cookie có thể được lấy như sau:

console.log(document.cookie);

Ví dụ đầu ra:

username=John; theme=dark; lang=ja

Vì nhiều cookie được ngăn cách bằng dấu chấm phẩy (;), bạn cần tách chuỗi khi xử lý từng giá trị riêng lẻ.

Xóa một Cookie

Để xóa một cookie, đặt ngày hết hạn của nó về một ngày trong quá khứ.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Đoạn mã này sẽ xóa cookie có tên username.

4. Cài đặt thuộc tính của Cookie

Các thuộc tính của cookie đóng vai trò quan trọng trong bảo mật và kiểm soát thời gian hết hạn.

Đặt ngày hết hạn

1. Sử dụng thuộc tính expires (dựa trên ngày)

   document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
   

2. Sử dụng thuộc tính max-age (dựa trên giây)

   document.cookie = "username=John; max-age=3600; path=/";
   

Cấu hình này sẽ tự động xóa cookie sau một giờ.

Các thuộc tính bảo mật

1. Thuộc tính secure (chỉ HTTPS)

   document.cookie = "username=John; secure";
   

2. Thuộc tính SameSite (bảo vệ chống yêu cầu cross-site)

   document.cookie = "username=John; SameSite=Strict";
   

Bằng cách cấu hình đúng các thuộc tính này, bạn có thể cải thiện đáng kể bảo mật và bảo vệ quyền riêng tư.

5. Các ví dụ mã thực tế

Đếm lượt truy cập của người dùng

function getCookie(name) {
  let cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    let parts = cookies[i].split('=');
    if (parts[0] === name) return parts[1];
  }
  return null;
}

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

let visits = getCookie("visits") ? parseInt(getCookie("visits")) : 0;
visits++;
setCookie("visits", visits, 365);
alert("Your number of visits: " + visits);

Mã này lưu số lần người dùng truy cập trong một cookie và cập nhật số đếm mỗi lần truy cập.

6. Sử dụng Thư viện Bên Thứ Ba

Mặc dù cookie có thể được quản lý bằng thuộc tính document.cookie trong JavaScript, việc xử lý chuỗi và thiết lập các thuộc tính có thể trở nên phiền phức. Điều này thường dẫn đến mã dài hơn và giảm khả năng đọc.

Để đơn giản hoá việc quản lý cookie, việc sử dụng thư viện bên thứ ba là một cách tiếp cận phổ biến và hiệu quả. Trong phần này, chúng tôi tập trung vào một trong những thư viện phổ biến nhất: js-cookie.

1. Thư viện js-cookie là gì?

js-cookie là một thư viện JavaScript nhẹ giúp đơn giản hoá các thao tác với cookie. Các tính năng chính của nó bao gồm:

• Simple API : Dễ dàng thiết lập, lấy và xóa cookie.
• Mở rộng và linh hoạt : Hỗ trợ các tùy chọn bảo mật và cấu hình tùy chỉnh.
• Nhẹ : Chỉ khoảng 2 KB sau khi nén.

2. Cài đặt js-cookie

Tải qua CDN

Thêm đoạn mã sau vào thẻ <head> của tệp HTML của bạn.

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

Cài đặt qua npm hoặc yarn

Nếu bạn quản lý các phụ thuộc trong dự án, hãy sử dụng một trong các lệnh sau:

npm install js-cookie

hoặc

yarn add js-cookie

3. Sử dụng Cơ bản

Thiết lập Cookie

Cookies.set('username', 'John', { expires: 7 }); // Valid for 7 days

Lấy Cookie

let username = Cookies.get('username');
console.log(username); // Output: John

Xóa Cookie

Cookies.remove('username');

4. Cài đặt Tùy chọn Nâng cao

Thiết lập thời gian hết hạn và đường dẫn

Cookies.set('session', 'active', { expires: 1, path: '/' });

• expires : Hết hạn sau 1 ngày.
• path : Làm cho cookie khả dụng trên toàn site.

Thêm thuộc tính secure

Cookies.set('secureData', 'secret', { secure: true });

• secure: true : Gửi cookie chỉ qua kết nối HTTPS.

Xác định thuộc tính SameSite

Cookies.set('strictCookie', 'value', { sameSite: 'Strict' });

• sameSite: ‘Strict’ : Ngăn chặn các yêu cầu cross-site và tăng cường bảo mật.

7. Các Xem xét về Bảo mật và Quyền riêng tư

Khi làm việc với cookie trong JavaScript, biện pháp bảo mật và bảo vệ quyền riêng tư là vô cùng quan trọng. Việc xử lý không đúng có thể dẫn đến rò rỉ dữ liệu hoặc truy cập trái phép. Phần này giải thích các thực hành tốt nhất để quản lý cookie một cách an toàn.

1. Biện pháp Bảo mật

Sử dụng HTTPS và Thuộc tính Secure

Thiết lập thuộc tính Secure để cookie chỉ được gửi qua kết nối HTTPS. Điều này giúp ngăn chặn việc chặn dữ liệu và giả mạo.

Ví dụ:

document.cookie = "sessionID=abc123; Secure";

Khi sử dụng thư viện bên thứ ba js-cookie, bạn có thể cấu hình như sau:

Cookies.set('sessionID', 'abc123', { secure: true });

Sử dụng Thuộc tính HttpOnly (Cấu hình phía Máy chủ)

JavaScript không thể thiết lập thuộc tính HttpOnly ở phía client. Tuy nhiên, cấu hình thuộc tính này ở phía máy chủ giúp ngăn chặn các cuộc tấn công XSS (Cross-Site Scripting).

Ví dụ: Cấu hình phía máy chủ (PHP)

setcookie('sessionID', 'abc123', [
    'httponly' => true,
    'secure' => true,
    'samesite' => 'Strict'
]);

Ngăn chặn các cuộc tấn công CSRF bằng thuộc tính SameSite

Để ngăn chặn các cuộc tấn công CSRF (Cross-Site Request Forgery),
cấu hình thuộc tính SameSite.

Ví dụ:

document.cookie = "token=secureToken; SameSite=Strict";

2. Bảo vệ quyền riêng tư

Giới hạn loại thông tin được lưu trữ

Tránh lưu trữ thông tin cá nhân hoặc nhạy cảm (như mật khẩu) trong cookie.
Thay vào đó, lưu các định danh ẩn danh như ID phiên và xác thực chúng ở phía máy chủ.

Ví dụ: Sử dụng một session ID

Cookies.set('sessionID', 'randomString123', { secure: true, httpOnly: true });

Tuân thủ GDPR và các quy định về quyền riêng tư

Do các quy định như GDPR (General Data Protection Regulation) ở EU
và Đạo luật Bảo vệ Thông tin Cá nhân của Nhật Bản,
các yêu cầu sau áp dụng khi sử dụng cookie:

1. Yêu cầu đồng ý bắt buộc Người dùng phải được thông báo về mục đích sử dụng cookie và cung cấp sự đồng ý rõ ràng.
2. Cung cấp tùy chọn đồng ý và từ chối Người dùng phải có khả năng từ chối các cookie không thiết yếu.

Ví dụ: Banner đồng ý cookie (JavaScript)

if (!Cookies.get('cookieConsent')) {
  let consent = confirm('This site uses cookies. Do you allow cookies?');
  if (consent) {
    Cookies.set('cookieConsent', 'true', { expires: 365 });
  }
}

8. Cách kiểm tra Cookie trong Trình duyệt của Bạn

Khi thiết lập, truy xuất hoặc xóa cookie bằng JavaScript,
bạn có thể xác minh hành vi của chúng bằng công cụ phát triển của trình duyệt.
Phần này giải thích cách kiểm tra cookie trong các trình duyệt chính.

1. Kiểm tra Cookie trong Google Chrome

Mở Công cụ Phát triển

1. Nhấp chuột phải vào trang và chọn “Inspect” hoặc “Inspect Element” .
2. Hoặc nhấn F12 hoặc Ctrl + Shift + I (trên Mac: Cmd + Opt + I ).

Các bước để xem Cookie

1. Chọn tab “Application” trong công cụ phát triển.
2. Từ menu bên trái, nhấp “Storage” → “Cookies” .
3. Chọn miền mục tiêu từ danh sách.

Xem chi tiết Cookie

Cookie cho trang đã chọn được hiển thị dưới dạng bảng.
Mỗi cột đại diện cho các thông tin sau:

Chỉnh sửa và Xóa Cookie

• Edit : Nhấp đúp vào một hàng để sửa giá trị.
• Delete : Chọn một hàng và nhấn phím Delete, hoặc nhấp chuột phải và chọn Delete .

2. Kiểm tra Cookie trong Firefox

Mở Công cụ Phát triển

1. Nhấp chuột phải vào trang và chọn “Inspect” .
2. Hoặc nhấn F12 hoặc Ctrl + Shift + I .

Xem Cookie

1. Chọn tab “Storage”.
2. Nhấp “Cookies” từ menu bên trái.
3. Chọn trang mục tiêu từ các miền hiển thị.

Chỉnh sửa và Xóa

Giống như Chrome, bạn có thể chỉnh sửa trực tiếp giá trị hoặc xóa cookie.

3. Kiểm tra Cookie trong Safari (cho người dùng Mac)

Bật Công cụ Phát triển

1. Mở “Settings” từ menu Safari.
2. Chọn tab “Advanced” và đánh dấu “Show Develop menu in menu bar” .

Mở Công cụ Phát triển

1. Nhấp chuột phải vào trang và chọn “Inspect Element” .
2. Hoặc nhấn Cmd + Opt + I .

Xem Cookie

1. Chọn tab “Storage”.
2. Chọn “Cookies” để xem nội dung.

4. Kiểm tra Cookie qua Console

Cookie cũng có thể được kiểm tra bằng console JavaScript.

Ví dụ: Hiển thị tất cả cookie

console.log(document.cookie);

Ví dụ: Lấy một cookie cụ thể

let cookies = document.cookie.split('; ');
let username = cookies.find(row => row.startsWith('username=')).split('=')[1];
console.log(username);

Cookie cũng có thể được thêm hoặc xóa trực tiếp từ console.

9. Tóm tắt

Trong các phần trước, chúng tôi đã đề cập đến xử lý cookie trong JavaScript
từ các khái niệm cơ bản đến các trường hợp sử dụng nâng cao.
Phần này sẽ xem lại các điểm chính và tóm tắt các thực hành tốt nhất thực tế.

1. Kiến thức cơ bản về Cookie và cách chúng hoạt động

Cookie là một cơ chế lưu trữ các đoạn dữ liệu nhỏ trong trình duyệt web.

• Trường hợp sử dụng : Duy trì phiên đăng nhập, quản lý tùy chọn người dùng và theo dõi hành vi.
• Thành phần : Cặp khóa‑giá trị, cài đặt thời gian hết hạn, đường dẫn, miền và các thuộc tính bảo mật.

Hiểu được những nền tảng này cho phép bạn linh hoạt áp dụng cookie vào các kịch bản khác nhau.

2. Các thao tác với Cookie trong JavaScript

Trong JavaScript, bạn có thể dễ dàng đặt, lấy và xóa cookie bằng thuộc tính document.cookie.

Ví dụ: Đặt một cookie

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Ví dụ: Lấy cookie

console.log(document.cookie);

Ví dụ: Xóa một cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Các ví dụ này chỉ bao quát các kiến thức cơ bản, nhưng đối với các yêu cầu phức tạp hơn, nên sử dụng thư viện bên thứ ba.

3. Sử dụng Thư viện Bên Thứ Ba

Các thư viện làm cho việc quản lý cookie trở nên dễ dàng và dễ đọc hơn rất nhiều.

Ví dụ sử dụng js-cookie

Cookies.set('username', 'John', { expires: 7, secure: true });
let username = Cookies.get('username');
Cookies.remove('username');

Ưu điểm:

• Mã ngắn gọn và trực quan.
• Dễ dàng cấu hình các thuộc tính và tùy chọn bảo mật.
• Tương thích mượt mà trên nhiều trình duyệt.

4. Các biện pháp Bảo mật và Quyền riêng tư

Cookie luôn phải được sử dụng cùng với cài đặt bảo mật và bảo vệ quyền riêng tư thích hợp.

Các thực hành bảo mật quan trọng

1. Sử dụng HTTPS và thuộc tính Secure : Ngăn chặn việc chặn dữ liệu.
2. Đặt thuộc tính SameSite : Bảo vệ khỏi các cuộc tấn công CSRF.
3. Sử dụng thuộc tính HttpOnly : Giảm thiểu các cuộc tấn công XSS (cấu hình phía máy chủ).

Các thực hành quyền riêng tư quan trọng

1. Không lưu trữ thông tin cá nhân : Chỉ lưu trữ ID hoặc token và quản lý dữ liệu thực tế trên máy chủ.
2. Tuân thủ các quy định : Triển khai quản lý đồng ý theo GDPR và các luật liên quan.
3. Mã hoá dữ liệu nhạy cảm : Luôn mã hoá thông tin quan trọng trước khi lưu trữ.

5. Xác minh và Gỡ lỗi Cookie

Sử dụng các công cụ dành cho nhà phát triển giúp bạn xác minh và gỡ lỗi hành vi của cookie một cách hiệu quả.

Công cụ riêng cho từng trình duyệt

• Google Chrome : Giao diện chức năng cao và thân thiện với người dùng.
• Firefox : Các tính năng quản lý lưu trữ nâng cao.
• Edge và Safari : Được quản lý bằng các bước tương tự như Chrome.

Sử dụng console JavaScript

console.log(document.cookie);

Điều này cho phép kiểm tra và gỡ lỗi nhanh chóng.

6. Thực hành Tốt nhất Thực tế

Dưới đây là các khuyến nghị cụ thể để quản lý cookie an toàn và hiệu quả:

1. Chỉ lưu trữ dữ liệu tối thiểu cần thiết Tránh các cookie không cần thiết và quản lý dữ liệu quan trọng trên máy chủ.
2. Đặt thời gian hết hạn phù hợp Sử dụng thời gian hết hạn ngắn và xóa các cookie không dùng.
3. Tăng cường cài đặt bảo mật Luôn cấu hình các thuộc tính Secure, HttpOnly và SameSite.
4. Thu thập sự đồng ý của người dùng Triển khai banner đồng ý tuân thủ GDPR và các quy định quyền riêng tư khác.
5. Sử dụng công cụ gỡ lỗi một cách hiệu quả Thường xuyên kiểm tra cookie bằng công cụ dành cho nhà phát triển của trình duyệt.
6. Tận dụng các thư viện bên thứ ba Sử dụng các thư viện như js-cookie để đơn giản hoá việc quản lý và cải thiện khả năng đọc mã.

Kết luận

Bài viết này đã cung cấp một cái nhìn tổng quan toàn diện về quản lý cookie trong JavaScript, bao quát mọi thứ từ việc sử dụng cơ bản đến các cân nhắc về bảo mật và quyền riêng tư.

Những điểm chính cần nhớ

• Những nguyên tắc cơ bản về cách hoạt động của cookie và khi nào nên sử dụng chúng.
• Cách thiết lập, truy xuất và xóa cookie bằng JavaScript.
• Tầm quan trọng của các biện pháp bảo mật và tuân thủ pháp luật.
• Quy trình làm việc hiệu quả bằng cách sử dụng công cụ phát triển và các thư viện bên thứ ba.

Các bước tiếp theo
Sử dụng hướng dẫn này làm tài liệu tham khảo để triển khai quản lý cookie trong các dự án thực tế.
Để duy trì bảo mật và tuân thủ các quy định bảo mật ngày càng phát triển,
việc học liên tục và đánh giá định kỳ các thực tiễn tốt nhất là cần thiết.

Tiếp tục tích hợp các công nghệ và kiến thức mới để xây dựng các ứng dụng an toàn hơn,
và thân thiện hơn với người dùng.