首页 > 代码库 > 浏览器同源策略深入

浏览器同源策略深入

浏览器对于同源的认定是:协议、域名、端口号必须精确匹配,一模一样

 

个人总结同源策略的一个首要宗旨是:

阻止能向外传输信息的模块(如javascript)获取到来自不同源的资源,不能获取也就从源头阻止了资源和其中信息的泄露

很重要的一点是,同源策略阻止的是跨域资源的获取,而不是阻止跨域的请求,请求可以正常发出,但返回的内容被阻止,无法让JS脚本获取

 

例子:

1、<script>、<img>、<iframe>、<link>等标签都能跨域加载内容,但无法对外发送加载到的内容,换言之,js获取不到上述标签加载回来的内容

2、ajax可以请求不同源的内容,但同源策略阻止返回的内容向js的流通,即你可以在network里看到请求的返回值,但在js中获取不到返回值

 

同源策略下合理的跨域方案:

对于多页面通讯:

1、设置document.domain+iframe
2、window.name
3、window.postMessage,window.localstorage(window.postMessage是h5的技术,解决两个页面间的数据分享,在体验平台与sandbox之间采用了这种技术,两个应用属于跨域,sandbox需要获取体验平台传递过来的账号密码,通过这种方式获取)

对于跨域资源获取
4、跨域资源共享CORS(Cross-Origin Resource Sharing)
5、JSONP
6、WebSockets

 

总结是这些方法都是A去访问B, B页面主动开放访问权限,或者B服务器自己根据请求信息判断是否对A请求开放并配合A返回合适的响应,于是A可以跨域获取资源。
nginx后台代理的方式对前端来说并没有跨域,所以就没有归结到上面的跨域方法中。

浏览器同源策略深入