1.什么是同源策略
- 源:协议、域名、端口
- 同源:协议、域名、端口相同的页面
- 同源策略:不同源的客户端脚本未经明确授权的情况下,不能读写对方的资源
(1 Cookie、LocalStorage 和 IndexDB 无法读取。
(2 DOM 无法获得。
(3 AJAX 请求不能发送。
2.什么是跨域?跨域有几种实现形式
- 跨域:不同源的页面之间相互访问
- 实现形式:
1、降域
利用脚本语言修改自己的域名,将子域名修改成父域名
例如:child1.a.com.a.com修改成a.com,即降域,需要设置document.domain=‘需要修改成的域名’- 缺点:
1), 只能在域名是父子关系时候用,即同样后缀
2), 只对iframe、cookie有效
3),安全性低,当子域名被攻击或者恶意注入时,父域名下的信息会被暴露。
- 缺点:
2、JSONP(json with padding)
在网页中新添一个<script>元素,里面的src是用于向服务器请求数据,服务器将数据放在一个指定名字的回调函数给传回来,由于网页已经定义了该函数,因此参数被传回后会立即执行该函数。
- 缺点:
同样存在安全性问题,
1)任意网站只要通过jsonp方式就可以跨域访问目标域名下的信息
解决办法:在跨域请求数据时在参数中加上与目标域名约定好的一个token变量,这样其他网站访问该域名时,目的网站通过辨认这个约定好的信息而决定是否可以被跨域访问。
2)不能用post方法获取数据,由于基于src地址引用方式,在地址中附带参数信息,因此只能用get方式获取信息
3)callback方法由于是根据用户需求自己实现的,可能会被恶意注入脚本,获取隐私信息。
3、CORS
CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10(不包括)以上
4、HTML5中的PostMessage方法
5、hash方法
6、window.name的方法
3.jsonp 的原理是什么
在网页中新添一个<script>元素,里面的src是用于向服务器请求数据,服务器将数据放在一个指定名字的回调函数给传回来,由于网页已经定义了该函数,因此参数被传回后会立即执行该函数。
4.CORS是什么
CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10(不包括)以上
练习
1.修改本地host
127.0.0.1 a.com
127.0.0.1 b.com
2.演示同源策略
因为同源策略的限制,a.com下的index.html无法打开b.com下的数据
b.com下可以打开
2.jsonp跨域
3.cors跨域
加上头文件:
ajax请求:
成功跨域: