目录

  • 跨域概念
  • 为何限制跨域？
  • 如何安全跨域？(如何实现跨域主要参考这里)
  • 如何实现cookie跨域共享？
  • cookie的概念
  • cookie的特性
  • 跨多域共享cookie( a.com和b.com共享 )


跨域概念

在域a下通过 ajax 的方式访问域b下的资源。

域相同满足的条件：域名相同（子域名不同视为不同），端口号相同

为何限制跨域？

请了解跨站脚本攻击（XSS）

如何安全跨域？(如何实现跨域主要参考这里)

在XMLHttpRequest v2标准下，提出了CORS(Cross Origin Resourse-Sharing)的模型，试图提供安全方便的跨域读写资源。目前主流浏览器均支持CORS。（IE10+）

详细参见：http://www.ruanyifeng.com/blog/2016/04/cors.html

如何实现cookie跨域共享？

cookie的概念

由于http请求的无状态，需要在每次交互时通过cookie传递服务器在浏览器中存放的用户信息进而标识用户。

cookie的特性

  1. 由服务器端设置
  2. 包含key,value,domain,path,expireTime等信息（domain,path指定了在访问哪些域的哪些路径下会携带cookie信息）
  3. 服务器端设置cookie时，domain只可以指定自身或者父域，比如sub.a.com只可以指定domain为：sub.a.com或者a.com，而不可以指定sub1.a.com或者subchild.sub.a.com
  4. 在显示指定了cookie域时，访问自身域或者子域时，都会携带cookie，所以，很容易实现当前域及子域的cookie共享。

跨多域共享cookie( a.com和b.com共享 )

方式1：通过隐藏iframe的方式

step1. 用户在a.com登录，登录成功后设置cookie

step2. 登录成功后，浏览器端通过脚本动态生成iframe,通过iframe请求a.com/setCookie

step3. a.com发出重定向请求（http://b.com?cookie1=1&cookie2=2）

step4. b.com接受到上面的请求，并设置b.com下的cookie写回浏览器

step5. 完成

方式2：通过setCookie的方式

step1. 用户在a.com登录，登录成功后设置cookie

step2. 登录成功后，通过脚本读取a.com下的cookie，然后通过ajax跨域请求http://b.com?cookie1=1&cookie2=2

step3. b.com接受到上面的请求，并设置b.com下的cookie写回浏览器

step4. 完成

方式2相较于方式1，存在无法访问httponly类型的cookie的问题。

通过共享了cookie的方式，在访问b.com时，会携带对应域下的cookie信息，从而达到共享的目的。

第二种方式需要服务器端配置跨域（并且开启允许跨域发送cookie）。