この記事は、ブラウザで使用できるlocalStorageの概要と、localStorageを使う際のセキュリティ面での注意点について書いています。
結論から言うと、localStorage自体を使ってはいけないというより、機密情報や重要なデータを保存する目的では使用しないようしようという感じです。
詳しくは以下で解説していきます。
localStorageとは
localStorageは、ウェブブラウザによって提供される Web Storage API の一部であり、ウェブページが永続的にデータをブラウザに保存できるようにするためのものです。
これにより、ウェブアプリケーションは、異なるセッション間でデータを保持でき、ユーザーの状態や設定を維持するのに役立ちます。
localStorageの主な特徴
以下の４つについて紹介します。
- キー-バリュー形式でデータを保存
- 同じオリジンでのデータ共有
- 永続的なデータ保存
- データ容量制限
キー-バリュー形式でデータを保存
localStorage は、キーとバリューのペアを使用してデータを保存します。キーとバリューはともに文字列です。
同じオリジンでのデータ共有
同じオリジン（プロトコル、ドメイン、ポートが同じ）のすべてのウィンドウやタブ間で、localStorageのデータが共有されます。
永続的なデータ保存
localStorageに保存されたデータは、ブラウザを閉じたり、コンピュータを再起動したりしても消えません。
ただし、ユーザー自身がブラウザのデータを消去することで、localStorage のデータを削除することができます。
データ容量制限
通常、localStorageには、5MB から 10MB のデータ容量制限がありますが、ブラウザによって異なります。
localStorageの基本的な操作方法
以下の４つについて紹介します。
- データの追加・更新
- データの取得
- データの削除
- すべてのデータの削除
データの追加・更新
localStorage.setItem("username", "JohnDoe");localStorage.setItem(key, value) を使用して、キーとバリューのペアを保存または更新できます。
データの取得
const username = localStorage.getItem("username");
console.log(username); // 出力: JohnDoelocalStorage.getItem(key) を使用して、指定したキーに関連付けられたバリューを取得できます。
データの削除
localStorage.removeItem("username");localStorage.removeItem(key) を使用して、指定したキーと関連するバリューを削除できます。
すべてのデータの削除
localStorage.clear();localStorage.clear() を使用して、localStorage に保存されたすべてのデータを削除できます。
localStorage の主な問題点
localStorage の主な問題点を3つ紹介します。
- クロスサイトスクリプティング（XSS）攻撃に対して脆弱
- データはプレーンテキストで保存される
- 同じオリジンの異なるウィンドウやタブ間で共有される
クロスサイトスクリプティング（XSS）攻撃に対して脆弱
クロスサイトスクリプティング（XSS）攻撃は、ウェブアプリケーションのセキュリティ上の脆弱性を悪用して、攻撃者が悪意のあるスクリプトを他のユーザーのブラウザに注入するタイプの攻撃です。
これにより、攻撃者はユーザーのセッション情報や機密データを盗み、他のユーザーになりすましてアクションを実行できるようになります。
データはプレーンテキストで保存される
localStorageに保存されたデータは、暗号化されずにプレーンテキスト形式で保管されます。これにより、データ漏洩のリスクが高まります。
同じオリジンの異なるウィンドウやタブ間で共有される
localStorageのデータは、同じオリジンのすべてのウィンドウやタブ間で共有されます。
そのため、他のタブで開かれている悪意のあるウェブページが、localStorage のデータにアクセスする可能性があります。
上記のとおり、localStorageには重要なデータを保存することはお勧めできません。
セキュリティが重要な場合の代替手段
以下3つを紹介します。
- セッションストレージ
- セキュアな HTTP クッキー
- サーバーサイドのセッション管理
セッションストレージ
sessionStorageは、ウェブブラウザによって提供される Web Storage API の一部であり、ウェブページがデータをブラウザに一時的に保存できるようにします。
タブやウィンドウごとにデータが独立しているため、同じオリジンの異なるタブやウィンドウでは、それぞれのsessionStorageが独立しています。これにより、異なるタブやウィンドウ間でデータが共有されることはありません。
sessionStorageは、ページのセッション中にデータを保持し、タブやウィンドウが閉じられたときにデータが削除されます。
これにより、ウェブアプリケーションは、異なるページ間でデータを保持でき、ユーザーの状態や設定を維持するのに役立ちます。
ただし、sessionStorageもlocalStorageと同様に、XSS（クロスサイトスクリプティング）攻撃のリスクがあるため、機密情報や重要なデータを保存する目的で使用することはお勧めしません。
セキュアな HTTP クッキー
セキュアな HTTP クッキーとは、ウェブサイトがユーザーのブラウザに保存するデータの一種で、セキュリティ対策が適用された状態です。
クッキーは、ウェブアプリケーションでユーザーの設定や状態を維持するために使用されます。
セキュアな HTTP クッキーは、以下の属性を設定することで、クッキーの安全性を向上させます。
Secure 属性
document.cookie = "key=value; Secure";セキュア属性が設定されたクッキーは、HTTPS での通信中にのみ送信されます。
これにより、中間者攻撃（Man-in-the-Middle、MITM）によるデータの傍受を防ぐことができます。
セキュア属性は、クッキーを作成する際に設定できます。
HttpOnly 属性
document.cookie = "key=value; HttpOnly";HttpOnly 属性が設定されたクッキーは、JavaScript などのクライアントサイドスクリプトからアクセスできません。
これにより、クロスサイトスクリプティング（XSS）攻撃によるクッキーの盗み出しを防ぐことができます。
HttpOnly 属性は、クッキーを作成する際に設定できます。
SameSite 属性
document.cookie = "key=value; SameSite=Strict";SameSite 属性は、クッキーが第三者のウェブサイトに送信されることを制限するために使用されます。
これにより、クロスサイトリクエストフォージェリ（CSRF）攻撃を防ぐことができます。
SameSite 属性には、Strict、Lax、および None の 3 つの値があります。
- Strict: クッキーは、同一サイトのリクエストのみに送信されます。
Lax: クッキーは、同一サイトのリクエストおよびナビゲーションを開始するクロスサイトリクエストに送信されます。None: クッキーは、すべてのクロスサイトリクエストに送信されます。ただし、セキュア属性が設定されている必要があります。
サーバーサイドのセッション管理
サーバーサイドのセッション管理とは、ウェブアプリケーションでユーザーの状態やデータを追跡するために、サーバー側でセッション情報を管理するプロセスです。
サーバーサイドのセッション管理では、各ユーザーに一意のセッションIDが割り当てられ、このIDを使用してサーバー上に保存されたセッションデータにアクセスできます。
クライアントサイドのセッション管理と比較して、サーバーサイドのセッション管理は一般的にセキュリティが強化されています。
サーバーサイドのセッション管理の主な特徴は以下の通りです。
セキュリティ
セッションデータがサーバー上に保存されるため、クライアント側でのデータ漏洩や改ざんリスクが低減されます。
セキュリティが最優先事項である場合や、機密情報を扱うウェブアプリケーションでは、サーバーサイドのセッション管理が推奨されます。
一貫性
サーバー側でセッションデータを管理することで、データの一貫性を維持しやすくなります。
これは、特に分散システムや大規模なウェブアプリケーションにおいて重要です。
スケーラビリティ
サーバーサイドのセッション管理では、セッションデータの格納や管理にデータベースやキャッシュシステム（例: Redis, Memcached）を使用できます。
これにより、アプリケーションのスケーラビリティが向上します。
まとめ
上記より、機密情報や重要なデータを保存する目的でlocalStorageを使用しないようにしましょう。
対策として、以下の３つを紹介しましたが、セッションストレージについてはXSS（クロスサイトスクリプティング）攻撃への対策はできないので、こちらも気を付けてください。
- セッションストレージ
- セキュアな HTTP クッキー
- サーバーサイドのセッション管理
以上です！
