浏览器的跨域访问

图片来自nidan-455298会员

跨域问题是在web开发中一个常见的问题,其源自浏览器的同源安全策略,却影响着web网页对cookie/ajax/web storage等信息的跨域共享访问,本文将对同源策略、跨域问题的由来、影响的场景类别和常见解决方案进行了梳理,最后给出代码演示样例。

1. 同源安全策略

在浏览器中,有一个最核心和基本的安全策略,叫做同源策略(same-origin policy),它是指两个网页,若其协议、主机名、端口都相同的情况下,则两个网页属于同源,两者共享同源的数据存储,允许对共享数据的互通操作。

这个同源策略的概念最早由Netscape公司在1995年由其浏览器产品Netscape Navigator 2中引入,此后被所有浏览器采用。

为了理解同源策略,首先了解一个常见的网页url访问地址格式,如下,

scheme://host:port/path

其中:

  • scheme为通信协议,常见的有http/https/ftp等。
  • host为访问的主机名,常见的有域名、IP地址等。
  • port为通信端口号,若不指定的话,则为通信协议的缺省设置。
  • path为访问路径。

根据上面的概念,可以知道同源是指scheme + host + port三者都相同。下面我们看看哪些情况符合同源策略,哪些情况下不符合。

如下给出一些同源策略的规则判断样例,对标的网页:http://a.demo.com/dir/x.html

URL 是否同源 说明
http://a.demo.com/dir2/y.html 同源 只是路径不同,无影响
http://a.demo.com/dir/inner/y.html 同源 只是路径不同,无影响
http://a.demo.com:81/dir/z.html 非同源 端口不同
http://b.demo.com/dir/x.html 非同源 主机名不同,b.demo.com/td>
http://c.a.demo.com/dir/x.html 非同源 主机名不同,c.a.demo.com
https://a.demo.com/dir/x.html 非同源 通信协议不同,https
http://127.0.0.1/dir/x.html 非同源 主机名不同,即a.demo.com指向127.0.0.1的IP地址。
http://a.demo.com:80/dir/x.html 看情况 根据浏览器的实现
| URL | 是否同源 | 说明 |
| ---: | --- | --- |
| http://a.demo.com/dir/inner/y.html | 同源 | 只是路径不同,无影响|
| http://a.demo.com/dir2/y.html | 同源 | 只是路径不同,无影响 |
| http://a.demo.com:81/dir/z.html | 非同源 | 端口不同 |
| http://b.demo.com/dir/x.html | 非同源 | 主机名不同,b.demo.com |
| http://c.a.demo.com/dir/x.html | 非同源 | 主机名不同,c.a.demo.com |
| https://a.demo.com/dir/x.html | 非同源 | 通信协议不同,https |
| http://127.0.0.1/dir/x.html | 非同源 | 主机名不同,即a.demo.com指向127.0.0.1的IP地址。 |
| http://a.demo.com:80/dir/x.html | 看情况 | 根据浏览器的实现 |

2. 什么是跨域问题?

非同源的网页之间,由于同源安全策略的限制,一些数据信息(比如cookie\storage)会被浏览器隔离,JavaScript的Ajax请求也会被拦截并禁止。

但是,不同源的网页之间信息共享是很常见的场景需求,以典型的天猫电商网站为例,其有如下几个子域,

  • tmall.com 天猫电商根域名
  • list.tmall.com 天猫电商子域-列表
  • vip.tmall.com 天猫电商子域-会员
  • chaoshi.tmal.com 天猫电商子域-超市

上面各个子域页面互相属于非同源,受到同源策略的限制。

要实现这些子域之间数据信息访问共享,这就是本文要讨论的跨域问题。

3. 影响的场景类别

跨域问题本身是一个跨源的需求,根据同源策略的定义可知,这是在浏览器的应用场景中才会出现的问题。

浏览器在实现同源策略,保证网页安全的同时,也为跨源的信息共享提供各种途径和技术解决方案。为了方便讨论,根据浏览器的信息存储类别和获取方式,我们可以将跨域访问的需求划分如下三种,

  • cookie:获取另外一个域的cookie信息
  • ajax:通过ajax访问另外一个域的API接口,获取跨域接口数据
  • web storage:获取另外一个域的web storage存储信息

下面将分别对这三种应用场景下的跨域访问进行讨论。

4. Cookie的跨域访问

Cookie是在服务器端生成,发送给浏览器保存的一个键值对,其主要包括如下几个属性,

  • Key/Value:这是cookie的键名和值
  • Domain:这是cookie所属的域,比如.demo.com,则表明该cookie属于所有*.demo.com的域
  • Path:这是cookie所属的路径
  • Expires / Max-Age:过期的日期时间 / 最大存活时长
  • Secure:是否以安全方式传输cookie,以防止中间人攻击
  • HttpOnly:是否只能以Http/Https方式传输cookie,使得JS脚本无法获取,防止XSS攻击

上面Domain/Path的两个属性控制着cookie可以共享的域和路径。需要注意的是,cookie只和域+路径有关,和端口无关,例如a.demo.com:80和a.demo.com:81其实属于同一个域,两者共享cookie。

下面我们看下cookie的共享策略和规则判断。

假如对标的一个网页为:http://a.demo.com/dir/x.html,其页面的cookie属性设置为,

  • domain = .demo.com
  • path = /

那么这个网页上的cookie和如下网页的共享关系见下表,

URL 是否共享 说明
http://a.demo.com/dir2/y.html 共享 路径不同,无影响
http://a.demo.com/dir/inner/y.html 共享 路径不同,无影响
http://a.demo.com:81/dir/z.html 共享 端口不同,无影响
http://b.demo.com/dir/x.html 共享 二级域名不同,无影响
http://c.a.demo.com/dir/x.html 共享 三级域名不同,无影响
https://a.demo.com/dir/x.html 共享 通信协议为HTTPS,无影响
http://127.0.0.1/dir/x.html 不共享 主机名不同,无法共享。
http://a.demo.com:80/dir/x.html 共享
| URL | 是否共享 | 说明 |
| ---: | --- | --- |
| http://a.demo.com/dir/inner/y.html | 共享 | 路径不同,无影响 |
| http://a.demo.com/dir2/y.html | 共享 | 路径不同,无影响 |
| http://a.demo.com:81/dir/z.html | 共享 | 端口不同,无影响 |
| http://b.demo.com/dir/x.html | 共享 | 二级域名不同,无影响 |
| http://c.a.demo.com/dir/x.html | 共享 | 三级域名不同,无影响 |
| https://a.demo.com/dir/x.html | 共享 | 通信协议为HTTPS,无影响 |
| http://127.0.0.1/dir/x.html | 不共享 | 主机名不同,无法共享。 |
| http://a.demo.com:80/dir/x.html | 共享 | - |

可以对上表和上一个同源策略规则判断表,两者有很大的差别。

除了设置每个cookie的domain属性,两个网页之间还可以设置全局文档属性document.domain,实现cookie共享。若document.domain = demo.com,则下面两个网页的cookie共享,

  • http://a.demo.com/dir/x.html
  • http://b.demo.com/dir/y.html

5. Ajax的跨域请求

Ajax是一个异步请求访问后端API接口的方法,受到同源策略的影响,在请求跨域的接口时,会收到如下的错误消息(Chrome浏览器),

Failed to load http://a.demo.com/test No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://a.demo.com' is therefore not allowed access.

可以看到,浏览器禁止了Ajax的跨域请求。

为了实现Ajax的跨域请求,一般有如下两种途径,

  • JSONP:JSON with Padding,数据信息是JavaScript脚本获取
  • CORS:Cross-Origin Resource Sharing跨源资源共享,通过配置服务器实现跨域支持

此外,HTML5还引入了异步通信WebSocket技术,其专门用于长连接实时数据的通信,它一直作为Ajax的异步替代方案应用于异步请求。WebSocket其由于在协议中自带origin字段,所以不受同源策略限制,其跨域的安全主要由后端服务器控制。但是目前WebSocket的浏览器兼容性没有Ajax技术支持的好,应用推广还比较受限。

5.1 JSONP

英文全称为JSON with Padding,数据信息是通过一段JavaScript脚本进行传输,其信息由JS编译器识别,而不是通过JS解析器解析。

JSONP的使用方法很简单,其首先在HTML DOM中通过JavaScript代码动态添加一个script元素,

<script type="text/javascript" src="http://a.demo.com/test"></script>

这个script元素指向一个跨源的API接口地址。浏览器发现有一个新增script元素后,会向这个地址发送一个GET请求,而服务器则会返回一个JavaScript脚本的消息给浏览器,例如,

alert("Hello, This is message from a.demo.com.");

上面的"Hello, This is message from a.demo.com."就是跨域获取的数据信息。浏览器在拿到返回消息后,执行该JS脚本。上面的脚本将会在浏览器中弹出一个提示框。需要注意的是,执行的函数可以通过参数传给服务器,

<script type="text/javascript" src="http://a.demo.com/test?callback=test"></script>

则服务器可以将返回的JavaScript脚本变为,

test("Hello, This is message from a.demo.com.");

JSONP的方式简单易用,兼容所有浏览器,主要缺点是只能应用于GET请求。

5.2 CORS

英文全称为Cross-Origin Resource Sharing,中文意思为跨源资源共享,这是一个W3C的标准,其支持所有类型的HTTP请求跨域调用,包括GET/PUT/POST/DELETE等等。

CORS需要浏览器和服务器的支持,目前绝大多数的浏览器都支持该功能,所以只需要配置好服务器的支持即可。

整个CORS的大概流程为,即将发起一个跨Ajax调用时,当浏览器发现这是一个跨域请求,会在请求头中添加Origin字段,表明该请求的来源,并先向服务发起一次查询,询问是否该Ajax请求调用是否合法,若合法,则像和正常Ajax请求一样执行(请求头中会添加Origin字段)。

请求头中的Origin需要和服务器上接口配置的Access-Control-Allow-Origin/Access-Control-Allow-Methods相匹配,下面是给出几个样例的匹配判断。

CORS的接口配置 说明 请求样例
Access-Control-Allow-Origin: http://a.demo.com/test
Access-Control-Allow-Methods: GET, PUT
允许来自指定origin的GET/PUT请求 GET http://a.demo.com/test
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
允许来自任何域的任何请求 路径不同,无影响

有时候希望服务器允许多个origin的请求,按照W3C的建议,这个一般在服务器动态配置,如下是一个实现的简单代码样例,

$http_origin = $_SERVER['HTTP_ORIGIN'];

if ($http_origin == "http://a.demo.com" || $http_origin == "http://b.demo.com" || $http_origin == "http://c.demo.com")
{  
    header("Access-Control-Allow-Origin: $http_origin");
}

6. Web Storage的跨域访问

浏览器的Web存储分为如下几种,

  • Local Storage:通过key/value形式进行的数据存储,没有时间限制
  • Session Storage:在一个会话中的数据存储,一旦重启浏览器,则数据会消失
  • IndexedDB:索引数据存储(HTML5引入)

由于同源策略的影响,非同源的网页之间的存储信息是相互隔离的。同时,同源安全策略禁止了不同域的网页之间不能进行相互的DOM直接操作,以防止xss安全攻击。这些都有效地保证网页的安全和隐私,但另一方面,网页之间的沟通交互也收到了限制,即使已知两个网页之间的通信是安全的。

为了保持同源安全策略,同时实现跨域的网页通信,在HTML5中引入了cross-document messaging(跨文档通信)的功能,使得网页之间消息通信成为可能。

一个常见的做法是,在当前页面中嵌入一个隐藏的iframe窗口,这个iframe引入另外一个域的网页。通过父窗口和iframe窗口的跨文档通信,实现存储信息的相互访问读取。整个通信主要使用到两个API,(下面是对API的简要说明)

window.postMessage(message, targetOrigin);

第一参数为发送的消息,第二参数为接受窗口的origin,例如"http://a.demo.com",或者设为"*",表示不限制接受窗口的origin,

window.addEventListener(type, receiver, userCapture);

第一个参数为消息类别,第二个参数为回调函数,第三个参数为在DOM树中是否优先于它下方的任何其它事件目标。

父窗口代码,

$("#btn_send_msg").click(function () {
   let iframe = document.getElementsByTagName('iframe')[0];
   iframe.contentWindow.postMessage('Hello world', '*');
});

iframe窗口代码,

window.addEventListener('msg', function (msg) {
  if (msg.origin == window.parent) {
    localStorage.setItem('message', msg.data);
    msg.source.postMessage('message is saved into local storage.', msg.origin);
  }        
}, false);

可以看到,我们通过cross-document messaging这个消息通道,可以实现跨域的存储信息共享。

7. 小结

下面对浏览器的跨域解决方案做个总结,

  • Cookie
    • 通过设置Cookie的共享域属性 domain = .demo.com。
    • 通过设置网页文档的共享域属性document.domain = demo.com。
  • Ajax
    • JSONP:通过加载JavaScript脚本实现跨域的GET请求。
    • CORS:通过配置服务器的CORS,接受跨域请求。
    • WebSocket:作为Ajax的替代方案,无跨域限制。
  • Web Storage
    • Cross-Document Messaging:通过隐藏的iframe窗口,打开跨域访问的通信通道,实现对跨域的存储信息访问。

8. 演示代码样例

演示代码样例见下面的git代码仓库地址,详细使用说明见工程README文件。

https://gitee.com/pphh/simple-demo/tree/master/demo-cors

9. 参考文献

  1. Wiki – Same Origin Policy
    https://en.wikipedia.org/wiki/Same-origin_policy

  2. MDN – Same Origin Policy
    https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

  3. Uniform Resource Locators (URL)
    https://tools.ietf.org/html/rfc1738

  4. Wiki - Cookie
    https://en.wikipedia.org/wiki/HTTP_cookie

  5. Wiki – Cross Site Scripting (XSS)
    https://en.wikipedia.org/wiki/Cross-site_scripting

  6. W3C – WebSockets
    https://www.w3.org/TR/websockets/

  7. W3C – CORS
    https://www.w3.org/TR/cors/

  8. W3C - 多个origin的CORS配置
    https://www.w3.org/TR/cors/#resource-implementation

  9. W3C - HTML5 Web Messaging
    https://www.w3.org/TR/webmessaging/

  10. W3C - HTML5
    https://www.w3.org/TR/html5/

  11. 阮一峰 - 浏览器同源政策及其规避方法
    http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

发表评论

邮箱地址不会被公开。 必填项已用*标注

*

code