このページは Cloud Translation API によって翻訳されました。

関連ウェブサイトセット: デベロッパーガイド

関連ウェブサイトセット（RWS）は、ブラウザがドメインの集合間の関係を理解できるようにするウェブプラットフォームメカニズムです。これにより、ブラウザはサイトの特定の機能（クロスサイト Cookie へのアクセスを許可するかどうかなど）を有効にする重要な決定を行い、この情報をユーザーに提示できるようになります。

Chrome はサードパーティ Cookie のサポートを終了するにあたり、ユーザーのプライバシーを強化しながら、ウェブ上の主要なユースケースを維持することを目指しています。たとえば多くのサイトは、1 つのユーザーエクスペリエンスを提供するために複数のドメインを利用しています。国別のドメインやサービスドメインによる画像や動画のホスティングなど、さまざまなユースケースで異なるトップレベルドメインを維持したい組織もあるでしょう。関連ウェブサイトセットを使用すると、サイトは特定のコントロールを使用して、ドメインをまたいでデータを共有できます。

関連ウェブサイトセットの統合の詳細

Storage Access API

対応ブラウザ

119
85
65
11.1

ソース

Storage Access API（SAA）は、埋め込まれたクロスオリジンコンテンツが、通常はファーストパーティのコンテキストでしかアクセスできないストレージにアクセスできるようにする手段です。

埋め込みリソースでは、SAA メソッドを使用して、ストレージへのアクセス権が現在あるかどうかを確認し、ユーザーエージェントにアクセス権をリクエストできます。

サードパーティ Cookie がブロックされていても関連ウェブサイトセット（RWS）が有効になっている場合、Chrome は RWS 内のコンテキストで権限を自動的に付与し、それ以外の場合はユーザーにプロンプトを表示します。（「RWS 内コンテキスト」とは、埋め込みサイトとトップレベルサイトが同じ RWS 内にある iframe などのコンテキストのことです）。

ストレージへのアクセスを確認してリクエストする

埋め込みサイトで Document.hasStorageAccess() メソッドを使用して、ユーザーが現在ストレージにアクセスできるかどうかを確認できます。

このメソッドは、ドキュメントがすでに Cookie にアクセスできるかどうかを示すブール値で解決される Promise を返します。iframe がトップフレームと同じオリジンである場合も、Promise は true を返します。

クロスサイトコンテキストで Cookie へのアクセスをリクエストするには、埋め込みサイトで Document.requestStorageAccess()（rSA）を使用できます。

requestStorageAccess() API は iframe 内から呼び出す必要があります。この iframe はユーザー操作（すべてのブラウザで必須）のユーザー操作を受け取った直後である必要がありますが、Chrome ではさらに、過去 30 日間のある時点で、ユーザーがその iframe を所有するサイトにアクセスし、特にそのサイトに対して（iframe 内ではなく、トップレベルのドキュメントとして）操作したことを求めています。

requestStorageAccess() は、ストレージへのアクセスが許可されている場合に解決される Promise を返します。なんらかの理由でアクセスが拒否された場合、Promise は理由を引用して拒否されます。

Chrome の requestStorageAccessFor

対応ブラウザ

ソース

Storage Access API を使用すると、埋め込みサイトはユーザーの操作を受けた <iframe> 要素内からストレージへのアクセスをリクエストできます。

このため、Cookie を必要とするクロスサイト画像やスクリプトタグを使用するトップレベルのサイトに Storage Access API を導入することが困難になります。

これに対処するために、Chrome では、トップレベルサイトが Document.requestStorageAccessFor()（rSAFor）を使用して特定のオリジンに代わってストレージアクセスをリクエストする方法を実装しました。

 document.requestStorageAccessFor('https://target.site')

requestStorageAccessFor() API は、トップレベルドキュメントから呼び出されることを目的としています。また、そのドキュメントはユーザーの操作を受けたばかりである必要があります。ただし、requestStorageAccess() とは異なり、Chrome では過去 30 日以内にトップレベルのドキュメントでインタラクションを確認しません（ユーザーがすでにページにアクセスしているため）。

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

カメラや位置情報など、一部のブラウザ機能へのアクセスは、ユーザーが付与した権限に基づいて行われます。Permissions API では、API へのアクセスに関する権限ステータス（権限が付与されているか、拒否されているか、プロンプトのクリックやページの操作など、なんらかのユーザー操作が必要か）を確認できます。

権限のステータスは、navigator.permissions.query() を使用してクエリできます。

現在のコンテキストのストレージアクセス権限を確認するには、'storage-access' 文字列を渡す必要があります。

navigator.permissions.query({name: 'storage-access'})

指定したオリジンのストレージアクセス権限を確認するには、'top-level-storage-access' 文字列を渡す必要があります。

navigator.permissions.query({name: 'top-level-storage-access', requestedOrigin: 'https://target.site'})

なお、埋め込みオリジンの整合性を保護するため、document.requestStorageAccessFor を使用して最上位ドキュメントから付与された権限のみがチェックされます。

権限を自動的に付与できるかどうかに応じて、prompt または granted が返されます。

フレームモデルごと

rSA 付与はフレームごとに適用されます。rSA 付与と rSAFor 付与は別々の権限として扱われます。

新しいフレームごとにストレージアクセスを個別にリクエストする必要があり、自動的にアクセス権が付与されます。最初のリクエストだけがユーザー操作を必要とし、その後の iframe によって開始されるリクエスト（ナビゲーションやサブリソースなど）では、ユーザージェスチャーを待つ必要はありません。ユーザージェスチャーは、最初のリクエストによってブラウジングセッションに付与されるためです。

iframe を更新、再読み込み、またはその他の方法で再作成する場合は、再度アクセスをリクエストする必要があります。

Cookie に関する要件

Cookie では SameSite=None 属性と Secure 属性の両方を指定する必要があります。rSA では、クロスサイトコンテキストで使用するようマークされている Cookie にしかアクセスできません。

SameSite=Lax または SameSite=Strict が指定されている Cookie、または SameSite 属性が指定されていない Cookie はファーストパーティでの使用のみを目的としており、rSA に関係なく、クロスサイトコンテキストで共有されることはありません。

セキュリティ

rSAFor の場合、サブリソースリクエストには、クロスオリジンリソースシェアリング（CORS）ヘッダーまたはリソースの crossorigin 属性が必要です。これにより、明示的なオプトインが保証されます。

実装の例

埋め込まれたクロスオリジン iframe からストレージへのアクセスをリクエストする

toplevel.site に埋め込まれたサイトを示す図 — 別のサイトの埋め込みで `requestStorageAccess()` を使用する。

ストレージへのアクセス権があるかどうかを確認する

ストレージへのアクセス権がすでにあるかどうかを確認するには、document.hasStorageAccess() を使用します。

Promise が true で解決されると、クロスサイトコンテキストでストレージにアクセスできます。false が解決された場合は、ストレージアクセスをリクエストする必要があります。

document.hasStorageAccess().then((hasAccess) => {
    if (hasAccess) {
      // You can access storage in this context
    } else {
      // You have to request storage access
    }
});

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

ストレージへのアクセスをリクエストする場合は、まずストレージアクセス権限 navigator.permissions.query({name: 'storage-access'}) を確認して、それにユーザー操作が必要かどうかを確認します。また、自動的に付与できるかどうかを確認します。

権限が granted の場合、document.requestStorageAccess() を呼び出すと、ユーザー操作なしで成功します。

権限のステータスが prompt の場合は、ボタンのクリックなどのユーザー操作の後に document.requestStorageAccess() の呼び出しを開始する必要があります。

注: 権限が付与される前、またはユーザージェスチャーが登録される前に requestStorageAccess() を呼び出そうとすると、エラー「requestStorageAccess: must be handle to user to use"」がスローされます。

例:

navigator.permissions.query({name: 'storage-access'}).then(res => {
  if (res.state === 'granted') {
    // Permission has already been granted
    // You can request storage access without any user gesture
    rSA();
  } else if (res.state === 'prompt') {
    // Requesting storage access requires user gesture
    // For example, clicking a button
    const btn = document.createElement("button");
    btn.textContent = "Grant access";
    btn.addEventListener('click', () => {
      // Request storage access
      rSA();
    });
    document.body.appendChild(btn);
  }
});

function rSA() {
  if ('requestStorageAccess' in document) {
    document.requestStorageAccess().then(
      (res) => {
        // Use storage access
      },
      (err) => {
        // Handle errors
      }
    );
  }
}

フレーム、ナビゲーション、またはサブリソース内からの後続のリクエストには、クロスサイト Cookie へのアクセス権限が自動的に付与されます。hasStorageAccess() は true を返し、それらのリクエストで追加の JavaScript 呼び出しを行わずに、同じ関連ウェブサイトセットからのクロスサイト Cookie が送信されます。

クロスオリジンサイトに代わって Cookie アクセスをリクエストするトップレベルサイト

requestStorageAccessFor() が埋め込み内でではなくトップレベルサイトで使用されていることを示す図 — 別のオリジンのトップレベルサイトで `requestStorageAccessFor()` を使用する

トップレベルサイトは、requestStorageAccessFor() を使用して、特定のオリジンの代わりにストレージへのアクセスをリクエストできます。

hasStorageAccess() は呼び出し元のサイトにストレージへのアクセス権があるかどうかのみを確認するため、トップレベルサイトは別のオリジンの権限を確認できます。

ユーザーにプロンプトが表示されるかどうか、または指定したオリジンにストレージへのアクセスがすでに付与されているかどうかを調べるには、navigator.permissions.query({name: 'top-level-storage-access', requestedOrigin: 'https://target.site'}) を呼び出します。

権限が granted の場合は、document.requestStorageAccessFor('https://target.site') を呼び出すことができます。これはユーザー操作なしで成功するはずです。

権限が prompt の場合、ボタンのクリックなどのユーザー操作の背後で document.requestStorageAccessFor('https://target.site') 呼び出しをフックする必要があります。

例:

navigator.permissions.query({name:'top-level-storage-access',requestedOrigin: 'https://target.site'}).then(res => {
  if (res.state === 'granted') {
    // Permission has already been granted
    // You can request storage access without any user gesture
    rSAFor();
  } else if (res.state === 'prompt') {
    // Requesting storage access requires user gesture
    // For example, clicking a button
    const btn = document.createElement("button");
    btn.textContent = "Grant access";
    btn.addEventListener('click', () => {
      // Request storage access
      rSAFor();
    });
    document.body.appendChild(btn);
  }
});

function rSAFor() {
  if ('requestStorageAccessFor' in document) {
    document.requestStorageAccessFor().then(
      (res) => {
        // Use storage access
      },
      (err) => {
        // Handle errors
      }
    );
  }
}

requestStorageAccessFor() 呼び出しが成功した後、クロスサイトリクエストに CORS または crossorigin 属性が含まれている場合は Cookie が含まれるため、サイトはリクエストをトリガーする前に待機することをおすすめします。

リクエストでは credentials: 'include' オプションを使用し、リソースに crossorigin="use-credentials" 属性を含める必要があります。

function checkCookie() {
    fetch('https://related-website-sets.glitch.me/getcookies.json', {
        method: 'GET',
        credentials: 'include'
      })
      .then((response) => response.json())
      .then((json) => {
      // Do something
      });
  }

ローカルでのテスト方法

前提条件

関連ウェブサイトセットをローカルでテストするには、コマンドラインから起動した Chrome 119 以降を使用して、test-third-party-cookie-phaseout Chrome フラグを有効にします。

Chrome フラグを有効にする

必要な Chrome フラグを有効にするには、アドレスバーから chrome://flags#test-third-party-cookie-phaseout に移動し、フラグを Enabled に変更します。フラグを変更した後は、ブラウザを再起動してください。

ローカルの関連ウェブサイトセットを使用して Chrome を起動する

ローカルで宣言した関連ウェブサイトセットを使用して Chrome を起動するには、セットのメンバーである URL を含む JSON オブジェクトを作成し、--use-related-website-set に渡します。

詳しくは、フラグを使用して Chromium を実行する方法をご覧ください。

--use-related-website-set="{\"primary\": \"https://related-website-sets.glitch.me\", \"associatedSites\": [\"https://rws-member-1.glitch.me\"]}" \
https://related-website-sets.glitch.me/

例

関連ウェブサイトセットをローカルで有効にするには、chrome://flags で test-third-party-cookie-phaseout を有効にし、セットのメンバーである URL を含む JSON オブジェクトを指定して、--use-related-website-set フラグを指定してコマンドラインから Chrome を起動する必要があります。

--use-related-website-set="{\"primary\": \"https://related-website-sets.glitch.me\", \"associatedSites\": [\"https://rws-member-1.glitch.me\"]}" \
https://related-website-sets.glitch.me/

クロスサイト Cookie にアクセスできることを確認する

テスト対象のサイトから API（rSA または rSAFor）を呼び出し、クロスサイト Cookie へのアクセスを検証します。

エンタープライズポリシー

Chrome には、企業ユーザーのニーズに合わせて、次の 2 つのポリシーが用意されています。

関連ウェブサイトセットと統合できない可能性があるシステムでは、RelatedWebsiteSetsEnabled ポリシーを使用して、Chrome のすべてのエンタープライズインスタンスで関連ウェブサイトセット機能を無効にできます。
一部の企業システムには、関連ウェブサイトセットのドメインとは異なる登録可能なドメインを持つ内部専用サイト（イントラネットなど）があります。これらのサイトを関連ウェブサイトセットの一部として扱い、ドメインが機密扱いとなる可能性がある場合は、RelatedWebsiteSetsOverrides ポリシーを使用して、公開されている関連ウェブサイトセットリストを拡張またはオーバーライドできます。

Chrome は、パブリックセットとエンタープライズセットの交差を 2 つのいずれかで解決 replacemements と additions のどちらが指定されているかによって、いずれかの方法を選択できます。

たとえば、公開セット {primary: A, associated: [B, C]} の場合:


`replacements` セット:	`{primary: C, associated: [D, E]}`
エンタープライズセットは共通サイトを吸収して新しいセットを形成します。
結果セット:	`{primary: A, associated: [B]}` `{primary: C, associated: [D, E]}`

`additions` セット:	`{primary: C, associated: [D, E]}`
公開セットとエンタープライズセットは組み合わせられます。
結果セット:	`{primary: C, associated: [A, B, D, E]}`

フィードバックを共有

GitHub にセットを提出し、Storage Access API と requestStorageAccessFor API を使用して、プロセスや直面した問題に関するご自身の体験を共有してください。

関連ウェブサイトセットに関するディスカッションに参加するには:

関連ウェブサイトセットの公開メーリングリストに参加します。
問題を報告し、関連ウェブサイトセットの GitHub リポジトリのディスカッションをフォローしてください。

関連ウェブサイトセット: デベロッパーガイド

関連ウェブサイトセットとは

関連ウェブサイトセットのユースケース

関連ウェブサイトセットの統合の詳細

Storage Access API

ストレージへのアクセスを確認してリクエストする

Chrome の requestStorageAccessFor

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

フレームモデルごと

Cookie に関する要件

セキュリティ

実装の例

埋め込まれたクロスオリジン iframe からストレージへのアクセスをリクエストする

ストレージへのアクセス権があるかどうかを確認する

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

クロスオリジンサイトに代わって Cookie アクセスをリクエストするトップレベルサイト

ローカルでのテスト方法

前提条件

Chrome フラグを有効にする

ローカルの関連ウェブサイトセットを使用して Chrome を起動する

例

クロスサイト Cookie にアクセスできることを確認する

関連ウェブサイトセットの送信プロセス

エンタープライズポリシー

関連ウェブサイトセットのトラブルシューティング

「ユーザープロンプト」「ユーザー操作」

他のサイトのアクセスCookie またはストレージ

デフォルトでパーティション分割されていない Cookie へのアクセス

フィードバックを共有

関連ウェブサイト セット: デベロッパー ガイド

関連ウェブサイト セットとは

関連ウェブサイト セットのユースケース

関連ウェブサイト セットの統合の詳細

Storage Access API

ストレージへのアクセスを確認してリクエストする

Chrome の requestStorageAccessFor

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

フレームモデルごと

Cookie に関する要件

セキュリティ

実装の例

埋め込まれたクロスオリジン iframe からストレージへのアクセスをリクエストする

ストレージへのアクセス権があるかどうかを確認する

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

クロスオリジン サイトに代わって Cookie アクセスをリクエストするトップレベル サイト

ローカルでのテスト方法

前提条件

Chrome フラグを有効にする

ローカルの関連ウェブサイト セットを使用して Chrome を起動する

例

クロスサイト Cookie にアクセスできることを確認する

関連ウェブサイト セットの送信プロセス

エンタープライズ ポリシー

関連ウェブサイト セットのトラブルシューティング

「ユーザー プロンプト」「ユーザー操作」

他のサイトのアクセスCookie またはストレージ

デフォルトでパーティション分割されていない Cookie へのアクセス

フィードバックを共有

関連ウェブサイトセット: デベロッパーガイド

関連ウェブサイトセットとは

関連ウェブサイトセットのユースケース

関連ウェブサイトセットの統合の詳細

クロスオリジンサイトに代わって Cookie アクセスをリクエストするトップレベルサイト

ローカルの関連ウェブサイトセットを使用して Chrome を起動する

関連ウェブサイトセットの送信プロセス

エンタープライズポリシー

関連ウェブサイトセットのトラブルシューティング

「ユーザープロンプト」「ユーザー操作」