对同源策略与多页面通讯、跨域请求的深入探索

为了网页的安全,现在主要的浏览器都遵循了同源策略。同源策略究竟有哪些规范?怎么体现安全作用?
个人总结同源策略的一个首要宗旨是:

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

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

针对javascript,且看几个直观的现象:
1、一个页面的javascript能获取到其他页面的window。但在非同源的情况下,只能访问window少部分属性和方法。
不同源时可访问属性方法如下:
方法
window.blur
window.close
window.focus
window.postMessage
属性
window.closed   Read only.
window.frames  Read only.
window.length   Read only.
window.location Read/write.
window.opener  Read only.
window.parent   Read only.
window.self       Read only.
window.top       Read only.
window.window Read only.
有一些浏览器也许会允许访问更多一些属性方法。但重要的document,localstorage等肯定是无法读写的。
页面可以自身设置document.domain,开放其他一部分域的脚本对自身document、localstorage等的读写。
在同源的基础下,则没有限制。
2、<script>、<img>、<iframe>、<link>等标签都能跨域加载内容,但无法利用这些标签对外发送加载到的内容。
3、js脚本不能获取到上述标签加载回来的内容,也就无法把这些内容发送出去,只能获取到内容被浏览器解析后浏览器基于需要而暴露的信息(如img的width,onload等)。

一个不直观的现象:
1、ajax可以利用用户身份请求不同源的内容,但同源策略阻止了请求回来的内容向javascript的流通,于是无法泄露到用户浏览器之外。

这个现象可以自己架设localhost试验,后台正常收到请求并正常回应,但是浏览器出显示没有跨域资源共享,无法访问返回的内容

怎么体现安全作用?
设想一个场景,用户打开www.bank.com/bank.html, 又在另一个标签里打开 www.evil.com/evil.html。
此时在同源策略下,evil.html页面上的js脚本不能访问操作bank.html页面的document,localstorage等重要资源。
evil.html可以利用脚本创建iframe,img,script去加载bank.com的资源,这些资源加载回来后由浏览器默认的去解析或呈现,脚本依然无法获取加载回来的内容,只能得到浏览器基于需要而暴露的信息(如img的width,onload等)。
evil.html的脚本可以利用Ajax直接去加载bank.com上的资源,Ajax请求可以正确发出并返回,但停在了浏览器处,同源策略阻止了请求回来的内容向evil.html上脚本的流通
至此evil.html的脚本关于用户的信息都无法获取到。
特别地,从bank.html或者evil.html发送请求到bank.com/charge.html,
两者携带的cookie是同样的,不同的是http请求头的referer,后端只判断cookie/session的话就会认为都是真正用户的请求。于是就形成了跨域请求伪造攻击(CSRF)。
对此,bank.com后端不傻,它事先发送了唯一标识在bank.html的页面上,bank.html到charge.html的请求还带上了唯一标识,后端不仅判断referer,还特意去检查收到的标识和事先发送的唯一标识是否一致。
evil.html无法访问bank.html,于是无法得到唯一标识,于是无法伪造和bank.html发出的一样的请求。
至此evil.html的脚本一无所获,无法获取并泄露信息也无法伪造请求。

综合以上现象,可以总结出,同源策略规范了javascript所能获取的资源和信息,所以用户即使不小心浏览到不良网页,也还有一定的安全性。

同源策略下,javascript对多页面之间的通讯和多个域的资源获取都受到了限制,下面简要介绍在同源策略下一些合理跨域的方法
对于多页面通讯
1、设置document.domain+iframe
2、window.name
3、window.postMessage,window.localstorage
对于跨域资源获取
4、跨域资源共享CORS(Cross-Origin Resource Sharing)
5、JSONP
6、WebSockets
总结是这些方法都是A去访问B, B页面主动开放访问权限,或者B服务器自己根据请求信息判断是否对A请求开放并配合A返回合适的响应,于是A可以跨域获取资源。
个人觉得后台代理的方式对前端来说并没有跨域,所以就没有归结到上面的跨域方法中。

参考文章和跨域方法的详细介绍请参见以下文章:
JavaScript跨域总结与解决办法 http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
Web - JSONP和同源策略漫谈 http://www.cnblogs.com/huangjacky/p/4001073.html
(译)同源策略和跨域访问 http://blog.csdn.net/shimiso/article/details/21830313
同源策略详解及绕过 http://www.freebuf.com/articles/web/65468.html
浏览器同源政策及其规避方法 http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

有兴趣的可以看看关于同源策略比较官方的介绍
w3c: https://www.w3.org/Security/wiki/Same_Origin_Policy
wiki: https://en.wikipedia.org/wiki/Same-origin_policy
MDN: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

时间: 2024-09-30 18:35:42

对同源策略与多页面通讯、跨域请求的深入探索的相关文章

Django 【第十九篇】JS实现的ajax、同源策略和前端jsonp解决跨域问题

一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高: jquery 实现的ajax index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

Django之跨域请求同源策略

同源策略: 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过JSONP或者CORS来实现了. 一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: URL 结果 原因 http://a.xyz.com/dir2/oth

【JavsScript】父子页面之间跨域通信的方法

由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主域名相同的情况,可以设置domain来解决问题,今天就不讨论这种情况了. 对于其他跨域通信的问题,我想又可以分成两类: 其一(第一种情况)是a.com下面的a.

【JavaScript】父子页面之间跨域通信的方法

由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主域名相同的情况,可以设置domain来解决问题,今天就不讨论这种情况了. 对于其他跨域通信的问题,我想又可以分成两类: 其一(第一种情况)是a.com下面的a.

父子页面之间跨域通信的方法

作者: lyndon  来源: 腾讯大讲堂  发布时间: 2014-08-08 08:59  阅读: 5025 次  推荐: 20   原文链接   [收藏] 由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主

[转]父子页面之间跨域通信的方法

父子页面之间跨域通信的方法 2014/08/08 · Web前端 由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 编号 URL 说明 是否允许通信 1 http://www.a.com/a.js http://www.a.com/b.js

父子页面之间跨域通信的方法(转)

由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主域名相同的情况,可以设置domain来解决问题,今天就不讨论这种情况了. 对于其他跨域通信的问题,我想又可以分成两类: 其一(第一种情况)是a.com下面的a.

八种方式实现跨域请求

浏览器的同源策略 ? 提到跨域不能不先说一下"同源策略". ? 何为同源?只有当协议.端口.和域名都相同的页面,则两个页面具有相同的源.只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制. ? 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制.浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScr

Ajax跨域请求 同源策略与Jsonp

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现.同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个