iframe 部分地址拒绝了我们的连接请求

3,819 阅读1分钟

image.png

image.png 仔细看看报错,有两个问题:

  1. 浏览器禁止了携带第三方 cookie 嵌套在 A 页面中的百度不能使用保存在浏览器中的百度的 cookie。浏览器现在没有设置 SameSite 的 cookie 默认 SameSite 值为 Lax,只会跨站传递 Same-Site=None 且 Secure(即协议为 https 协议) 的 cookie。 cookie 的 sameSite 属性有以下选项:

    SameSiteoption
    Strict严格禁止第三方 cookie
    Lax仅对 get 请求发送
    NoneCookie 只能通过 HTTPS 协议发送即必须拥有 Secure 字段

    更多 chrome 规范细节可以打开 chrome 的文档 1文档 2了解

  2. 目标网站 www.baidu.com 设置了X-Frame-Options为sameorigin X-Frame-Options 属性是网站设置在响应头中的字段,该字段有以下选项:

X-Frame-Optionsoption
deny拒绝被嵌套
sameOrigin允许被相同域名的网站嵌套
allow-from example.com/允许被指定域名的网站嵌套

原来是百度对网站做了来源限制,拒绝所有非同域网站将其嵌套啦。如何在 nginx 中配置该字段,可参考MDN。限制 iframe 引用对于网站来说可以从源头上有效的避免很多安全隐患,比如点击劫持就直接被避免了。

并不是所有的网站都会做引用限制,比如element-plus(element-plus.gitee.io/zh-CN/compo…

定位到问题后:

1 解决方案,需要嵌套的url地址在nginx进行修改请求头,让其不限制iframe访问。

2 优化方案,嵌套的地址可能随时改变的话,就只需要给地址的尾椎/browser/,(192.168.1.101:8080/browser/),前面的ip和端口根据/browser/在nginx反向代理,这样就不是写死了。