各种Kill跨域Boss的方法

一个应用场景,需要跨域获取json数据以及html页面

方案1-JSONP:

对于JSON数据,可以很容易的获取。不过在结合Android的WebView后会存在一个很严重的问题。

在Android的WebView下面,会给每一次JSONP进行一次缓存,使用Eclipse+Android模拟器会发现apk的data目录下,会生成很多缓存文件,每一个文件就是一个JSONP的函数。

随着越来越多的请求,该目录下面的缓存文件也会越来越多。对于桌面浏览器而言,性能强大,影响不是很大,但对于寸土寸金的移动客户端,这细节是必须注意滴。

感谢某同事发现这一问题。

方案2-iframe:

一直以来,我都把iframe和frame给混为一谈,每当人们提到iframe,我总是极力想避开。

其实iframe和frame是两码事,iframe就是用来加载远程html用的。不过对于加载远程html里面的JS脚本,依然会和父html页面存在跨域问题。

方案3-设置Access-Control-Allow-Origin:

除去IE9、其他浏览器都完美支持,包括Andorid和iOS自带的。浏览器兼容性

对于IE9和IE8,需要把XMLHttpRequest请求改为XDomainRequest,IE10开始支持XMLHttpRequest。

测试的时候,直接设置为任意源,实际部署的时候,再根据实际情况,设置允许跨域源即可。

JerryQu的文章也写到了《也谈跨域数据交互解决方案》,他把CORS列为Kill Boss的终极必杀技。

方案4-各种Proxy手段:

PHP很容易就file_get_contents()一个远程源,然后再吐出来个自己用。

简单方便,不过和我实际场景有点不一致,这里不使用,拿来测试还OK。

结语:

我认为浏览器的同源限制,有它当初设计的考虑,在我还不了解背后的安全性因素的时候,贸贸然的使用各种方法去跨越这道安全屏障、去越狱,是不明智的,尤其是如果要部署到生产环境的话。很有可能会打开了潘多拉的盒子,各种XSS攻击随即而至。