最近一直在考虑js的跨域问题,做好了JSONP方法之后对跨域的产生原因以及其限制范围产生了一定的疑惑,看了很多资料,所以打算写一篇小结来对其进行总结。
同源策略的含义
同源是指‘三个相同’:
- 协议相同
- 域名相同
- 端口相同
举例来说,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
:不同源(端口不同)
同源的目的以及限制
举个例子:
比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。
在浏览器中,script,img、iframe、link等标签都可以加载跨域资源,而不受同源限制,但浏览器限制了JavaScript的权限使其不能读、写加载的内容。
同源策略的作用范围
同源策略限制了客户端javascript代码的部分行为
- Cookie、LocalStorage 和 IndexDB 无法读取。
- DOM 无法获得。
- AJAX 请求不能发送。