Giao diện người dùng phản ứng và API REST, CSRF

Question

Giao diện người dùng phản ứng với REST API dưới dạng chương trình phụ trợ, ủy quyền của JWT, nhưng cách xử lý phiên? Ví dụ sau khi đăng nhập, tôi nhận được mã thông báo JWT từ REST, nếu tôi lưu nó vào localStorage, tôi dễ bị XSS, nếu tôi lưu nó vào Cookies, cùng một vấn đề chỉ khi không thiết lập HttpOnly, nhưng phản ứng không thể đọc HttpOnly Cookies (tôi cần để đọc cookie để lấy jwt từ nó, và sử dụng jwt này với các yêu cầu còn lại), tôi cũng không đề cập đến vấn đề CSRF, nếu bạn sử dụng REST làm backend, bạn không thể sử dụng CSRF Token.

Kết quả là phản ứng với REST có vẻ như giải pháp tồi và tôi cần suy nghĩ lại kiến ​​trúc của mình, cách thức như thế nào? Có thể cung cấp cho người dùng ứng dụng phản ứng an toàn của bạn những gì có tất cả logic nghiệp vụ được xử lý trên REST API mà không sợ mất dữ liệu của họ?

Cập nhật:

Theo như tôi hiểu, có khả năng để làm điều này:

1. Phản ứng làm cho AJAX cuộc gọi đến API REST
2. Phản ứng được JWT token từ REST của
3. React viết httponly cookie
4. Do phản ứng không thể đọc cookie httponly, chúng tôi sử dụng nó như trong tất cả cuộc gọi REST của chúng tôi, nơi chúng tôi cần xác thực ication
5. REST của các cuộc gọi kiểm tra XMLHttpRequest tiêu đề, một số loại bảo vệ CSRF
6. bên REST của séc cho cookie, đọc JWT từ nó và làm công cụ

Tôi có thiếu kiến ​​thức lý thuyết ở đây là gì, nhưng có vẻ logic và khá an toàn, nhưng tôi vẫn cần câu trả lời cho câu hỏi của tôi và phê duyệt "quy trình làm việc" này.

Answer 1

1. Phản ứng làm cho AJAX cuộc gọi đến API REST

yên tâm, rất nhiều tài nguyên yên tĩnh lib khách hàng sẵn

2. Phản ứng được JWT mã thông báo từ REST

yên tâm, đây là những gì JWT nên làm

3. Phản ứng viết HttpOnly cookie sẽ

Tôi không nghĩ như vậy, Nó không nên làm việc, nhưng phiên không phải là một điều quan trọng, nó sẽ sớm lỗi thời và kiểm tra lại mật khẩu trên các hoạt động chính, ngay cả các tin tặc đã nhận được nó trong một thời gian rất ngắn, bạn có thể liên kết mã thông báo phiên với IP khi người dùng đăng nhập và kiểm tra nó trong apis phụ trợ của bạn.Nếu bạn muốn nó được bảo đảm nhất, chỉ cần giữ thẻ trong bộ nhớ, và làm lại đăng nhập khi mở trang mới hoặc trang làm mới

4. Bởi vì phản ứng không thể đọc HttpOnly cookie, chúng tôi sử dụng nó như nó vốn có trong tất cả các cuộc gọi REST chúng tôi, nơi chúng ta cần xác thực

yên tâm, kiểm tra người sử dụng và cho phép thông qua thẻ đăng nhập, như CSRF bạn có thể đặt thẻ đăng nhập của bạn vào tiêu đề yêu cầu của bạn, và kiểm tra xem nó trong apis phụ trợ của bạn . Bind đăng nhập thẻ để lib yên tĩnh của riêng bạn sẽ giúp bạn tiết kiệm một mã hiệu lô

5. REST của các cuộc gọi kiểm tra XMLHttpRequest tiêu đề, một số loại CSRF bảo vệ kiểm tra bên REST cho Cookie là gì , đọc JWT từ nó và làm các công cụ

đảm bảo, như hầu hết mọi người. Ngoài ra, ràng buộc CSRF token để lib yên tĩnh của riêng bạn sẽ giúp bạn tiết kiệm một mã hiệu lô

sử dụng sử dụng thẻ trong phần đầu https://www.npmjs.com/package/express-jwt-token Authorization JWT < jwt token >

sử dụng CSRF thẻ trong phần đầu https://github.com/expressjs/csurf req.headers['csrf-token'] - the CSRF-Token HTTP request header.

yên tĩnh client https://github.com/cujojs/rest

phản ứng với jwt https://github.com/joshgeller/react-redux-jwt-auth-example

Answer 2

Máy chủ của bạn có thể đặt trực tiếp cookie JWT làm phản hồi cho yêu cầu đăng nhập.

Máy chủ phản hồi POST /login với Set-Cookie: JWT=xxxxxx. Cookie đó chỉ là http và do đó không dễ bị tổn thương đối với XSS và sẽ được tự động đưa vào tất cả các yêu cầu tìm nạp từ ứng dụng khách (miễn là bạn sử dụng withCredentials: true).

CSRF được giảm nhẹ như bạn đã đề cập, xem OWASP cho details.