用fiddler进行debug

fiddler是一枚前端利器,大家用得都应该挺多的。

昨晚在家里调试一个页面,弄了好一会,fiddler都没有抓到数据。最后Google之,才发现因为我等都装了SwitchySharp这类自动翻墙插件。导致Chrome的流量没有走系统代理,而Fiddler是对系统代理进行了转发,故而fiddler没有抓到Chrome的流量。

知道原因之后,设置Chrome走系统代理,Fiddler即可正常工作。

带会话态调试

有一个站点,里面的页面要登陆态才能调试,也就是HTTP请求的header里面,需要带上一些额外的信息。

首先用fiddler抓取正常带有登陆态的HTTP请求,我这边用的是Cookie,具体哪个我也不清楚,就把整个Cookie都复制一下。

之前,有款Willow的插件,最新版支持自定义HTTP头,可以方便做这种带会话态的测试。可惜,昨晚在家里,怎么都没有搜索到最新版的Willow,就只能研究下Fiddler自身是如果修改请求的。

Fiddler主界面

Fiddler面板左侧是数据流,右侧是控制面板。其中,有一个Filters的Tab选项,里面有Request Headers和Response Header等配置信息。

我是希望给请求带上会话态,则勾上Request Headers => Set request header选项,并第一个空填入‘Cookie’,第二个空填入刚才复制下来的Cookie的值。

勾选控制面板左上角的‘use filter’,并点击右边Actions => Run Filterset now,即可生效。

之后,再看左侧的数据流,你会发现,你的请求都已经带上了Cookie属性,你可以很方便的调试任何带有会话态的站点。

跨域调试

正常情况下,JS执行跨域操作,将会被浏览器禁止。

跨域

但是开发过程中,时不时需要跨域去获取某些数据。

这里不讲各种跨域手法,仅仅介绍一些,通过使用Fiddler来添加请求的CORS响应头,欺骗浏览器允许跨域执行JS。

同样是在Filters选项中,拉到最底下,有一个Response Headers的表单域,勾上Set Response header,并在第一个空填上“Access-Control-Allow-Origin”,第二个空填上“*”,此时你浏览器再执行跨域JS操作,将会畅通无阻。

添加CORS响应头

此跨域方法,仅仅用于开发调试阶段,线上部署的时候,还是老老实实让后台筒靴们给配上Acces-Control-Allow-Origin头,又或者部署在同域的情况下。关于JS详细的跨域问题,可以看以前的内容:《各种kill跨域Boss的方法》。

最后

附上Fiddler监听Win8 Metro界面APP的方法:

打开Fiddler => 点击 Win8 Config =》 给你需要Fiddler监听的APP前面打上勾,保存即可。

win8 metro app debug

各种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攻击随即而至。