iFrame に埋め込む

Waiting Room は訪問者の進行を追跡する仕組みのため、iFrame に正しく埋め込むには特定の Cookie 属性を指定する必要があります。

背景

Cookie の SameSite 属性 ↗ は、同じページに読み込まれるほかのドメイン（広告バナー、iFrame）とその Cookie を共有できるかを指定します。攻撃者が Cookie 内の情報を盗んだり操作したりするのを防ぐため、ブラウザーはデフォルトでクロスサイトのサブリクエストに Cookie を送りません。

ただし、この動作が原因で、Waiting Room を iFrame に埋め込んだときにユーザーを正しくキューイングできないことがあります。Waiting Room は __cfwaitingroom Cookie でキュー内のユーザーを追跡します。ブラウザーがデフォルトで Cookie を Waiting Room に届けないため、有効でキューイング中の Waiting Room はユーザーをキューに入れられず、アプリケーションへ通すこともできません。

利用できるオプション

Waiting Room の Cookie の扱いをカスタマイズするには、Waiting Room を作成するときに cookie_attributes オブジェクトを含めます（API のみ）。

利用できるオプションは次のとおりです。

samesite: Waiting Room Cookie の SameSite 属性を設定します。
- auto（デフォルト）: できるだけ柔軟にします。デフォルトは lax で、Always Use HTTPS を有効にしている場合は none になります。
- lax: 典型的なクロスサイトのサブリクエスト（サードパーティサイトへの画像やフレームの読み込みなど）では Cookie を送りません。ユーザーがオリジンサイトへ移動するときは送ります。
- strict: Cookie はファーストパーティのコンテキストでのみ送ります。
- none: Cookie は常に送ります。
secure: Waiting Room Cookie の Secure 属性を設定します。リクエストを https で行う必要があります。
- auto（デフォルト）: できるだけ柔軟にします。デフォルトは never で、Always Use HTTPS を有効にしている場合は always になります。
- always: Cookie は https リクエストでのみ送れます。
- never: Cookie は http または https リクエストで送れます。

Waiting Room を iFrame に埋め込む場合は、Waiting Room を作成するときに cookie_attributes オブジェクトへ次の値を指定します（API のみ）。

samesite: none
secure: Always Use HTTPS が有効なら auto にします。無効なら always にします。

例

リクエスト

Required API token permissions

At least one of the following token permissions is required:

Waiting Rooms Write

Create waiting roombash

curl "https://api.cloudflare.com/client/v4/zones/$ZONE_ID/waiting_rooms" \
	--request POST \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"name": "shop_waiting_room",
		"description": "Waiting room for webshop",
		"host": "shop.example.com",
		"path": "/shop",
		"queue_all": true,
		"new_users_per_minute": 200,
		"total_active_users": 300,
		"session_duration": 1,
		"disable_session_renewal": false,
		"json_response_enabled": false,
		"queueing_method": "FIFO",
		"cookie_attributes": {
				"samesite": "none",
				"secure": "auto"
		}
	}'

レスポンス

{
  "success": true,
  "errors": [],
  "messages": [],
  "result": [
    {
      "id": "1111111111111111111111",
      "created_on": "2021-01-01T05:20:00.12345Z",
      "modified_on": "2021-01-01T05:20:00.12345Z",
      "name": "shop_waiting_room",
      "description": "Waiting room for webshop",
      "host": "shop.example.com",
      "path": "/shop",
      "queue_all": true,
      "new_users_per_minute": 200,
      "total_active_users": 300,
      "session_duration": 1,
      "disable_session_renewal": false,
      "json_response_enabled": false,
      "queueing_method": "FIFO",
      "cookie_attributes": {
        "samesite": "none",
        "secure": "auto"
      }
    }
  ]
}

制限

主要な Web ブラウザーはサードパーティ Cookie に制限を導入しています。Waiting Room が iframe 内で使う Cookie も、この種類です。Waiting Room は Cookies Having Independent Partitioned State（CHIPS） ↗ でこの制限を回避しますが、次の欠点があります。

iframe 内と iframe 外の両方で Waiting Room を見ているユーザーは、別ユーザーとして扱われます。それぞれのインスタンスが異なるタイミングでキューを出ることがあり、分析でも別カウントになります。
Waiting Room を iframe に埋め込むには、埋め込むページと埋め込み先のページの両方に HTTPS でアクセスする必要があります。
CHIPS は Safari、および Orion やほとんどの iOS ブラウザーなど Safari 派生ブラウザーでは、設定でサードパーティ Cookie のブロックを無効にしていない限り使えません。これらのユーザーはキューの末尾で止まり、キューが空になるまで進めません。分析では複数回カウントされることもあります。

一般に、Waiting Room Cookie の設定や取得に問題があると、ユーザーはキューの末尾で止まり、分析では複数ユーザーとしてカウントされます。

埋め込むページと埋め込み先のページが共通のドメイン名を共有している場合、これらの制限は当てはまらないことがあります。たとえば example.com のページが shop.example.com の Waiting Room を埋め込む場合、ブラウザーはファーストパーティとみなし、サードパーティ Cookie の制限対象外になることがあります。

iFrame に埋め込む

背景

利用できるオプション

iFrame 経由で Cookie を通す

例

制限