首发于技术杂谈
关于前端跨域的整理

关于前端跨域的整理

一、 跨域资源共享 CORS

对于web开发来讲，由于浏览器的同源策略，我们需要经常使用一些hack的方法去跨域获取资源，但是hack的方法总归是hack。

直到W3C出了一个标准－CORS－"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

首先来说 CORS 需要浏览器和服务端同时支持的，对于兼容性来说主要是ie10+，其它现代浏览器都是支持的。

caniuse.com/#

使用 CORS 跨域的时候其实和普通的 ajax 过程是一样的，只是浏览器在发现这是一个跨域请求的时候会自动帮我们处理一些事，比如验证等等，所以说只要服务端提供支持，前端是不需要做额外的事情的。

两种请求

CORS 的请求分两种，这也是浏览器为了安全做的一些处理，不同情况下浏览器执行的操作也是不一样的，主要分为两种请求，当然这一切我们是不需要做额外处理的，浏览器会自动处理的。

1. 简单请求（simple request）

只要同时满足以下两大条件，就属于简单请求。

条件：

1 ) 请求方法是以下三种方法中的一个：

  • HEAD
  • GET
  • POST


2 ）HTTP的头信息不超出以下几种字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

过程：

对于简单的跨域请求，浏览器会自动在请求的头信息加上 `Origin` 字段，表示本次请求来自哪个源（协议 + 域名 + 端口），服务端会获取到这个值，然后判断是否同意这次请求并返回。

// 请求

GET /cors HTTP/1.1
Origin: https://api.qiutc.me
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

情况一：服务端允许

如果服务端许可本次请求，就会在返回的头信息多出几个字段：

// 返回
Access-Control-Allow-Origin: https://api.qiutc.me
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: Info
Content-Type: text/html; charset=utf-8

这三个带有 `Access-Control` 开头的字段分别表示：

  • - Access-Control-Allow-Origin：必须，它的值是请求时Origin字段的值或者 `*`，表示接受任意域名的请求。
  • - Access-Control-Allow-Credentials：可选，它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。

再需要发送cookie的时候还需要注意要在AJAX请求中打开 withCredentials 属性：

var xhr = new XMLHttpRequest(); 
xhr.withCredentials = true;

需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为`*`，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且原网页代码中的``document.cookie``也无法读取服务器域名下的Cookie。

  • - Access-Control-Expose-Headers

可选。CORS请求时，XMLHttpRequest对象的``getResponseHeader()``方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，``getResponseHeader('Info')``可以返回Info字段的值。

情况二：服务端拒绝

当然我们为了防止接口被乱调用，需要限制源，对于不允许的源，服务端还是会返回一个正常的HTTP回应，但是不会带上 `Access-Control-Allow-Origin` 字段，浏览器发现这个跨域请求的返回头信息没有该字段，就会抛出一个错误，会被 `XMLHttpRequest` 的 `onerror` 回调捕获到。

这种错误无法通过 HTTP 状态码判断，因为回应的状态码有可能是200。

2. 非简单请求

条件：

除了简单请求以外的CORS请求。

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是 application/json。

过程：

1）预检请求

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

预检请求的发送请求：

OPTIONS /cors HTTP/1.1
Origin: https://api.qiutc.me
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.qiutc.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

除了Origin字段，"预检"请求的头信息包括两个特殊字段。

  • - Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

  • - Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

预检请求的返回：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: https://api.qiutc.me
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
  • - Access-Control-Allow-Methods

必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

  • - Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

  • - Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

2）浏览器的正常请求和回应

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。


二、 jsonp

jsonp = json + padding

其实对于常用性来说，jsonp应该是使用最经常的一种跨域方式了，他不受浏览器兼容性的限制。但是他也有他的局限性，只能发送 GET 请求，需要服务端和前端规定好，写法丑陋。

它的原理在于浏览器请求 script 资源不受同源策略限制，并且请求到 script 资源后立即执行。

主要做法是这样的：

  • 在浏览器端：

首先全局注册一个callback回调函数，记住这个函数名字（比如：resolveJson），这个函数接受一个参数，参数是期望的到的服务端返回数据，函数的具体内容是处理这个数据。

然后动态生成一个 script 标签，src 为：请求资源的地址＋获取函数的字段名＋回调函数名称，这里的获取函数的字段名是要和服务端约定好的，是为了让服务端拿到回调函数名称。（如：`qiute.com?`）。

function resolveJosn(result) {
	console.log(result.name);
}
var jsonpScript= document.createElement("script");
jsonpScript.type = "text/javascript";
jsonpScript.src = "https://www.qiute.com?callbackName=resolveJson";
document.getElementsByTagName("head")[0].appendChild(jsonpScript);
  • 服务端

在接受到浏览器端 script 的请求之后，从url的query的callbackName获取到回调函数的名字，例子中是`resolveJson`。

然后动态生成一段javascript片段去给这个函数传入参数执行这个函数。比如：

resolveJson({name: 'qiutc'});
  • 执行

服务端返回这个 script 之后，浏览器端获取到 script 资源，然后会立即执行这个 javascript，也就是上面那个片段。这样就能根据之前写好的回调函数处理这些数据了。

在一些第三方库往往都会封装jsonp的操作，比如 jQuery 的`$.getJSON`。


三、 document.domain

一个页面框架（iframe／frame）之间（父子或同辈），是能够获取到彼此的window对象的，但是这个 window 不能拿到方法和属性（尼玛这有什么用）。

// 当前页面域名 https://blog.qiutc.me/a.html

<script>
function onLoad() {
	var iframe =document.getElementById('iframe');
	var iframeWindow = iframe.contentWindow; // 这里可以获取 iframe 里面 window 对象，但是几乎没用
	var doc = iframeWindow.document; // 获取不到
}
</script>
<iframe src="https://www.qiutc.me/b.html" onload="onLoad()"</iframe>

这个时候，`document.domain` 就可以派上用场了，我们只要把 `blog.qiutc.me/a.html` 和 `qiutc.me/b.html` 这两个页面的 `document.domain` 都设成相同的域名就可以了。

前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致。

但要注意的是，`document.domain` 的设置是有限制的，我们只能把 `document.domain` 设置成自身或更高一级的父域，且主域必须相同。例如：`http://a.b.example.com` 中某个文档的 `document.domain` 可以设成`http://a.b.example.com`、`http://b.example.com `、`http://example.com`中的任意一个，但是不可以设成 `http://c.a.b.example.com`,因为这是当前域的子域，也不可以设成`baidu.com`,因为主域已经不相同了。

这样我们就可以通过js访问到iframe中的各种属性和对象了。

// 主页面：https://blog.qiutc.me/a.html

<script>
document.domain = 'qiutc.me';
function onLoad() {
	var iframe =document.getElementById('iframe');
	var iframeWindow = iframe.contentWindow; // 这里可以获取 iframe 里面 window 对象并且能得到方法和属性
	var doc = iframeWindow.document; // 获取到
}
</script>
<iframe src="https://www.qiutc.me/b.html" onload="onLoad()"</iframe>

// iframe 里面的页面
<script>
document.domain = 'qiutc.me';
</script>

四、 window.name

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个 `window.name` 的，每个页面对 `window.name` 都有读写的权限，`window.name` 是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

比如有一个``qiutc.me/a.html``页面，需要通过a.html页面里的js来获取另一个位于不同域上的页面``qiutc.com/data.html``里的数据。

data.html页面里的代码很简单，就是给当前的window.name设置一个a.html页面想要得到的数据值。data.html里的代码：

<script>
window.name = '我是被期望得到的数据';
</script>

那么在 `a.html` 页面中，我们怎么把 `data.html` 页面载入进来呢？显然我们不能直接在 `a.html` 页面中通过改变 `window.location` 来载入data.html页面（这简直扯蛋）因为我们想要即使 `a.html `页面不跳转也能得到 `data.html` 里的数据。

答案就是在 `a.html` 页面中使用一个隐藏的 `iframe` 来充当一个中间人角色，由 `iframe` 去获取 `data.html` 的数据，然后 `a.html` 再去得到 `iframe` 获取到的数据。

充当中间人的 `iframe` 想要获取到`data.html`的通过`window.name`设置的数据，只需要把这个`iframe`的src设为`qiutc.com/data.html`就行了。然后`a.html`想要得到`iframe`所获取到的数据，也就是想要得到`iframe`的`window.name`的值，还必须把这个`iframe`的`src`设成跟`a.html`页面同一个域才行，不然根据前面讲的同源策略，`a.html`是不能访问到`iframe`里`的window.name`属性的。这就是整个跨域过程。

// a.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
	function getData() {
		var iframe =document.getElementById('iframe');
		iframe.onload = function() {
			var data = iframe.contentWindow.name; // 得到
		}
		iframe.src = 'b.html';  // 这里b和a同源
	}
  </script>
</head>
<body>
  <iframe src="https://www.qiutc.com/data.html" style="display:none" onload="getData()"</iframe>
</body>
</html>

五、 window.postMessage

`window.postMessage(message, targetOrigin)` 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。兼容性：

caniuse.com/#

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

上面所说的向其他window对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个window对象。在讨论第种方法的时候，我们说过，不同域的框架间是可以获取到对方的window对象的，虽然没什么用，但是有一个方法是可用的－`window.postMessage`。下面看一个简单的示例，有两个页面：

// 主页面  blog.qiutc.com

<script>
function onLoad() {
	var iframe =document.getElementById('iframe');
	var iframeWindow = iframe.contentWindow;
	iframeWindow.postMessage("I'm message from main page.");
}
</script>
<iframe src="https://www.qiutc.me/b.html" onload="onLoad()"</iframe>```

// b 页面
<script>
window.onmessage = function(e) {
	e = e || event;
	console.log(e.data);
}
</script>

六、 CSST (CSS Text Transformation)

一种用 CSS 跨域传输文本的方案。

优点：相比 JSONP 更为安全，不需要执行跨站脚本。

缺点：没有 JSONP 适配广，CSST 依赖支持 CSS3 的浏览器。

原理：

通过读取 CSS3 content 属性获取传送内容。

通过创建一个 link 请求到 css 文件，然后通过 `computedStyle = window.getComputedStyle` 获取到指定元素的 style 对象，再通过 `computedStyle .content` 获取到内容：

具体页面中：

function handle (fn) {

  var computedStyle = getComputedStyle(span, false);

  var content = computedStyle.content;

  console.log('content: %s', content);

  var match = content.match(/[\w+=\/]+/);

  // base64 解码

  if (match) {
      try {
          content = decodeURIComponent(escape(atob(match[0])));
      } catch (ex) {
          fn(ex);
          return;
      }
  }

  fn(content);
}

这里的 `fn` 是我们获取到内容执行的函数；

服务端可以返回的 css 文件内容：

`
  @keyframes csst {
    from {}
    to {
      color: red;
    }
  }
  @-webkit-keyframes csst {
    from {}
    to {
      color: red;
    }
  }
  #csst {
    content: "${text}";
    animation: cost 2s;
    -webkit-animation: ${id} 2s;
  }`;

这里的 `text` 就是我们可以获取到的数据；

我们可以通过监听函数 animationstart/webkitAnimationStart 来判断接收到 css 文件的时机：

// 我们在服务端给 #csst 元素设置了动画（当然这个是可配置的）
var cs = document.getElementById('cast');

cs.addEventListener('animationstart', handler, false);

cs.addEventListener('webkitAnimationStart', handler, false);

这样我们就可以从 content 中获取到数据了。


七、 利用flash

flash 嘛，这个东西注定灭亡，不想说了。。。


参考：

ruanyifeng.com/blog/201

https://caniuse.com

github.com/zswang/csst

发布于 2016-12-06 22:45
前端开发
前端工程师
JavaScript

文章被以下专栏收录