合作方说他们那边没做限制 我们换了两个浏览器试都一样 位置出来是个白框 换到本地静态页里却能显示 控制台报 Refused to display https://book.b.com in a frame because it set X-Frame-Options to sameorigin。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
curl -sI https://b.io | grep -iE 'x-frame|frame-ancestors'
对方响应头里写了 X-Frame-Options sameorigin 或者用 CSP 的 frame-ancestors 只允许自家域名 iframe 的请求本身是成功的 但浏览器拒绝渲染 这个问题前端没有任何办法绕过。这一点先确认清楚,后面就不用反复试。
「X-Frame-Options 拒绝」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
具体做法是,先分清对方用的是 X-Frame-Options 还是 CSP 的 frame-ancestors 两者改法完全不同 别照着旧文档直接改;让合作方把本站域名加进白名单 这是唯一正路;加不进去就改成新窗口打开 别从前端绕 绕不过去。
改完照着核一遍,嵌入的预约页能正常显示 表单也能提交 控制台不再出现 Refused to display 这条报错。
