跨域iframe场景下适配Safari ITP策略设置first-party cookie问题咨询

方案1：嵌入侧交互触发方案（推荐，完全无感知） #

利用用户在嵌入方页面的主动交互上下文触发Cookie写入，符合Webkit规范要求，不会被ITP（智能防跟踪）策略拦截。

• 嵌入方页面只需要增加全局用户交互监听，首次触发时给iframe发消息即可：

let cookieInited = false;
const initIframeCookie = () => {
  if(cookieInited) return;
  const formIframe = document.getElementById('your-form-iframe');
  // 建议将*替换为你的iframe实际域名做安全校验
  formIframe.contentWindow.postMessage({type: 'initCookie'}, '*');
  cookieInited = true;
};
// 监听所有常见用户主动交互事件
['click', 'touchstart', 'keydown', 'scroll'].forEach(evt => {
  window.addEventListener(evt, initIframeCookie, {passive: true});
});

• iframe侧接收消息后发起同域请求写入Cookie即可：

window.addEventListener('message', (e) => {
  // 建议校验e.origin为嵌入方域名，避免恶意请求
  if(e.data.type === 'initCookie') {
    fetch('/set-cookie.php', {
      credentials: 'include'
    });
  }
});

方案2：iframe侧自承接交互方案（对接成本最低） #

如果嵌入方改造难度大，可以直接在iframe内增加透明触发层，用户点击iframe区域时先触发Cookie写入再移除蒙层，用户无感知：

<!-- iframe页面顶层插入透明蒙层 -->
<div id="cookie-mask" style="position:fixed;inset:0;z-index:99999;background:transparent;"></div>
<script>
document.getElementById('cookie-mask').addEventListener('click', () => {
  fetch('/set-cookie.php', {credentials: 'include'}).then(() => {
    document.getElementById('cookie-mask').remove();
  });
}, {once: true});
</script>

服务端Cookie配置要求 #

必须配置正确的Cookie属性，否则Safari仍会拦截写入：

PHP侧配置示例 #

setcookie(
  'biz_cookie', // 你的Cookie名称
  'your_cookie_value', // Cookie值
  time() + 86400 * 30, // 有效期30天
  '/',
  '.your-iframe-domain.com', // 替换为你的iframe根域名，前缀带点适配所有子域
  isset($_SERVER['HTTPS']), // 仅HTTPS传输
  true, // 开启HttpOnly避免XSS盗取
  'Lax' // SameSite属性用Lax即可，不要用None
);
// 低版本PHP不支持SameSite参数可以直接写Header
// header('Set-Cookie: biz_cookie=your_cookie_value; Path=/; Domain=.your-iframe-domain.com; Max-Age=2592000; Secure; HttpOnly; SameSite=Lax');

NGINX侧直接配置示例 #

add_header Set-Cookie "biz_cookie=your_cookie_value; Path=/; Domain=.your-iframe-domain.com; Max-Age=2592000; Secure; HttpOnly; SameSite=Lax";

注意事项 #

• 全链路必须使用HTTPS协议，Safari对HTTP站点的Cookie限制更严格，无法正常写入第一方Cookie
• 所有向iframe域名发起的请求都需要携带credentials: 'include'配置，确保Cookie正常传输
• 不要使用SameSite=None属性，该属性要求额外的第三方Cookie权限，大概率会被Safari的ITP策略拦截

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