🙌

JWTによるローカルストレージ利用について

2023/02/21に公開

概要

まずはローカルストレージの概念を解説。ローカルストレージは、その人が現在手元で動かしているPCに保存している情報。webブラウザから送られてくるデータを保存できるので、いわばクッキーに似た仕組みである。

ローカルストレージは、dictionaryに近い。添付資料であれば、udacity.comはそれぞれ自分達のローカルストレージにアクセスすることができる。一方で、googleはgoogleのローカルストレージにしか、アクセスすることができない。

JWTをローカルストレージに保存し利用

ユーザがログインに成功した際、システム側サーバからJWTが提供される。このJWTを使用しブラウザ側で認証を行うことにより、システムサーバ側へのリクエストが可能となる。

JWTをローカルストレージに保存及び使用する方法を下記に記載する。

# JWTを保存
jwt = response.jwt
localStorage.setItem("token", jwt)

# JWTを利用
jwt = localStorage.getItem("token")

デモ

下記サイトで、ローカルストレージにある値が保存されている。 concept_quiz_keywordという値で保存されているので、ぜひ確認してみてほしい。わからない方は添付を参照すること。
https://udacity.github.io/FSND/LocalStore/

ローカルストレージの危険性について

ローカルストレージは、ドメイン依存であり、ドメイン跨ぎでローカルストレージに保存した値を使用できないと説明した。しかし、クロスサイトスクリプティング攻撃は、そういったウェブアプリケーションの脆弱性をついて、ローカルストレージの値を取得する。

例えば、現在閲覧しているウェブサイトのコンソールで、JSON.stringify(localStorage)を実行してほしい。そうすると、さまざまな情報が格納されていることがわかる。そのため、下記の通り、ローカルストレージの値を取得して、別サーバへ送信するコードが仕込まれていると情報を抜き取られてしまう。

対応策

上記内容の通り、クロスサイトスクリプティングにより、情報が抜き取られないようにサニタイズする必要がある。サニタイズとは、HTMLコードにある特殊文字を別の文字列に変換することである。
https://webukatu.com/wordpress/blog/34025/

例えば悪意あるスクリプトタグが埋め込まれていても、<>を書き換えれば無害化することができる。

もしくは、JWTの期限を1時間や1日と設定するのではなく、1分や10分といった短い時間に設定することで、万が一情報漏洩しても次のステップで攻撃を遮断することができる。

引用

https://www.udacity.com/course/full-stack-web-developer-nanodegree--nd0044
https://webukatu.com/wordpress/blog/34025/

Discussion