嵌入iframe后HTTP Client Hint请求头无法发送的问题求助

要解决iframe嵌入后无法发送Client Hint请求头的问题，需要从Permissions Policy配置、delegate-ch元标签格式、服务器端响应头三个维度调整：

1. 修正iframe的allow属性，包含所有需要的Client Hint权限 #

你当前的iframe仅指定了ch-dpr;ch-ua-arch，但实际用到的Sec-CH-UA-Mobile、Sec-CH-UA-Platform、Sec-CH-UA-Bitness、Sec-CH-UA-Model对应的Permissions Policy标识符分别是ch-ua-mobile、ch-ua-platform、ch-ua-bitness、ch-ua-model，需要全部加入allow属性：

<iframe src="./iframe/index.html" allow="ch-ua-mobile;ch-ua-platform;ch-ua-bitness;ch-ua-model;"></iframe>

若父页与子页跨域，可在allow中明确指定API的目标origin（更严谨）：

<iframe src="./iframe/index.html" allow="ch-ua-mobile https://cat-fact.herokuapp.com;ch-ua-platform https://cat-fact.herokuapp.com;ch-ua-bitness https://cat-fact.herokuapp.com;ch-ua-model https://cat-fact.herokuapp.com;"></iframe>

2. 修正子页面的delegate-ch元标签格式 #

原元标签格式存在问题，正确写法应为每个Client Hint指定允许委托的目标origin（多提示共享同一origin可合并）：

<meta http-equiv="delegate-ch" content="Sec-CH-UA-Mobile=https://cat-fact.herokuapp.com;Sec-CH-UA-Platform=https://cat-fact.herokuapp.com;Sec-CH-UA-Bitness=https://cat-fact.herokuapp.com;Sec-CH-UA-Model=https://cat-fact.herokuapp.com;" />

简化写法（所有提示委托给同一origin）：

<meta http-equiv="delegate-ch" content="Sec-CH-UA-Mobile Sec-CH-UA-Platform Sec-CH-UA-Bitness Sec-CH-UA-Model=https://cat-fact.herokuapp.com;" />

该标签用于告知浏览器：允许将指定的Client Hint信息携带到目标origin的API请求中。

3. 确保子页面服务器返回正确响应头 #

子页面所在服务器需返回Accept-CH和Accept-CH-Lifetime响应头，引导浏览器收集并缓存Client Hint信息：

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Bitness, Sec-CH-UA-Model
Accept-CH-Lifetime: 86400

Accept-CH-Lifetime设为86400表示缓存24小时，避免重复协商。

额外注意事项 #

• 若父页与子页跨域，父页服务器可通过Permissions-Policy响应头全局配置权限，替代iframe的allow属性：

  Permissions-Policy: ch-ua-mobile=(https://your-iframe-origin.com), ch-ua-platform=(https://your-iframe-origin.com), ch-ua-bitness=(https://your-iframe-origin.com), ch-ua-model=(https://your-iframe-origin.com)
  

• 测试时可通过浏览器开发者工具Network面板，检查子页API请求的请求头是否包含Sec-CH-*字段，同时确认子页面响应头是否存在正确的Accept-CH。

内容的提问来源于stack exchange，提问作者Digvijay Upadhyay