CORS相关梳理

CORS的概念和同源政策相关的梳理,加上AJAX梳理

Posted by Haiming on December 13, 2019

学起来!

阮一峰相关博文:

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

https://www.ruanyifeng.com/blog/2016/04/cors.html

同源政策概述

含义

同源政策(Same-origin policy),最开始是指A网页设置的Cookie,B网页不能打开,除非这两个网页“同源”。所谓的“同源”是指三个相同:

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

举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下。

  • http://www.example.com/dir2/other.html:同源
  • http://example.com/dir/other.html:不同源(域名不同)
  • http://v2.www.example.com/dir/other.html:不同源(域名不同)
  • http://www.example.com:81/dir/other.html:不同源(端口不同)

目的

目的简而言之就是保证用户信息的安全,防止恶意的网站窃取数据。

如果不同的网站之间的Cookie都可以共享,那么会发生很严重的安全问题。例如在Cookie之中放有用户隐私的数据,银行卡密码等等。而且Cookie之中往往存有用户的登录状态,如果用户没有退出登录,那么其他网站就可以冒充该用户进行所有操作。

同源政策同时规定提交表单的情况不属于同源政策。按照我个人的理解,因为提交表单的情况是表单直接发送给另外一个网址,这个过程并不会对本地的Cookie或者其他信息有影响,因此不会收到安全问题。

限制范围

“同源政策” 的要求随着互联网的发展越来越严格,目前,如果非同源,有三种行为受到限制:

  1. Cookie, LocalStorage 和 InnoDB 无法获取
  2. DOM 无法获取
  3. AJAX 请求无法发送

这些一般都是跨域读操作,而跨域写操作一般不会受到任何限制。

CORS

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。

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

简介

CORS 需要浏览器和服务器同时支持,整个过程都是浏览器自动完成。 对于开发者而言,CORS 通信和 AJAX 没有任何区别,代码完全一样。

浏览器一旦发现AJAX 请求跨源,就会自动添加一些附加的头信息,有时候还会多出一次附加的请求,但是用户不会有感觉。

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

两种请求

浏览器将CORS请求分成两类,简单请求(simple request) 和 非简单请求 (not-so-simple request)

只要同时满足以下两个条件,就是简单请求:

  1. 请求方法是以下三种之一:
    1. HEAD
    2. GET
    3. POST
  2. HTTP 的 头信息不超出以下几种字段:
    1. Accept
    2. Accept-Language
    3. Content-Language
    4. Last-Event-ID
    5. Content-Type: 只限三个值:
      1. application/x-www-form-urlencoded
      2. multipart/form-data
      3. text/plain

凡是不同时满足以上两个条件的,都属于非简单请求

AJAX

下面是一些本文章涉及到的教程或者介绍:

https://javascript.ruanyifeng.com/bom/ajax.html

https://zh.wikipedia.org/wiki/AJAX

简介

我们都知道,在传统的浏览器之中,采用的HTTP 通信是用户在浏览器之中键入一个网址,或者通过form向服务器发送内容, 这时候浏览器就会向服务器之中发送请求。

后来在1999年,IE 浏览器加入了一个新功能:允许 JavaScript 脚本向服务器发送 HTTP 请求。这个功能在后来的Gmail和Google Map之中引起了广泛重视。 2005 年 2月, AJAX 这个词第一次提出,其是 Ascynchronous JavaScript and XML 的缩写,指的是:通过JavaScript 的异步通信,从服务器之中提取XML来提取数据用来更新当前网页的对应部分, 而不用刷新整个网页。后来,AJAX 就成为了使用 JavaScript 脚本来发起HTTP通信的代名词,也就是说,只要使用脚本发起通信,就可以叫做 AJAX 通信。

具体而言,AJAX 包括以下几个步骤:

  1. 创建 XMLHttpRequest 实例
  2. 发出 HTTP 请求
  3. 接收服务器返回的数据
  4. 更新网页数据

概括起来就是 AJAX 通过原生的 XMLHttpRequest 发送请求,得到服务器返回的数据之后,再在当前网页上面进行处理。 虽然当今服务器返回的数据都已经是 JSON 格式,XML 已经过时了,但是 AJAX 这个名字已经变成了一个通用名词,字面含义已经消失了。

优缺点

优点:

AJAX 的最大优点,就是能在不更新整个页面的前提之下维护数据,这就使得Web应用程序更快的回应用户动作,并且避免了在网络上发送那些没有改变的信息。

缺点:

最大的缺点,是其可能破坏浏览器的后退和书签功能。因为AJAX是动态的更新页面,用户无法回到前一个页面状态,但是浏览器仅能记录下历史记录的静态页面。 在AJAX 之中,无法通过点击后退按钮来直接取消其前一次操作。但是目前开发者已经想到了相关的操作方法, 尤其是在HTML5之中,可以直接操作浏览历史,并且将浏览历史以字符串的形式存储在网页状态之中。

进行AJAX 开发的时候,网络延迟要认真考虑,如果读取数据的速度过慢可能会让用户感到厌烦。 正常的操作是会在处理的时候给用户一个进度条告知用户。