私のSPAはReactをフロントエンドとして使用し、laravel APIをバックエンドとして使用します。
ユーザーが(axiosおよびapiを介して)ログインすると、apiは応答としてアクセス(ベアラートークン)を返します。私はreact-cookieフレームワークを使用して、アクセストークンをCookieとしてブラウザに保存します。このCookieは読み取られ、今後のリクエストに使用されます。
これは正しい方法ですか? Cookieデータは、攻撃者が簡単に取得できるブラウザ内のデータにすぎませんか?ただのファイルなのでどこかのパソコン。
攻撃者がそのCookieを取得し、そのユーザーになりすまして、認証を必要とするアクションの実行を開始するのを阻止しているのは何ですか?
トークンの寿命は、たとえば1年です。ユーザーがログインするたびに更新されるだけです。寿命を短く設定すると、より安全になることを理解しています。しかし、それはユーザーが常にログインしなければならないことを意味しますか?
- - -更新 - - -
提供されたソリューションのいずれかが私の質問に答えたかどうかはわかりません。 SPAアプリはフロントエンドベースであり、リクエストはPostman、モバイルアプリ、またはバックアップされたサーバーと通信したいサードパーティのデバイスなど、どこからでも送信できます。したがって、これらのデバイスには、将来のリクエストに使用するために、アクセストークンをローカルに保存する方法が必要です。
これが発生する可能性があることを私が知っている唯一の方法は、サーバーが認証トークンをリクエスターに送信し、次のリクエストに使用するためにどこかに保存することです。
この場合、CSRFトークンまたはその他の手段が私の懸念に役立つかどうかわかりませんか?
Facebookと同じように、キャッシュをクリアすると、再ログインする必要があります。つまり、Facebookは私のロケーションコンピュータに何かを保存しているので、次回は自動的に認証されます
JSはCookieにアクセスできないようにする必要があります。 Cookieを保護し、正しい目的でのみ使用されるようにするために、Cookieに設定できるフラグがあります。
HttpOnly フラグがCookieに設定されている場合、JSはCookieにアクセスできませんが、リクエストとともに送信されます。
SameSite フラグは、Cookieがユーザーに提供されたサイトにのみ返送されるようにします。漏れを防ぎます。
Secure フラグは、セキュリティで保護された接続を介してのみCookieを送信し、誰かがWebトラフィックからCookieを盗聴するのを防ぎます。
編集
承認ワークフローを検索することもできますが、その要点は次のとおりです。
彼もいくつかの本当に良い点を作ったので、@ tpopovの答えを見てください。
トークンをCookieに保存することのいくつかの欠点を追加したいので、次の点にも注意してください。
Cookieの最大サイズはわずか4kbであるため、トークンに多くのクレームが添付されている場合は問題が発生する可能性があります。
Cookieは、クロスサイトリクエストフォージェリ(CSRFまたはXSRF)攻撃に対して脆弱である可能性があります。 WebアプリフレームワークのCSRF保護を使用すると、CookieはJWTを保存するための安全なオプションになります。 CSRFは、HTTPリファラーとOriginヘッダーをチェックすることで部分的に防ぐこともできます。 SameSite = strict cookieフラグを設定して、CSRF攻撃を防ぐこともできます。
アプリケーションがクロスドメインアクセスを必要とする場合、実装が難しい場合があります。 Cookieには、Cookieの送信を許可する場所を指定できるように変更できる追加のプロパティ(ドメイン/パス)があります。
-------更新-----
Cookieを使用して認証トークンを保存することもできます(少なくともローカルストレージやRedisなどのセッションミドルウェアを使用するよりも私の意見では)。また、httpOnlyフラグとセキュアフラグを別にしておくと、Cookieの有効期間を制御する方法がいくつかあります。