同源策略与跨域资源共享

工作中,经常会遇到需要
跨域请求数据的情况。由于浏览器的
同源策略,导致无法直接通过ajax拿到后台数据。解决这个问题的方式之一就是
JSONP。还有一种方式更高效简单——
跨域资源共享(Cross-origin Resource Sharing ),采用这种方式,前端不需要做任何的修改,和平时一样写ajax方法,就能够拿到后台数据。

同源策略(same-origin policy)—— 浏览器安全的基石。

含义:

1995年,同源政策由Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初的含义是指A网页cookie,B网页不能打开,除非这A、B两个页面同源。所谓同源指的是三个相同。协议相同,域名相同,端口相同。
举例来说,现在打开的页面是http://www.baidu.com网址。同源情况如下:

https://www.baidu.com         // 不同源(协议不同)
http://wenku.baidu.com        // 不同源(域名不同)
http://www.baidu.com:8080     // 不同源(端口不同)
http://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0       //同源

目的:

保证用户信息安全,防止网站数据的窃取。

设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?

很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。

由此可见,”同源政策”是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

限制范围:

随着互联网的发展,”同源政策”越来越严格。目前,如果非同源,共有三种行为受到限制。

//(1) Cookie、LocalStorage 和 IndexDB 无法读取。

//(2) DOM 无法获得。

//(3) AJAX 请求不能发送。

跨域资源共享(Cross-origin resource sharing)

跨域资源共享(CORS)是一个W3C标准,它允许浏览器向跨源服务器发出
XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

简介:

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

简单的说,遇到再遇到跨域问题,如果通过CORS来解决的话,前端工作者正常些AJAX就可以了。^_^ (此处应有掌声!!!)

参考

关于跨域资源共享(CORS)和 浏览器的同源策略限制的具体讲解。已经有很多大神写过文章博客。在这里就不再班门弄斧了。有兴趣的同学可以根据以下两个链接深入研究下。

    原文作者:Mirror
    原文地址: https://segmentfault.com/a/1190000015321637
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞