跨域理解

2019年9月14日 181次阅读 来源: Leon

本文整理了一些有关跨域的基础知识和细节问题。

什么是跨域

个人一句话解释：如果 url A 与 url B 不同源，那么页面A不能获取页面B的资源。这里有两个关键词：url 和 同源，浏览器的同源策略就是针对两个url，它们满足以下三个条件，才是同源：

  • 协议相同
  • 域名相同
  • 端口相同

https://www.baidu.com/

这里面有两个细节需要提及，域名是包括//到/的所有部分www.baidu.com；没有指定端口号默认是:80端口。

如果一个页面中的JS可以任意发起http跨域获取其他页面上的资源，这是一件很可怕的事，举个例子：

  1. 张三访问了某银行网站 abank.com，服务器端验证后会在响应头中加入Set-Cookie字段，然后下次张三再发起请求，浏览器会自动将cookie附加在HTTP请求的首部字段Cookie中，服务器端就知道张三已经登录过了。
  2. 张三接着访问了危险页面 danger.com，这个页面中写了一些Ajax，它发起请求访问abank.com，这一行为用户不能察觉，如果可以跨域发起请求，那么浏览器同样会自动将cookie附加在HTTP请求的首部字段Cookie中，这样这个危险危险网站就登陆了张三的银行账户。

所以用同源策略来限制跨域是必须的。

这里我思考了一个问题，在浏览器地址栏里输入url为什么没有出现跨域问题？
要明确，同源策略是浏览器的行为，在地址栏中输入url是用户主观行为，所以浏览器是不判为跨域的。那么同源限制的对象其实是页面中发起http请求的js。那同源限制的行为有哪些呢？有以下三种：

  • Cookie、LocalStorage 和 IndexDB 无法读取。
  • DOM 无法获得。
  • AJAX 请求不能发送。

接下来说说规避跨域限制的集中方式

针对AJAX的跨域

JSONP

JSONP利用的的是：<script>、<img>这些标签下载url中的资源是没有跨域限制的。
它的基本做法是：网页添加一个<script>元素，向服务器请求 JSON 数据，这种做法不受同源政策限制；服务器收到请求后，将JSON放在一个指定名字的回调函数里传回来。所以，顾名思义，JSONP = JSON with padding：填充式 JSON，其实就是服务器端把 JSON 作为回调函数的参数，返回这个回调函数。

<script type="text/javascript">
  function foo(data) {
    console.log('Your public IP address is: ' + data.ip);
};
<script>

<script type="text/javascript" src="http://example.com/ip?callback=foo"></script>

上面的script标签向服务器example.com发出请求，该请求有一个查询字符串callback参数，用来指定回调函数的名字；服务器发现请求中有callback参数，就会将JSON作为指定回调函数的参数，回调函数作为脚本返回；脚本返回后，会直接作为代码运行，这时，只要浏览器定义了foo函数，该函数就会立即调用。

JSONP的缺点在于只能发GET请求。

CORS

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

阮一峰老师关于CORS的文章非常细致，跨域资源共享 CORS 详解，这里仅仅梳理下提纲备查。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-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

凡是不同时满足上面两个条件，就属于非简单请求。

简单请求

简单请求的CORS分为以下几步：

  1. 浏览器发现AJAX请求跨源，在请求头中添加Origin字段，它的值是http请求的源url；
  2. 服务器根据Origin的值决定是否同意这次请求；

  3. 如果Origin指定的域名在服务器许可范围内，则会在报头中添加以下三个字段：

    • Access-Control-Allow-Origin
      该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求.
    • Access-Control-Allow-Credentials
      该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器，另一方面，开发者必须在AJAX请求中打开withCredentials属性。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
    • Access-Control-Expose-Headers
      该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段。
  4. 如果如果Origin指定的域名不在服务器许可范围内，响应头中没有Access-Control-Allow-Origin，浏览器就会抛出错误，中断这个http请求。

非简单请求

简单请求的CORS分为以下几步：

  1. 浏览器在正式请求之前，先发送一个预检请求，预检请求的请求方法是OPTIONS，请求头中带以下三个字段：

    • Access-Control-Request-Method
      该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法
    • Access-Control-Request-Headers
      可选，该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段

  2. 如果服务器端预检不通过，浏览器报错；如果通过，返回的响应头中包含以下几个字段：

    • Access-Control-Allow-Origin
      一定包含
    • Access-Control-Allow-Methods
      一定包含，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。
    • Access-Control-Allow-Credentials
      可选
    • Access-Control-Max-Age
      可选，用来指定本次预检请求的有效期，单位为秒，未过期的话不用再发送预检请求。
  3. 一旦服务器通过了”预检”请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

WebSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

针对Cookie

Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。

举例来说，A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那么只要在两个网页的脚本中设置的document.domain=’example.com’，两个网页就可以共享Cookie。

针对iframe

如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题:

  • 片段识别符（fragment identifier）
  • window.name
  • 跨文档通信API（Cross-document messaging），HTML5中的window.postMessage

参考文章：
浏览器同源政策及其规避方法
跨域资源共享 CORS 详解

    原文作者：Leon
    原文地址: https://segmentfault.com/a/1190000015847360
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞