为何该页面在Safari中嵌入iframe失效，Firefox等浏览器正常？

问题描述 #

我负责的工作中遇到iframe嵌入异常：将URL https://www.alliedautoins.com/vautogeneric7_button2/step1.html 嵌入全屏iframe后，在表单首页输入邮编点击“Get Quote”，加载动画持续转动，无法跳转到框架内下一页，但该流程在Firefox中可正常运行。已尝试20余种代码变体均无效，页面部署地址为 https://www.insurancepanda.com/datalot/form.php。

当前使用的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
 <head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<meta name="robots" content="noindex">

    
 <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>

</head> 
<body>
<div id="content">
<iframe width="100%" height="100%" src="https://www.alliedautoins.com/vautogeneric7_button2/step1.html"></iframe>

</div>

 </body></html>

排查与解决方向 #

1. 跨域安全策略限制 #

Chrome、Edge等浏览器对跨域iframe的安全限制比Firefox更严格，目标站点可能设置了X-Frame-Options或Content-Security-Policy (CSP)头，阻止非信任域名的iframe后续请求。

• 打开浏览器开发者工具（F12）的Network面板，查看点击“Get Quote”后的请求状态，确认是否出现403或跨域相关错误。
• 若为CSP问题，需目标站点调整frame-ancestors规则，允许https://www.insurancepanda.com作为嵌入来源；若为X-Frame-Options，需对方设置为ALLOW-FROM https://www.insurancepanda.com（该属性已废弃，优先推荐CSP方案）。

2. 补充iframe权限属性 #

给iframe添加必要的权限属性，尝试适配目标站点的验证逻辑：

<iframe width="100%" height="100%" src="https://www.alliedautoins.com/vautogeneric7_button2/step1.html" allow="cross-origin" referrerpolicy="origin"></iframe>

• allow="cross-origin"：允许iframe发起跨域请求
• referrerpolicy="origin"：控制请求来源信息的传递，避免目标站点因referrer验证失败拦截请求

3. 第三方Cookie/存储权限问题 #

Chrome等浏览器默认阻止第三方Cookie，若目标表单依赖Cookie维持会话，提交后会因会话丢失导致加载卡住：

• 给iframe添加权限属性：allow="storage-access-by-user-activation; cookies"
• 检查浏览器设置，确认是否开启了阻止第三方Cookie的选项，可临时关闭测试

4. 文档类型与兼容性优化 #

当前使用XHTML 1.0 Transitional文档类型，换成HTML5 doctype可减少兼容性问题：

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="robots" content="noindex">
    <style>
        body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
        #content { position: absolute; inset: 0; }
    </style>
</head>
<body>
    <div id="content">
        <iframe width="100%" height="100%" src="https://www.alliedautoins.com/vautogeneric7_button2/step1.html"></iframe>
    </div>
</body>
</html>

5. 目标站点的iframe检测逻辑 #

检查目标表单的JS代码，是否存在检测当前页面是否在iframe中的逻辑（如判断window.top !== window.self），若有则会拦截后续流程，需目标站点调整逻辑，允许你的域名嵌入。

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