多系统跨域问题实现文档

164 阅读2分钟

由于JavaScript同源策略(协议、域名、端口一致)的限制,脚本只能读取和所属文档来源相同的窗口和文档的属性。 对于公司现有业务来说,不同的页面可能放在不同的服务器上,这些服务器二级域名不同,但是拥有相同的主域名,比如 xxxxxx.com

主平台: main.xxxxxx.com

子系统: sub.xxxxxx.com

在某些特殊的场景中,会使用到某些关键信息的共享 ,例如典型的登录跳转问题: 主平台系统登录成功之后,其他的子系统无须重新登录,这时候需要拿主平台系统登录成功的token,传递给到子系统。子系统保存token信息,继续访问后续的api接口。

一开始的解决方案:通过URL传参的形式 (未考虑到主域名一致的情况)

弊端及暴露的问题:

  • url中token信息会明文显示
  • 系统获取到的token信息也会存在异常,因为现有系统机制问题 利用 “两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置document.domain共享 Cookie。”来实现当前token信息共享问题

A网页是 main.xxxxxx.com B网页是 sub.xxxxxx.com 那么只要设置相同的document.domain,两个网页就可以共享Cookie。

前端利用设置document.domain来实现token共享问题

<script type="text/javascript">
    // 设置主域名
    document.domain = /^(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})|localhost$/.test(document.domain) ? document.domain : document.domain.split(".").slice(1).join('.')
</script>

image.png

二、服务器也可以在设置Cookie的时候,指定Cookie的所属域名为一级域名,比如.example.com。

Set-Cookie: key=value; domain=.example.com; path=/

这样的话,二级域名和三级域名不用做任何设置,都可以读取这个Cookie。

第二种方式未进行测试,后续场景中如果有需要,可以尝试此方式(PS:哪位大佬测试能否使用也可告知小弟一声,手动狗头~~).