[解決済み】ReactJSでJWTをlocalStorageに保存するのは安全か？

質問

現在、ReactJSを使用してシングルページのアプリケーションを構築しています。

を使用しない理由のひとつは、このようなものであると読みました。 localStorage は、XSSの脆弱性があるためです。

React はすべてのユーザー入力をエスケープするので、これで localStorage ?

解決方法は？

最近のシングルページアプリケーションでは、クライアントサイドのどこかにトークンを保存する必要があります（最も一般的なユースケース - ページ更新後にユーザーがログインした状態を維持するため）。

全部で2つのオプションがあります。ウェブストレージ（セッションストレージ、ローカルストレージ）、クライアントサイドクッキーです。 どちらの選択肢も広く使われていますが、だからといって安全性が高いとは限りません。

Tom Abbottがうまくまとめている。 JWT sessionStorageとlocalStorageのセキュリティ :

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

XSSを防ぐために、信頼できないデータはすべてエスケープしてエンコードするというのが一般的な対応です。Reactは（ほとんど）それをやってくれます! 以下は、素晴らしい Reactがどの程度XSS脆弱性対策を担っているかについての議論 .

しかし、これだけでは、起こりうるすべての脆弱性をカバーしきれないのです もうひとつの潜在的な脅威は CDNや外部のインフラでホストされているJavaScriptの使用。 .

ここで再びトムの登場です。

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

使用しているスクリプトのうち1つだけが侵害されていたらどうしますか？悪意のあるJavaScriptをページに埋め込むことができ、Web Storageが侵害されます。 この種のXSS攻撃は、あなたのサイトにアクセスした全員のWeb Storageを、知らないうちに取得してしまう可能性があります。 このためか、多くの組織がウェブストレージに価値のあるものを保存しない、あるいはいかなる情報も信用しないようにと忠告しています。これには、セッション識別子とトークンが含まれます。

したがって、私の結論は、ストレージの仕組みとして、ウェブストレージは 転送中に安全な標準を強制しない . Web Storageを読んでそれを使う人は、JWTを常にHTTPSで送信し、決してHTTPで送信しないことを確実にするために、デューディリジェンスを行う必要があります。