iframe中第三方页面授权和登录

由Goofy发布在JavaScript

说到授权我们通常会有3个角色：

  • 用户
  • 授权方
  • 接入方

该文章主要会从授权方和接入方角度分别讨论。

前提

文章的所有讨论基于以下前提

  • 只讨论iframe和父页面是跨域的场景
  • https场景

iframe的局限性

写这篇文章的背景是因为chrome在80版本以上彻底禁止了iframe中第三方页面通过js操作cookie，但是接口可以通过设置sameSite来设置跨域的cookie。

当前这个问题在需要使用cookie的前提下还没有解决方案：https://support.google.com/analytics/thread/35313442?hl=en。

关于sameSite可以参考该文章：https://cloud.tencent.com/developer/article/1589715

safari也有同样的问题：http://vitr.github.io/safari-cookie-in-iframe/

如何处理iframe中js无法操作cookie的问题

而这个问题并不是覆盖所有的浏览器，那么项目中我们怎么对这个问题进行兼容，可以参考下面的策略。

策略来自于：https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/3rd-party-cookie-in-iframe-workaround

cookie.set('the_cookie', 'the_value', '', '', { expires: 365, path: '/' });
const postData = { id: 'checkCookie', state: '0' };
if (cookie.get('the_cookie')) {
    postData.state = '1';
    window.postMessage({ id: 'checkCookie', state: '1' }, '*');
}

window.parent.postMessage(JSON.stringify(postData), '*');
if (window.opener) {
    window.opener.postMessage(JSON.stringify(postData), '*');
}

该段代码的功能就是通过postMessage通知父级页面（父级不仅是iframe的引用页面，也可以是通过window.open打开当前页面的网页）当前页面是否可以通过js操作cookie。

父级页面可以通过接收这个消息来决定sso登录授权的相关策略，是打开新页面还是直接在iframe里面完成业务操作。

我是平台方，第三方帮我实现功能

这个场景是，我是个平台，我提供给第三方一些接口和SSO登录授权，第三方帮我开发一些功能然后通过iframe的方式嵌入到我的页面，让用户可以使用到这个功能。