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

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

関連ウェブサイトセット（RWS）は、ブラウザが複数のドメイン間の関係を把握するのに役立つウェブプラットフォームメカニズムです。これにより、ブラウザはサイトの特定の機能（クロスサイト Cookie へのアクセスを許可するかどうかなど）を有効にし、この情報をユーザーに提示するための重要な決定を下すことができます。

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

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

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 の要件

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

SameSite=Lax または SameSite=Strict が指定されている、または 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: 使用するユーザー操作を処理する必要があります」というエラーがスローされます。

例:

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 を返し、同じ関連ウェブサイトセットからのクロスサイト Cookie が追加の JavaScript 呼び出しなしでこれらのリクエストに送信されます。

クロスオリジンサイトに代わって 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 を有効にし、--use-related-website-set フラグとセットのメンバーである URL を含む JSON オブジェクトを指定してコマンドラインから 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 にはいくつかのエンタープライズポリシーがあります。

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

フィードバックを共有

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 を起動する

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

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

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

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