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请求除外

 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';
		}
			
	}

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