同源策略、跨域

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请求：

8.png
成功跨域：