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

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

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

Chrome ではサードパーティ Cookie を廃止しますが、その目的は、ユーザーのプライバシーを強化しながら、ウェブ上の主要なユースケースを維持することです。たとえば、多くのサイトでは、複数のドメインを使用して単一のユーザーエクスペリエンスを提供しています。組織は、国固有のドメインや、画像や動画をホストするためのサービスドメインなど、複数のユースケースに異なるトップレベルドメインを維持することが必要になる場合があります。関連ウェブサイトセットを使用すると、サイトは特定のコントロールを使用して、ドメイン間でデータを共有できます。

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

Storage Access API

Browser Support

Source

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

Browser Support

Source

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 からストレージへのアクセスをリクエストする

トップレベルのサイトに埋め込まれたサイトを示す図 — 別のサイトの埋め込みで `requestStorageAccess()` を使用する。

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

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

プロミスが 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 handling a user gesture 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）を呼び出し、クロスサイトクッキーへのアクセスを検証します。

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

Chrome には、エンタープライズユーザーのニーズを満たすための 2 つのポリシーが用意されています。

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

Chrome は、replacemements または additions が指定されているかどうかに応じて、公開セットと Enterprise セットの交差を 2 つの方法のいずれかで解決します。

たとえば、公開用に {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 にアクセスできることを確認する

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

1. RWS を特定する

2. RWS 送信を作成する

3. RWS が技術要件を満たしていることを確認する

4. RWS をローカルでテストする

5. RWS を送信する

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

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

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

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

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

フィードバックを共有

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

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

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

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

Storage Access API

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

Chrome の requestStorageAccessFor

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

フレームごとのモデル

Cookie の要件

セキュリティ

実装の例

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

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

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

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

ローカルでテストする方法

前提条件

Chrome フラグを有効にする

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

例

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

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

1. RWS を特定する

2. RWS 送信を作成する

3. RWS が技術要件を満たしていることを確認する

4. RWS をローカルでテストする

5. RWS を送信する

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

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

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

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

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

フィードバックを共有

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

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

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

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

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

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

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

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

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

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