Safari浏览器无法登录天猫
现象
- 最近一段时间登录天猫后，不会出现任何报错，但是登录没有效果
- Safari测试登录淘宝正常，进入天猫显示未登录
- 测试chrome浏览器一切正常
- 跟踪前端调用，发现cookie全部被阻止了
原因
- 查询safari发版记录，在如下版本后，safari的隐私策略更严格
- 简单的说，safari主要做了阻止第三方cookie的操作，在chrome浏览器里也可以这样设置，默认是无痕模式下阻止第三方cookie
分析
- 这里的cookie设置归根到底是同源策略的限制
- 同源策略
- 数据层：⽆法读取Cookie、LocalStorage 和 IndexDB
- DOM 层：跨域脚本⽆法篡改 DOM 结构
- ⽹络层：AJAX 请求不能发送
- 如果没有限制，<img>里可以嵌套haizol的网址，外面封装成一层，用户操作信息都可以被黑客获取。
- 天猫在同源策略下的问题
- 天猫主站的域名tmall.com
- 淘宝主站的域名taobao.com
- 登录时，天猫和淘宝走一套域名
- 同源domin为taobao.com的cookie作为天猫和淘宝session共享的连接，用户感受任何一个地方登录，两边互通。
- 新的限制之后，tmail域名下无法携带taobao.com的域名，同时调用接口也无法写入taobao.com的域名，导致当前登录成功但是没有任何效果的情况。
解决
- 由于在的小公司也遇到同样的情况，思考之后决定新建一个api域名解决
- 原来是A域名和B域名调用api.a.com的接口，现在改成A调用api.a.com，B调用api.b.com
- 同时不改变原始的后端进程，在路由层做动作，api.b.com在nginx层正向代理到api.a.com
- 在api.a.com下的网关里，做cookie的翻译操作
- api.b.com来源的，遇到api.b.com的cookie，复制一份api.a.com的cookie放在Request中
- response时，遇到api.b.com来源的，将api.a.com复制一份，写api.b.com的cookie
- 前端做跳转操作，可以参考单点登录的原理
- 具体时序图如下：
结语
- 遇到问题不要慌，市场上肯定有类似的东西，本次主要参考了单点登录的做法。大多数开发遇到的问题都是思路问题，只要换个角度就好啦~
