同源策略、跨域

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

成功跨域:
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容