本节内容:何为跨域?何为同源策略?
- 跨域:但是在实际的场景中,又确实有很多地方需要突破同源策略的限制,也就是我们常说的跨域
- 同源策略:为了保证用户信息的安全,防止恶意网站窃取用户数据,同源策略做了很严格的限制——只允许本域内的脚本读写本域内的资源
一、何为跨域?
说到跨域,有必要先了解一下同源策略。
1)同源策略
同源策略(Same origin policy)是由 NetScape 公司在1995年提出的一种安全策略;
同源策略只是一个约定,提出后被各个浏览器厂商采纳,并以各自的方式实现了同源策略。
-
何为同源策略?
- 同源策略:是浏览器最核心也最基本的安全功能,会约束浏览器的行为;
- 同源策略会限制浏览器:只允许本域内的脚本读写本域内的资源,不允许访问本域外的资源。
-
为何需要同源策略?
为保证用户信息的安全,防止恶意网站窃取用户数据,浏览器需要实现严格限制
例如:我刚登陆了某宝网,此时再去登陆 B 网站,B 网站就可以使用 JS 获取到我的某宝账户信息,然后它做什么都可以了。
-
如何判断是否同源?
判断要素有三:协议、域名、端口号;
三者全部一致才视为同源,即属于同一个域;否则视为非同源。
-
限制范围
在非同源情况下,存在如下受限行为:
- 无法共享 cookie, localStorage, indexDB
- 无法操作彼此的 dom 元素
- 无法发送 ajax 请求
2)跨域
-
域
域(Domain)是Windows网络中独立运行的单位;
域之间相互访问则需要建立信任关系,信任关系是连接在域与域之间的桥梁;
当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理.
-
跨域
- 跨域
突破同源策略的限制,在两个不同的域之间(非同源页面)实现资源交互。
本域(同源)和跨域是一对,就像国内企业和跨国企业,这样更形象理解跨域概念
- 跨域分类
1)使用 Ajax 引发的跨域问题
当调用 Ajax 时:调用 Ajax 发送请求的页面 所在的域,和被请求页面所在的域不一致
2)类似页面嵌入 ifream 引起的跨域问题
当操作 ifream 内引入的元素时:ifream 所属页面的域,和 ifream 引入页面的域不一致
自己分的类,为了方便记忆,刚接触时还把它们弄混了
但本质都一样,即:突破同源策略限制,请求域外资源
二、为何需要跨域?
- 在实际的场景中,确实有很多地方需要突破同源策略的限制,也就是我们常说的跨域
- 如果网站足够简单,一个网页搞定,好吧这样确实不需要跨域,但更多时候,我们需要它
- 例如:
- 我想要制作一个天气预报软件,就需要获取气象局的检测信息
- 我想要制作一个音乐盒,就需要获取音乐信息……