iframe嵌入页面之Cookies存取

背景：最近工作上遇到个两个不同产品间嵌入的问题。A产品（www.aaa.com）需要使用B产品（www.bbb.coom）的某个功能。于是在A产品中通过iframe嵌入B产品的页面。

一、X-Frame-Options

通过iframe嵌入页面后，首先碰到的问题是如下报错，原因是B产品因为安全性的考虑设置了X-Frame-Options，禁止其他页面通过iframe引入。

解决办法就是设置B产品允许被A产品引用。X-Frame-Options响应头的属性有如下三种：

1、DENY：不能被嵌入到任何iframe。
2、SAMEORIGIN：页面只能被本站页面嵌入。
3、ALLOW-FROM uri：只能被嵌入到指定域名的框架中。

二、单点登录（Single Sign On）

可以正常请求到B产品的页面后，由于没有登录会自动跳到B产品的登陆页面去，需要登陆B产品才能继续使用（这里也是可能无法登陆的），这对于A产品用户肯定是不能接受的，于是我们需要配置上单点登录。单点登录的概念和如何配置就不展开说明了，这里大概说下在当前场景下的登录流程。

1、用户访问产品A并成功登录，访问包含引用B产品的页面。
2、B产品没有登录，前端会跳转B的登陆校验地址，由于已经配置了单点登录，后端会重定向到A产品的登录页面。
3、由于A产品已经登录，A产品会根据传递的重定向地址重定向到B产品的sso校验地址，信息无误会重定向到B的校验地址。
4、B产品后端校验无误，重定向回B产品页面，登陆成功。

三、Cookie的SameSite

本次页面嵌入遇到的最大的问题是整个登陆过程中，因为Cookie的配置无法正常获取并传给后端，导致登陆无法成功，这就是上面说的可能无法登陆的原因。这个一般前后端都需要进行设置。具体是在设置Cookie时，设置SameSite属性。有如下三种：

1、Strict：严格模式，禁止第三方Cookie。跨站点时，不会携带任何Cookie。
2、Lax：正常模式，链接（a标签）、预加载（link）、GET表单（form）等情况下跨站点会携带Cookie。其它大部分跨站点的情况下也是不会携带Cookie。
3、None：不限制，任何情况都会携带Cookie。不过同时需要Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

我是使用的universal-cookie库来设置的Cookie，可以通过设置options属性来控制Cookie的属性。

import Cookies from 'universal-cookie';

const cookies = new Cookies();
const options = {
	secure: true,
	sameSite: 'none',
};
cookies.set('access_token', 'c212e015-d66e-460f-97ab-55fab8e19bed', options);

至此，页面的嵌入在框架层面上就已经正常了，可以正常进行功能开发测试了。