ReactJS で JWT を localStorage に保存するのは安全ですか? 質問する

最近のシングルページ アプリケーションのほとんどでは、トークンをクライアント側のどこかに保存する必要があります (最も一般的な使用例は、ページを更新した後もユーザーのログイン状態を維持することです)。

利用できるオプションは、Web ストレージ (セッション ストレージ、ローカル ストレージ) とクライアント側 Cookie の 2 つです。どちらのオプションも広く使用されていますが、非常に安全であるとは限りません。

トム・アボットは、JWT セッションストレージとローカルストレージのセキュリティ:

Web ストレージ (localStorage/sessionStorage) は、同じドメインの JavaScript からアクセスできます。つまり、サイトで実行されているすべての JavaScript が Web ストレージにアクセスできることになります。このため、クロスサイト スクリプティング (XSS) 攻撃に対して脆弱になる可能性があります。XSS とは、簡単に言えば、攻撃者がページで実行される JavaScript を挿入できる脆弱性の一種です。基本的な XSS 攻撃は、フォーム入力を通じて JavaScript を挿入しようとします。攻撃者はフォームに JavaScript を入力し、それ<script>alert('You are Hacked');</script>がブラウザーで実行され、他のユーザーが閲覧できるかどうかを確認します。

XSSを防ぐための一般的な対応は、信頼できないデータをすべてエスケープしてエンコードすることです。Reactは（ほとんど）それを自動的に行います。ここに素晴らしい例があります。Reactがどの程度XSS脆弱性保護に責任を持つかについての議論。

しかし、これはすべての脆弱性を網羅しているわけではありません。もう 1 つの潜在的な脅威は、CDN または外部インフラストラクチャでホストされている JavaScript の使用です。

トムのコメントをもう一度。

最新の Web アプリには、A/B テスト、ファネル/市場分析、広告用のサードパーティ JavaScript ライブラリが含まれています。Bower などのパッケージ マネージャーを使用して、他の人のコードをアプリにインポートします。

使用しているスクリプトの 1 つだけが侵害されたらどうなるでしょうか? 悪意のある JavaScript がページに埋め込まれ、Web ストレージが侵害される可能性があります。これらの種類の XSS 攻撃は、サイトを訪問するすべての人の Web ストレージを、本人の知らないうちに取得する可能性があります。これが、多くの組織が Web ストレージに価値のあるものを保存したり、情報を信頼したりしないようにアドバイスしている理由です。これにはセッション ID とトークンが含まれます。

したがって、私の結論は、ストレージ メカニズムとしての Web Storage は、転送中に安全な標準を強制しないということです。Web Storage を読み取って使用する人は誰でも、JWT を HTTP ではなく HTTPS 経由で常に送信するように十分な注意を払う必要があります。