iframe嵌入第三方链接页面不展示、cookie丢失等问题总结

需求是这样的:有一个第三方开发的系统的页面需要嵌入到我们的项目中,对方提供了一个地址:http://ip:port/path?name=xxx&pw=xxx。

当我们想使用iframe来展示这个地址的时候,出现以下现象和错误:

并且控制台报错:

Refused to frame 'http://xxxx:30002/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

拒绝在框架内展示这个链接,因为其违反了网页安全策略指令XXX;

这是因为一些网站使用了“网页安全策略”,使得iframe不能引入页面。解决办法如下两种:

一:内容安全策略:Content Security Policy

 ​​​​# 不允许被嵌入
Content-Security-Policy: frame-ancestors 'none'
# 只允许被同源的页面嵌入
Content-Security-Policy: frame-ancestors 'self'
# 只允许被白名单内的页面嵌入
Content-Security-Policy: frame-ancestors www.example.com

二:frame选项:X-Frame-Options

这两种策略都是请求头的属性,我们通过nginx的代理将其设置到头里并设置其属性ALLOWALL:

#百度
location /baidu/ {
    proxy_hide_header X-Frame-Options;
    add_header X-Frame-Options ALLOWALL;
    proxy_pass https://www.baidu.com/;
}

================================分割线===================================

如果通过这样的代理你的页面可以出来了,那就不用看下面的了。

通过以上的配置确实,不再会有之前的两个现象出现,但是页面还是没有展示出来,打开开发者模式,观察到有些请求401了,这才看到,登陆set-cookie后,后续的请求头中并没有cookie,这就是cookie丢失。

这是因为:谷歌浏览器cookie中有个samesit属性,是用来限制第三方cookie,从而减少安全风险。Samesit有三个值分别是:Strict、Lax、None,默认是Lax,Lax表示大多数情况不允许发送cookie,但是导航到目标地址的get请求除外

iframe嵌入第三方链接页面不展示、cookie丢失等问题总结_第1张图片 Strict表示严格的不允许发送cookie。None则表示可以发送无任何限制。

所以就出现了:我们在浏览器中打开地址的时候可以正常访问,使用iframe打开后就出现401。

在谷歌低浏览器版本的时候,我们还可以通过设置浏览器的samesit属性来规避这个问题,就是大家百度到的那种解决办法。

但是到后来高版本以后,就没有这个设置了。

解决办法:还是通过nginx代理来解决问题,想办法把cookie中的samesit属性给设置成none,注意:将samesit设置为none的前提是设置cookie的Secure属性,这个属性代表Cookie只能通过HTTPS协议进行访问,所需还需设置cookie的Secure属性,并且配置nginx的https代理。

接下来看配置:

第一步:windows下nginx配置https,linux下配置大同小异,自行百度

第二步:nginx安装headers-more-nginx-module

第三步:代理配置:

	server {
		listen       8990 ssl;
        server_name  xxxx;
		
		ssl_certificate      cert/server.crt;
		ssl_certificate_key  cert/server.key;
		
		
		location ~ .*\.(gif|jpg|jpeg|js|html|png|map|ts|svg|css|do|xml|woff|tff)$
        {
            proxy_pass http://xxxx;
        }
		
		location = / {
			proxy_hide_header X-Frame-Options;
            add_header X-Frame-Options ALLOWALL;	
			proxy_pass http://xxxx/demo/ebipro/easyolap.do;
            //这里相当于改变了请求的头信息,这里我们在之前的set-cookie中追加了Secure,以及Samesit=None
			more_set_headers 'Set-Cookie: $sent_http_set_cookie; Path=/demo; HttpOnly; Secure; SameSite=None';
		}
			
	}

其实以上这些知识都是和网站安全相关的,在开发中属于比较不常见的知识,就当自己的拓展了解一下也是不错的。

你可能感兴趣的:(dubbo)