実際、LocalStorage は同一オリジン ポリシーによって制限されており、同じオリジンの Web ページ間でのみデータを共有できます。ただし、SSO システムの Cross-Origin Resource Sharing (CORS) メカニズムを使用して、同一オリジン ポリシーの制限を回避することで SSO を実装できます。
CORS は、サーバーが HTTP 応答にヘッダー情報を追加して、どのドメイン名がこのサイト上のリソースへのアクセスを許可されているかをブラウザーに伝えるためのブラウザー メカニズムです。シングル サインオン システムのサーバーに正しい CORS ヘッダー情報を追加することで、他のシステムの Web ページがドメインを越えてシングル サインオン システムにアクセスするときに LocalStorage のトークン値を読み取ることができ、シングル サインオンが実現されます。
以下に、単純なクロスドメイン シングル サインオンの例を示します。
-
ユーザーがシステム A にログインすると、システム A はトークン値を生成して LocalStorage に保存します。
-
ユーザーがシステム B にアクセスすると、システム B はユーザーがログインしたかどうかを確認する必要があります。シングル サインオンを実現するために、システム B はシングル サインオン システムのサーバーに HTTP リクエストを送信し、シングル サインオン システムのリクエストの送信元を通知するためにリクエスト ヘッダーに Origin フィールドを追加します。
-
要求を受信した後、シングル サインオン システムのサーバーは、[Origin] フィールドの値がアクセスを許可されているドメイン名リストに含まれているかどうかを確認します。アクセスが許可される場合は、HTTP 応答ヘッダーに Access-Control-Allow-Origin フィールドを追加し、それを要求の Origin 値として設定し、ドメイン名がこのサイト上のリソースにアクセスできることを示します。
-
次に、HTTP 応答ヘッダーに Access-Control-Allow-Credentials フィールドを追加して true に設定します。これは、システム B のブラウザーが、クロスドメイン要求での Cookie の送受信が許可されることを意味します。 LocalStorage 値のトークン。
-
システム B が応答を受信すると、JavaScript コード内の LocalStorage のトークン値を読み取り、検証のためにサーバーに送信できます。
なお、シングルサインオンシステムは、セキュリティを確保するために、CSRF（Cross-Site Request Forgery、クロスサイトリクエストフォージェリ）などの攻撃を防ぐために、クロスドメインリクエストを厳密にチェックして制御する必要があります。さらに、クロスドメイン アクセスに CORS メカニズムを使用する場合は、特定のドメイン名からの要求のみを許可し、システム セキュリティを保護するために適切な CORS フィールドを応答ヘッダーに追加する必要があります。
つまり、LocalStorage は同一オリジンポリシーによる制限を受けていますが、CORS の仕組みを利用することでクロスドメインの Web ページ間で LocalStorage 内のデータを共有することができ、シングルサインオンの機能を実現することができます。