资讯专栏INFORMATION COLUMN

20170616-跨域

Jinkey / 1131人阅读

摘要:同源策略浏览器出于安全方面的考虑,不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。传回后回调函数立即执行参数是后端产生的数据从而实现相应的功能。

同源策略

浏览器出于安全方面的考虑,不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。

同源指的是:

同协议

同域名

同端口

作用:保证用户信息的安全,防止恶意的网站窃取数据

例1:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。除此之外,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。(因为浏览器同时还规定,提交表单不受同源政策的限制)

例2:恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码,从而造成相关的风险。

对于当前页面来说页面中 JS 文件的域不重要,重要的是当前页面所在的域与 脚本中涉及到的域(例如xht的open方法的url)是否同源

跨域

跨域:浏览器出于安全方面的考虑设置了同源策略来限制不同域之间的交互,但是也阻碍了不域之间的协助。为了实现不同域之间的交互、协作,因此需要“跨域”。

跨域窗口通信 降域

降域获取同一 Cookie:Cookie 是服务器写入浏览器的一小段信息,只有同源的网页才能共享。但是,两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置document.domain 共享 Cookie。

example:A 网页是 http://w1.example.com/a.html,B 网页是http://w2.example.com/b.html,那么只要设置相同的 document.domain,两个网页就可以共享 Cookie

JavaScript

// A网页和B网页设置相同的 document.domain
document.domain = "example.com"
// A网页通过脚本设置 Cookie
document.cookie = "test1 = hello";
// B网页可以获取到该 Cookie
var otherCookie = document.cookie;

降域使不同源的iframe窗口和父窗口相互通信:如果两个网页不同源,就无法拿到对方的
DOM。典型的例子是 iframe 窗口和与父窗口无法通信。如果两个窗口一级域名相同,只是二级域名不同,那么设置 document.domain 属性,就可以规避同源政策,拿到
DOM。

A 网页:URL: http://a.yanxin.com:8080/a.html

HTML

使用降域实现跨域

script

iframe 中的 B 网页:URL: http://b.yanxin.com:8080/b.html
HTML

script

postMessage

HTML5为了解决跨域问题,引入了一个全新的API:跨文档通信 API(Cross-document messaging)。
这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。

目的:向另一个地方传递数据,另一个地方指的是:包含在当前页面的