iframe跨域传递信息

同一域名下：

一般前后端都需要进行设置。具体是在设置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);

跨域：

1. CORS（Cross-Origin Resource Sharing）：CORS 是一种官方标准的跨域解决方案，通过服务器设置正确的 CORS 头部，允许跨域请求携带 Cookie。这种方法较为直接和标准化，可以在客户端进行简单的配置。但是，它要求目标服务器支持和正确配置 CORS 头部，并且需要确保跨域请求的安全性。
2. 代理：使用代理服务器来转发跨域请求并进行 Cookie 共享。这种方法可以在代理服务器上对 Cookie 进行处理，以实现跨域共享。代理服务器可以灵活地进行相关逻辑的处理，但需要额外的服务器资源，并且需要自行搭建和维护代理服务器。
3. 同域名下的子域共享：如果两个网站是同一个顶级域名下的不同子域名，可以通过设置 Cookie 的 Domain 属性为顶级域名来实现 Cookie 的共享。这种方法比较简单，不需要进行额外的服务器配置，但需要确保两个网站在同一个顶级域名下，且 Cookie 的 Domain 属性设置正确。

在实际选择方法时，你可以根据具体需求和情况进行权衡和评估。如果目标服务器已经正确配置了 CORS 头部，那么使用 CORS 是一种较为标准和方便的解决方法。如果没有控制目标服务器的配置，可以考虑使用代理来实现跨域共享。而同域名下的子域共享则适用于在同一顶级域名下拥有多个子域名的场景。

需要注意的是，共享 Cookie 可能会带来安全风险和隐私问题，因此在使用任何共享 Cookie 的方法时，务必考虑相关的安全和隐私措施，并确保只在可信的跨域请求中进行共享，并对敏感信息进行适当的保护和加密。

一、主域名相同，子域名跨域：

可以通过设置 Cookie 的 Domain 属性来实现 Cookie 的共享。

下面是实现同域名下的子域共享的步骤：

1. 在两个网站的服务器上设置 Cookie：

   • 在两个网站的服务器端，设置 Cookie 的 Domain 属性为顶级域名（例如，.example.com）。这样，无论是在 a.example.com 还是 b.example.com 设置的 Cookie，在访问这两个子域名下的页面时都可以共享该 Cookie。

2. 设置 Cookie 的 SameSite 属性：

   • 为了增加安全性，建议在设置 Cookie 时同时设置 SameSite 属性。SameSite 属性可以设置为 "Strict"、"Lax" 或 "None"。
   • "Strict" 表示只允许同站点请求携带 Cookie，不允许跨域请求携带 Cookie。
   • "Lax" 表示在导航到跨域目标时，只允许顶级导航（例如，通过链接点击或重定向）携带 Cookie。
   • "None" 表示允许所有的跨域请求携带 Cookie。注意，使用 "None" 需要同时设置 Secure 属性，并且仅在通过 HTTPS 协议提供网站时可用。

需要注意的是，要实现同域名下的子域共享，确保以下几点：

• 两个网站的顶级域名必须相同，例如，example.com。
• 两个网站的子域名必须是顶级域名的不同子域，例如，a.example.com 和 b.example.com。
• 设置 Cookie 时，要将 Domain 属性设置为顶级域名，例如，.example.com。
• 设置 Cookie 的 SameSite 属性以增加安全性。

二、postMessage API 

如果两个网站在同一个顶级域名的不同子域名下，如 a.example.com 和 b.example.com，可以通过一些技巧来实现跨域的 Cookie 共享，如在父页面和嵌套的 iframe 页面之间进行通信。

一种常见的做法是使用 HTML5 中引入的 postMessage API。通过 postMessage，可以在父页面和 iframe 页面之间发送消息，并进行双向通信。通过该方法，可以在父页面中获取到 iframe 页面的内容，包括其中的 Cookie。然后可以将获取到的 Cookie 传递给另一个域名下的页面。

需要注意的是，通过这种方式进行跨域的 Cookie 共享需要在两个网站的代码中进行相应的处理。在父页面中，通过 postMessage API 发送消息给 iframe 页面，并在 iframe 页面中监听消息，获取到 Cookie。然后可以将 Cookie 传递给另一个域名下的页面，例如，使用 postMessage 将 Cookie 发送给目标域名下的父页面进行处理。

使用 postMessage API 进行跨域 Cookie 共享的具体步骤如下：

1. 在父页面中，使用 postMessage API 向 iframe 页面发送消息。
2. 在 iframe 页面中，监听 postMessage 事件，接收来自父页面的消息。
3. 在 iframe 页面中，获取需要共享的 Cookie。
4. 将获取到的 Cookie 通过 postMessage API 发送回父页面。
5. 在父页面中，监听 postMessage 事件，接收来自 iframe 页面的消息。
6. 在父页面中，获取到来自 iframe 页面的 Cookie，并进行相应处理。

三、当参数直接传 

当使用iframe嵌入别的页面时，浏览器会将嵌入的页面作为一个子页面来处理，因此该子页面无法访问主页面的cookie。不过，我们可以通过以下方法将cookie传递到嵌入页面中：

1. 在主页面的cookie中设置一个特定的参数，如token，其值为一串随机的字符串。

2. 在嵌入页面的URL中添加一个参数，如token，其值为主页面中的token值。

3. 嵌入页面可以通过获取URL参数来获取token值，并使用该值来访问主页面的cookie。

以下是一个使用JavaScript实现的代码示例：

主页面：

<iframe src="https://example.com/embedded-page?token=abc123"></iframe>
<script>
  // 设置cookie值
  document.cookie = "token=abc123";
</script>

嵌入页面：

<script>
  // 获取URL参数中的token值
  function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
  }
  
  var token = getParameterByName('token');
  
  // 使用token值来访问cookie
  var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*\=\s*([^;]*).*$)|^.*$/, "$1");
  console.log(cookieValue);
</script>