LoginSignup
1

More than 1 year has passed since last update.

Storage Access API メモ

Posted at
  • 3rd Party Cookie を用いたトラッキングがブロックされることで、 Single Sign On を始めとしたユースケースに影響が出た。
  • これに対して、明示的に3rd Party Cookie にアクセスする方法を提供する手段である Storage Access API について個人用にメモする。

背景

  • ほとんどのブラウザーは、クロスオリジンリソースのクッキーやサイトデータへのアクセスを制限している。
    • これらの制限は、サードパーティのコンテキストでリソースが読み込まれた場合にストレージアクセスの完全なブロックにまで及ぶ。
  • これらのクッキーブロックポリシーは、ファーストパーティストレージへのアクセスを必要とする埋め込まれたクロスオリジンコンテンツの中断につながる。
    • 例:フェデレーションログイン
      • ファーストパーティストレージに保存されている認証クッキーへのアクセスが必要になることが多く、これらのクッキーが利用できない場合、ユーザーは各サイトに個別にサインインする(または完全に中断する)必要がある。
      • 中断した場合、サイト所有者は、ユーザーにサイトを例外として追加するか、ポリシーを完全に無効にすることを推奨することがある。
      • 埋め込まれたコンテンツとのやり取りを継続することを希望するユーザーはリソースのブロックポリシーを大幅に緩和する必要がある。

対策:Storage Access API

  • 上述の問題への対策として、ユーザーがサードパーティのCookieを操作するときに、サードパーティの埋め込みがファーストパーティのCookieへのアクセスを要求できるようにする**StorageAccessAPI**が提案された。
  • Storage Access APIは、クロスオリジンiframeに2つの関数Document.hasStorageAccess()Document.requestStorageAccess()を提供する。
    • Document.requestStorageAccess()
      • サイトごとにファーストパーティストレージへの無制限のアクセスを要求する。
      • ファーストパーティストレージへのアクセスが許可された場合に解決し、アクセスが拒否された場合に拒否する Promise を返却する。
    • Document.hasStorageAccess()
      • 既にアクセス権があるかどうかを確認する。
      • ファーストパーティストレージにアクセスできるかどうかを示すブール値で解決される Promiseを返却する。
  • 埋め込みトップフレームに新しいiframeサンドボックストークンallow-storage-access-by-user-activationを提供する。

ストレージアクセス権を確認する

  • Document.hasStorageAccess()を呼び出すと、既にファーストパーティのCookieにアクセスできるかどうかを示すブール値で解決されるpromiseが返される。

  • iframeがトップフレームと同一生成元である場合、promiseはtrueを返す。

    var promise = document.hasStorageAccess();
    promise.then(
      function (hasAccess) {
        // Boolean hasAccess says whether the document has access or not.
      },
      function (reason) {
        // Promise was rejected for some reason.
      }
    );
    

ストレージアクセスをリクエストする

  • Document.requestStorageAccess()を呼び出すと、ストレージアクセスが許可された場合は解決され、アクセスが拒否された場合は拒否されるPromiseが返却される。

  • ストレージアクセスが許可されている場合、Document.hasStorageAccess()を呼び出すとtrueが返却される。

  • Cookieがいつ変更されるかを開発者が制御できるようにするために、iframeからこのAPIを明示的に呼び出す。

    <script>
    function makeRequestWithUserGesture() {
      var promise = document.requestStorageAccess();
      promise.then(
        function () {
          // Storage access was granted.
        },
        function () {
          // Storage access was denied.
        }
      );
    }
    </script>
    <button onclick="makeRequestWithUserGesture()">Play video</button>
    

iframeがストレージアクセスを許可するために準拠すべき基本ルール

  • iframeのCookieは、現在ITPによってパーティション化されていること。
    • そうでない場合、iframeはすでにCookieにアクセスできるか、Cookieが削除されているためにアクセスを許可できない。
  • iframeはトップフレームの直接の子であること。
  • iframeは、API呼び出し時にユーザージェスチャ/アクションを処理していること。

参考情報

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1