ReactフロントエンドおよびREST API、CSRF
バックエンドとしてREST APIを使用してフロントエンドに反応しますが、JWTによる認証ですが、セッションの処理方法は？たとえば、ログイン後にRESTからJWTトークンを取得します。localStorageに保存すると、XSSに対して脆弱です。Cookieに保存すると、HttpOnlyを設定していない場合にのみ同じ問題が発生しますが、HttpOnly Cookieを読み取れません（必要です） Cookieを読み取ってJWTを取得し、このJWTを残りの要求で使用します）、CSRFの問題については言及しませんでした。バックエンドとしてRESTを使用する場合、CSRFトークンは使用できません。
その結果、Reactを含むRESTは悪い解決策のように思われ、アーキテクチャを再考する必要があります。データを失うことを恐れることなく、すべてのビジネスロジックをREST API側で処理するセキュアなリアクションアプリケーションをユーザーに提供することは可能ですか？
更新：
私の知る限り、これを行う可能性があります：
- ReactはAJAXをREST APIに呼び出します
- ReactはRESTからJWTトークンを取得します
- Reactはhttponly cookieを書き込みます
- Reactはhttponly cookieを読み取れないため、認証が必要なすべてのREST呼び出しでそのまま使用します
- REST呼び出しは、XMLHttpRequestヘッダーをチェックします。CSRF保護の種類
- CookieのRESTサイドチェック、JWTからの読み取り、その他の処理
ここには理論的な知識はありませんが、論理的で非常に安全に見えますが、質問への回答とこの「ワークフロー」の承認が必要です。
- ReactはAJAXをREST APIに呼び出します
安心、たくさんの安らかなリソースクライアントライブラリが利用可能
- ReactはRESTからJWTトークンを取得します
確かに、これはJWTがすべきことです
- Reactはhttponly cookieを書き込みます
私はそうは思わない、それはうまくいくはずはないが、セッションはそれほど重要なことではない、それはすぐに時代遅れになり、キー操作でパスワードを再チェックする、ハッカーも非常に短い時間でそれを手に入れた、あなたはできるユーザーがログインするときにセッショントークンをIPにバインドし、バックエンドAPIで確認します。最も安全にしたい場合は、トークンをメモリに保持し、新しいページを開いたりページが更新されたときにログインをやり直してください
- Reactはhttponly cookieを読み取ることができないため、認証が必要なすべてのREST呼び出しでそのまま使用します
csrfのように、ログイントークンを使用してユーザーと権限を確認してください。ログイントークンをリクエストヘッダーに挿入し、バックエンドAPIで確認できます。ログイントークンを自分の安らかなライブラリにバインドすると、多くのコードを節約できます
- 呼び出し時のRESTはXMLHttpRequestヘッダーをチェックし、CookieのCSRF保護RESTサイドチェックとは何か、それからJWTを読み取って何かをする
ほとんどの人がそうするように、安心。また、csrfトークンを独自のRESTfulライブラリにバインドすると、コードを大幅に節約できます
ヘッダーでユーザートークンを使用 https://www.npmjs.com/package/express-jwt-tokenAuthorization JWT < jwt token >
ヘッダーでcsrfトークンを使用 https://github.com/expressjs/csurfreq.headers['csrf-token'] - the CSRF-Token HTTP request header.
安らかなクライアント https://github.com/cujojs/rest
jwtと反応する https://github.com/joshgeller/react-redux-jwt-auth-example
サーバーは、ログインリクエストへの応答としてJWT Cookieを直接設定できます。
サーバーはPOST /loginにSet-Cookie: JWT=xxxxxxで応答します。そのcookieはhttpのみであるため、XSSに対して脆弱ではなく、クライアントからのすべてのフェッチ要求に自動的に含まれます（withCredentials: trueを使用している場合）。
CSRFは前述のように緩和されます。 details のOWASPを参照してください。