クライアント側でJsonWeb Token JWTを保存するのに最も安全な場所はどこですか？
こんにちはstackoverflowコミュニティ！
Nuxts.jsフレームワークを使用してSPAアプリを構築し、バックエンドAPIサービスからJWTトークンを保存する最も安全な方法に到達しました。
HttpOnlyフラグとlocalStorageの2つのオプションCookieがあります。この2つのオプションの比較に関する記事をたくさん読みましたが、開発者の半数はCookieをサポートし、開発者の半数はローカルストレージをサポートしています。
私の見解では、CookieはlocalStorageよりもクライアント側にJWTを保存する方が安全な方法のようですが、上記のオプションよりもさらに安全な方法があるのではないかと思います。
だから私は何かについて考えました。 Nuxt.jsフレームワークは、環境変数を保存する機会を提供します。 JWTトークンを環境変数として保存する方が安全ですか、それとも上記のオプションとまったく同じですか、それとも最悪です。
前もって感謝します！
クッキーがlocalStorageよりも優先されるとは断言できません。それは、アプリの実装方法、使用しているフレームワーク、正確に何をしたいかによって異なります。もっと正確に説明させてください。
httpOnlyのCookie：
CookieをHttpOnlyCookieフラグとともに使用すると、JavaScriptからアクセスできなくなります。
JwtトークンをCookieに保存し、httpリクエストを介して設定する場合set-cookieブラウザでは、ブラウザはリクエストごとにこの認証情報を送信します。もちろん、そのCookieにhttpOnlyフラグとsecureフラグを適用することで保護できます。 javascriptがアクセスしないようにします。しかし、問題は、CSRF攻撃のチャンスを開いていることです。
トークンがCookieに保存されると、ブラウザは各リクエストとともにトークンを同じドメインに自動的に送信しますが、これは引き続きCSRF攻撃に対して脆弱です。
localStorage：
一方、jwtトークンは、各リクエストのAuthorizationヘッダーで送信されます。そのため、ブラウザはリクエストで自動的に設定しません。クライアント側のJavaScriptを介してリクエストごとに設定する必要があります。
つまり、基本的にブラウザは各リクエストに自動的に追加しないため、デフォルトではCSRFに対して脆弱ではありません。
ただし、問題は、クライアントコードがXSSに対して脆弱である場合に発生します。その場合、資格情報をlocalStorageに保存するため、攻撃者はクライアント側を完全に制御でき、何でもできます。 Cookieに保存することの違いは、攻撃者はhttpOnlyフラグで保存されるCookieの正確な値を知らないということです。しかし、彼はそのhttpヘッダーを使用してリクエストを送信できました。
したがって、私の意見では、次の状況によって異なります。
jwtトークンをlocalStorageに保存する場合は、必ずすべての入力を確認して検証してください。
XSSに対して脆弱ではないフレームワークを使用します（フレームワークがそれを主張できるわけではありませんが、少なくとも最近CVEを報告していないフレームワークを使用してください）。また、常にクライアント側のコードを更新してください。cspや...などのすべてのセキュリティ概念を実装します。また、使用しているCDNに注意し、使用しているライブラリに注意してください。cookieを使用し、ブラウザのCookieを介して資格情報を設定することをお勧めします。次に、アンチcsrf緩和手法の実装に注意してください。常に
httpsを使用し、secureフラグを設定します。サブドメイン攻撃や中間者攻撃など、Cookieに存在する攻撃には注意してください。また、Djangoは、この状況を処理するために2つのクールな方法を使用します （詳細はこちら）- Cookieを二重送信する
- シンクロナイザートークン
最後の注意：このトピックの一般的な解決策はないと思います。実験と知識に基づいて、誰でも提案できます。 ちなみに、私はRest APIから受け取った資格情報を保存するためにlocalStorageを好みます。しかし、誰かがより良い解決策のために私を訂正することができれば、私は本当にうれしいです。