abinnq / cross-domain

跨域

什么是跨域

跨域： 浏览器不能执行其他网站的脚本, 由浏览器的同源策略导致 同源策略 ： 域名、协议、端口均相同

同源限制了以下：

• Cookie、LocalStorage、IndexedDB 等存储性质内容
• DOM节点
• Ajax 请求

三个标签允许跨资源

• <img src="xxx">
• <link href="xxx">
• <script src="xxx">

实现跨域

• 什么是跨域
• 实现跨域
  • 1.jsonp
  • 2.cors
  • 3.document.domain
  • 4.postMessage
  • 5.windowName
  • 6.location.hash
  • 7.websocket
  • 8.nginx
  • 9.node

1.jsonp

Jsonp (json with padding) 动态创建script标签 script 标签没有同源策略限制, 可以跨域, 兼容性好

缺点

1. 只能get请求
2. xss 攻击 跨站脚本攻击(Cross Site Scripting)

2.cors

CORS: "跨域资源共享"（Cross-origin resource sharing）

1. Access-Control-Allow-Origin 设置那个源可以访问, * 表示任意域名
2. Access-Control-Allow-Credentials 布尔值, 表示是否允许接收Cookie
3. Access-Control-Expose-Headers 允许返回的头 CORS XMLHttpRequest 的对象 getResponseHeader() 仅能接受： cache-Control、ContentLanguage、Content-Type、Expires、Last-Modified、Pragma
4. Access-Control-Allow-Headers 允许携带的头
5. Access-Control-Allow-Methods 允许那些方法
6. Access-Control-Max-Age 预检测 存活时间毫秒

兼容性 需要浏览器和服务器同时支持, 目前所有的浏览器都支持, IE10及以上

3.document.domain

适用主域相同, 不同子域之间的跨域 设置相同的主域, 使同源检测通过

// a.abin.com
// b.abin.com
document.domain = 'abin.com';

4.postMessage

完全不同域的跨域 html5引入的API, 用于多窗口间的跨页面通信

  otherWindow.postMessage(message, targetOrigin, [transfer])

• message: 传输数据
• targetOrigin: 返回的窗口对象
• transfer: 对象所有权传递给消息接受方

接受数据: 监听页面message事件的发生

兼容性 需要IE11及以上

安全性 采用双向安全机制, 通过event.origin 来判断是否来自正确可靠的发送方

5.windowName

window.name: name值在不同的页面(甚至不同域名), 加载后依旧存在, size 在2MB 通过iframe的src属性由外域转向本域, 跨域数据即由iframe的window.name从外域转到本域。

6.location.hash

通过hash值的传递,来实现 a -> c a、b : 3000 c: 4000 利用b 的传递

7.websocket

WebSocket: HTML5的持久化协议, 实现了浏览器与服务器的双工通信, 也是跨越的一种解决方案。 WebSocket 是一种双向通信协议, 在建立连接后,WebSocket的 server 与 client 都能主动向双方发送或接收消息。 WebSocket 在建立时需要借助http协议, 建立好之后就和HTTP无关了

8.nginx

nginx反向代理: 需要搭建一个中转nginx服务器, 用于转发请求 实现思路: 通过nginx配置一个代理服务器：跳板机(域名与domain1相同, 端口不同), 反向代理访问domain2的接口, 并且可以修改 cookie 中domain信息,方便当前域cookie写入, 实现跨域登录

9.node

node中间件代理 同源策略是浏览器要遵循的策略, 而服务器向服务器请求无需遵循同源策略; 代理服务器需要做:

• 接收客户端请求。
• 将请求转发给服务器。
• 拿到服务器 响应 数据。
• 将 响应转发给客户端。

浏览器向代理服务器发送请求, 也要遵循同源策略。