Lưu JWT token ở đâu là best practice đối với một Frontend developer? Cùng phân tích và đưa ra câu trả lời trong bài viết này nhé!

JWT token thì đối với anh em Front-end chắc cũng đã quá quen thuộc rồi. Khi làm trong dự án chắc hẳn làm phần authentication sau khi login anh em sẽ thấy bên Back-end sẽ trả về hai loại token là Access token và Refresh token đúng không nào. Vậy trước hết chúng ta cùng tìm hiểu Access token và Refresh token thực chất là gì.

  • Access tokens thường là các JWT Tokens có thời gian tồn tại ngắn, được tạo bởi server với các key bảo mật riêng và được đính kèm trong mỗi request HTTP đến server để xác thực request đó.
  • Refresh tokens thường là các chuỗi có thời gian tồn tại lâu hơn, được lưu trữ trong cơ sở dữ liệu và được sử dụng để lấy một access token mới khi nó hết hạn.


Front-end dev nên lưu Tokens ở đâu.

Thông thường thì anh em thường lưu vào Local Storage hoặc là Cookies đúng không còn Session Storage thì thôi bỏ vì close tab hay browser là đi rồi.

Vậy chúng khác nhau ở chỗ nào anh em cùng so sánh tí nhé.


Local Storage:

Điểm mạnh: Dễ làm ở phía client

  • Nó là pure JavaScript nên chúng ta không phải cài thêm bất cứ thư viện nào cả. Nếu anh em không trực tiếp làm back-end và đang phụ thuộc vào một API của team Back-end trong dự án thì anh em không thể yêu cầu bên BE set cookie cụ thể cho trang web. Nên bên BE bảo là tao chỉ trả về token thôi bên mày muốn làm gì thì làm thì Local Storage là ưu tiên hàng đầu.
  • Lưu token vào local storage thì anh em phải set access token vào header của mỗi request bằng cách thêm: Authorization Bearer ${access_token} vào header. Cái này thì chắc hẳn tất cả anh em đều biết rồi.


Điểm yếu: Nó dễ bị tấn công XSS (Cross Site Scripting). Anh em có thể đọc thêm về xss ở đây: Cross Site Scripting (XSS) | OWASP Foundation


Cookies:

Điểm mạnh:

  • Khi anh em set cookie với httpOnly và secure thì đương nhiên nó không thể truy cập được bằng javascript nên cho dùng hacker tấn công được trang web bằng XSS nhưng cũng sẽ không lấy được access tokens như với localStorage.
  • Khi dùng httpOnly cookie thì về phía client hầu như anh em không phải làm gì cả, không cần phải set access token vào header của mỗi request mà nó sẽ được tự động set trong cookie rồi.


Điểm yếu:

  • Như anh em đã biết thì bộ nhớ lưu trữ của cookie chỉ giới hạn ở mức tối đa là 4kb nên nếu với các tokens có dung lượng lớn thì nhiều khi không thể lưu được vào cookie.
  • Phụ thuộc vào cách viết code từ phía server của anh em back-end, vì nếu bên back-end yêu cầu anh em phải set token vào header thì đương nhiên không thể dùng được cách lưu token vào cookie được. Nói chung là phải thống nhất từ đầu và dựa vào solution của phía back-end còn phía front-end thì ...


Cookies và CSRF Attack

Như vừa phân tích ở trên thì cookie nếu set với httpOnly và secure thì không thể bị hack được bằng XSS nhưng với Cross Site Request Forgery (CSRF) thì sao?


Trước hết CSRF (Cross-Site Request Forgery) attack là một dạng tấn công mà kẻ tấn công tạo ra một yêu cầu giả mạo bằng cách sử dụng quyền truy cập của người dùng đối với một trang web cụ thể, để thực hiện một số hành động không mong muốn trên tài khoản của người dùng đó mà họ không hề hay biết.


Tức là kiểu như anh em vô tình click vào các link lạ hoặc truy cập vào các trang web độc hại có gắn các đoạn script nào đó dùng để thực thi các request xấu dựa trên tài khoản nào đó của anh em mà trước đó đã login trên browser của mình mà không cần xác thực nữa và thực hiện mà không cần sự cho phép của anh em. Vậy nếu anh em bị dính CSRF thì hacker có thể dựa vào tài khoản của anh em để lấy các thông tin cần thiết về.

Đọc thêm về CSRF ở đây: Cross Site Request Forgery (CSRF) | OWASP Foundation


Nhưng dùng cookie thì anh em vẫn có thể tránh được tấn công SCRF bằng cách set thuộc tính sameSite=Strict cho cookie với điều kiện cả Back-end và Front-end phải cùng endpoint. Trong trường hợp BE và FE không same site thì sao? Thì vẫn còn một cách set CORS từ phía BE để chỉ cho phép những site cụ thể nào được phép truy cập vào resource của dự án mà thôi.


Túm lại

Như vậy với những phân tích ở trên thì chắc anh em cũng sẽ biết đâu là cách để lưu token vừa an toàn và bảo mật nhất rồi. Với những anh em Full-stack thì chắc hẳn lưu token bằng cách set httpOnly cookie sẽ là cách nên làm nhất. Còn với anh em thuần Front-end thì mình nghĩ cái này phải phụ thuộc nhiều vào bên Back-end nữa nhưng dù sao anh em cũng sẽ biết thêm một cách lưu token bảo mật hơn là set vào Local Storage và đôi khi có thể recommend cho team những solution trong tương lai.

==> Bài viết sau mình sẽ hướng dẫn anh em làm một luồng login chi tiết từ back-end cho đến front-end với httpOnly cookie bằng Nodejs và Reacts nhé =))


Anh em có thể tham khảo thêm các bài viết: