嵌入 iFrame

由于等候室跟踪访问者进度的方式，您需要指定某些 cookie 属性才能将等候室正确地嵌入到 iFrame 中。

cookie 的 SameSite 属性 ↗指定该 cookie 是否可以与在同一页面上加载的其他域（广告横幅、iFrame）共享。默认情况下，浏览器不会在跨站点子请求上发送 cookie，以防止攻击者窃取或操纵 cookie 中存在的信息。

然而，如果等候室嵌入在 iFrame 中，这种行为可能会阻止等候室正确地对用户进行排队。等候室依赖于 __cfwaitingroom cookie 来跟踪队列中的用户。但是，由于浏览器默认阻止 cookie 到达等候室，因此一个处于活动状态且正在排队的等候室无法对用户进行排队，并且永远不会让他们访问应用程序。

要自定义等候室响应 cookie 的方式，请在创建等候室时包含 cookie_attributes 对象（仅通过 API 可用）。

可用选项包括：

• samesite：在等候室 cookie 上配置 SameSite 属性：

  • auto（默认）：旨在尽可能灵活，默认为 lax，但如果您启用了 Always Use HTTPS（始终使用 HTTPS），则变为 none。
  • lax：不会在典型的跨站点子请求（例如，将图像或框架加载到第三方站点）上发送 cookie，但在用户导航到源站点时会发送。
  • strict：仅在第一方上下文中发送 cookie。
  • none：将始终发送 cookie。

• secure：在等候室 cookie 上配置 Secure 属性，该属性要求通过 https 发出请求：

  • auto（默认）：旨在尽可能灵活，默认为 never，但如果您启用了 Always Use HTTPS（始终使用 HTTPS），则变为 always。
  • always：只能使用 https 请求发送 cookie。
  • never：可以使用 http 或 https 请求发送 cookie。

如果要将等候室嵌入在 iFrame 中，请在创建等候室时在 cookie_attributes 对象上指定以下值（仅通过 API 可用）：

• samesite: none
• secure：如果您启用了 Always Use HTTPS（始终使用 HTTPS），请设置为 auto。如果您禁用了它，请设置为 always。

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"
      }
    }
  ]
}

主要的网络浏览器引入了对第三方 cookie 的限制，这恰好是 iFrame 中的等候室所使用的相同类型的 cookie。Waiting Room 使用 具有独立分区状态的 Cookie (CHIPS) ↗ 来解决这些限制，但是存在一些缺点：

• 在 iFrame 内部和外部同时查看等候室的用户将被视为两个不同的用户，每个实例可能会在不同时间退出队列，并在分析中分别计数。
• 要将等候室嵌入到 iFrame 中，必须通过 HTTPS 访问嵌入页面和被嵌入页面。
• Safari 或衍生自 Safari 的浏览器（如 Orion 和大多数 iOS 浏览器）不支持 CHIPS，除非它们在其设置中禁用了第三方 cookie 阻止。这些用户将被卡在队列的末尾，无法前进，直到队列为空，并且可能在分析中被多次计数。

总的来说，如果在设置和检索等候室 cookie 方面存在问题，您应预期用户会被卡在队列的末尾，并在分析中被计为多个用户。

如果嵌入页面和被嵌入页面共享一个公共域名，这些限制可能不适用。例如，位于 example.com 的页面嵌入了位于 shop.example.com 的等候室，浏览器可能会将其视为第一方，而不受第三方 cookie 限制的约束。