iframe嵌入项目配置问题汇总

解决iframe嵌套自身项目时遇到的nginx的配置问题

需求是需要将自己当前的项目嵌入到客户的系统里面去。
问题1：iframe直接嵌套时显示拒绝访问导致无法嵌套。
解决方案：在nginx上加配置设置允许访问的白名单。

add_header X-Frame-Options 'ALLOW-FROM http://XXX.com'

这种方式在谷歌和火狐已经废弃，在IE有效

add_header Content-Security-Policy  "frame-ancestors http://XXX.com"

这种方式可以兼容谷歌和火狐，不兼容IE。建议两种方式结合使用。

问题2：此时iframe已经可以在你的域名下嵌套了，但是在谷歌登陆时遇到问题。Chrome升级到80版本后，默认限制了跨域携带cookie给后端，于是在使用iframe跨域嵌入页面时遇到无法传递cookie的问题。

解决方法（在location节点下加入，配置后重载Nginx）：
如果站点Cookie所在目录在根目录/下，设置如下：
proxy_cookie_path / “/; secure; SameSite=None”;
如果站点Cookie所在目录在abc目录下，设置如下：
proxy_cookie_path /abc/ “/abc/; secure; SameSite=None”;
如果无法确定站点Cookie目录，可使用Chrome开发者工具，监测Network下网络请求，找到Response Headers中set-cookie属性值，该值中有path属性值即为Cookie目录，也即上文要替换的/或者/abc/值。
原文链接：https://blog.csdn.net/tmyth/article/details/104340403。