学起来!
阮一峰相关博文:
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或者其他信息有影响,因此不会收到安全问题。
限制范围
“同源政策” 的要求随着互联网的发展越来越严格,目前,如果非同源,有三种行为受到限制:
- Cookie, LocalStorage 和 InnoDB 无法获取
- DOM 无法获取
- AJAX 请求无法发送
这些一般都是跨域读操作,而跨域写操作一般不会受到任何限制。
CORS
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest
请求,从而克服了AJAX只能同源使用的限制。
简介
CORS 需要浏览器和服务器同时支持,整个过程都是浏览器自动完成。 对于开发者而言,CORS 通信和 AJAX 没有任何区别,代码完全一样。
浏览器一旦发现AJAX 请求跨源,就会自动添加一些附加的头信息,有时候还会多出一次附加的请求,但是用户不会有感觉。
因此,实现CORS的关键是服务器,只要服务器实现了 CORS 接口,就可以跨源通信。
两种请求
浏览器将CORS请求分成两类,简单请求(simple request) 和 非简单请求 (not-so-simple request)
只要同时满足以下两个条件,就是简单请求:
- 请求方法是以下三种之一:
- HEAD
- GET
- POST
- HTTP 的 头信息不超出以下几种字段:
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type: 只限三个值:
application/x-www-form-urlencoded
multipart/form-data
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 包括以下几个步骤:
- 创建 XMLHttpRequest 实例
- 发出 HTTP 请求
- 接收服务器返回的数据
- 更新网页数据
概括起来就是 AJAX 通过原生的 XMLHttpRequest
发送请求,得到服务器返回的数据之后,再在当前网页上面进行处理。 虽然当今服务器返回的数据都已经是 JSON 格式,XML 已经过时了,但是 AJAX 这个名字已经变成了一个通用名词,字面含义已经消失了。
优缺点
优点:
AJAX 的最大优点,就是能在不更新整个页面的前提之下维护数据,这就使得Web应用程序更快的回应用户动作,并且避免了在网络上发送那些没有改变的信息。
缺点:
最大的缺点,是其可能破坏浏览器的后退和书签功能。因为AJAX是动态的更新页面,用户无法回到前一个页面状态,但是浏览器仅能记录下历史记录的静态页面。 在AJAX 之中,无法通过点击后退按钮来直接取消其前一次操作。但是目前开发者已经想到了相关的操作方法, 尤其是在HTML5之中,可以直接操作浏览历史,并且将浏览历史以字符串的形式存储在网页状态之中。
进行AJAX 开发的时候,网络延迟要认真考虑,如果读取数据的速度过慢可能会让用户感到厌烦。 正常的操作是会在处理的时候给用户一个进度条告知用户。