主流浏览器开发人员工具(F12)在安全测试中的优与劣

  <!--本文所指主流浏览器为Chrome、Firefox、IE-->

  <!--

  0x01 场景假设

  0x02 Chrome

  0x03 Firefox

  0x04 IE

  0x05 结论

  -->

  0x01 场景假设

  三款浏览器开发人员工具的使用及页面调试等技能,本文不做描述,只说在安全测试中遇到情况。

  考虑如下场景:现在要对一个Web应用做安全测试,客户端/服务端使用HTTPS双向认证,客户端使用U盾一类的工具。

  根据上述场景:缺少证书的任意一环,通信无法发生;客户端私钥写在硬件中,无法通过导出证书的方式使用HTTP代理抓包、改包。

  那么:对于不改包便无法控制的数据(如当从前页面读取并发送给服务器的账号),在不能使用代理服务器的情况下,就只剩下浏览器供我们使用了。

  三大浏览器中,IE的扩展程序最少,Chrome和Firefox有较多扩展/插件,但它们真的有用吗?不依靠插件我们还可以继续测试吗?

  很多时候,我们使用各种各样的工具提高测试效率,极端情况下一个浏览器就够了,但并不是所有浏览器都可以。

  0x02 Chrome

  无论Surfing Internet还是调试页面,相信Chrome都是很多人的首选,Chrome的扩展APP/插件也是出了名的多,现在看下实际测试中Chrome的表现。

  Chrome下有Live HTTP Headers等扩展可以很方便的监控流量,但它只能看不能改。另外还有一些扩展可以修改请求头,例如User-Agent、Cookie。

  如果扩展程序好用的话,就不一定需要使用devtool了。真实存在的情况是,扩展程序无法改请求的POST数据,只能靠F12了。

  至于为什么无法改,只能说是Google未开发API了。使用devtool修改HTTP Form Data是没问题的,但对于通过JS、异步请求发送的数据,我只能说它无能为力。

  可以在控制台,通过值覆盖等手段更改数据,但发送的实际值却没有改变。因此,Chrome的开发者工具虽然好用,却存在限制。

  看一张使用开发者工具的截图:

  

  从上图:使用了Angular.js框架,XMLHTTPRequest异步发送数据。

  最近的使用感觉:Chrome开发者工具相比其他两款最好之处在于可以很方便的对DOM、XHR、Event下断点。

  结果:对于看代码、看流量、设断点而言,Chrome的devtool都是上佳之选,只是无法篡改通过JS发送的数据,达不到想要的效果。

  参考:Debugging Asynchronous JavaScript with Chrome DevTools etc.

  

  0x03 Firefox

  Firefox加载页面相比之下确实很慢,而且在测试过程中由于种种原因经常Crash或卡死,但它助我成功修改了数据。

  先看一张图:

  

  Firefox同样能区分出XHR数据,右键请求即可对xxx.json设置断点,虽然不同于Chrome在一开始就可以对所有XHR断点,相比后文的IE已是好了很多。

  实际抓包看看:

  

  对脚本设置断点、对异步请求设置断点,成功抓到我想要的数据,最好的还在于我可以直接修改变量值,使之生效。

  当时数据处理发生变化时,有可能感觉明明断下了请求,但实际改完后却无效的情况:

  

  这个只能说明下错了断点的位置,因此才会有一方面脚本还停留在断点,另一方面查看网络面板发现已经返回了200 OK。

  找不到正确断点位置怎么办?仔细看上面的图答案自会揭晓。

  

  0x04 IE

  就个人使用而言,IE是经常被打入冷宫的,不过也不表示它很差(IE11还是不错的),个人喜好而已。

  而且一些场景下如网银登陆,由于Chrome、Firefox版本更新太快,只能用IE。

  

  IE好不好用,上面一张图就能看出来。对于普通请求的处理,IE与Chrome及Firefox没太大差别,无非是使用习惯上的不同。

  但对于处理异步请求,IE明显处于劣势(使用上)。IE同样没法改XHR数据,使用Tamper IE工具,只能拦截URL,而且很不方便。

  

  0x05 结论

  在Web应用支持上述三款浏览器的情况下,实际测试Firefox的开发者工具能满足安全测试的需要,Chrome及IE的F12都无法改XHR POST数据(TamperData同样无法改).

  从使用的便利性及界面效果来看,Chrome>Firefox>IE.

  综合各方面(包括本文没有提到的其他),在安全测试中Firefox优于Chrome,IE处于垫底位置.

  附:以上内容及看法为本人在安全测试过程中所得,不保证见解完全正确,如Chrome/IE有其他技巧改数据或觉得对IE的评论不公,烦请指正!

  

时间: 2024-08-03 19:29:23

主流浏览器开发人员工具(F12)在安全测试中的优与劣的相关文章

Web开发标配--开发人员工具-F12

喜欢从业的专注,七分学习的态度. 360浏览器-开发工具 谷歌-开发工具 IE-开发工具 Web开发中最最烦琐的莫过于调整CSS和JS,而最方便最高效的方式就是利用浏览器的开发工具调整.CSS可以实时调整展现,JS可以断点.监控.那么这个最最方便的工具怎么打开,统一按下键盘F12. 不同浏览器不同版本对应开发工具也不一样,但基本原理都一致.最常用的有这些功能:移动设备.Elements.Source.Network. 常用 移动设备 移动设备是指将Web页面从PC展示切换到手机模式,用于模拟手机

Edge浏览器开发人员工具

本地存储/会话存储模拟达到上限 资源终于全部列表出来了 删除 Cookie 和 删除会话 Cookie 样式可以实时编辑了 除了可以实时编辑,还可以和原始文档对比哦 说明同上 Net 面板大改版,加了很多有用的 这个转到定义和查找引用新增的,非常不错,实用(至于整个菜单里的东东,就不说了,领先别的浏览器几个世纪)

Web开发标配--开发人员工具-JS调试

喜欢从业的专注,七分学习的态度. JS:全称JavaScript,Web中,js主要在两个地方: html的<script type="text/javascript"></script> 中. js脚本文件中,页面引用js:<script src="js/***.js"></script>JS调试一般在浏览器开发人员工具"调试程序"Tab页. F12打开浏览器 开发人员工具. 开发人员工具 主要关

常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)

来源: 这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具.方法.优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充. 一.Firebug:如果项目可以支持Firefox,我依然首推Firebug作为JS调试首选,虽然有些不足之处,但基本可以满足大家90%调试场景需求. A. 功能讲解 见上图,图中已标注出功能的五个关键点,下面顺序说明,先将Firebug切换到标注1中的JS调试功能Tab“脚本”上:打开标注2中的当前页面加载的所有静态JS链接资

使用IE11的F12开发人员工具进行网页前端性能测试

用IE访问被测网站(我的是IE11,EDGE浏览器相同),定位到你要测试的动作所在页面或被测页面的前一页.按F12调出开发人员工具,其它的功能我就不介绍了,直接切换到性能选项卡. 根据提示按快捷键ctrl+E或点击左上角的开始按钮进行分析. 接着在被测页面做操作,这里我的操作是打开一个列表,因为系统使用过程中感觉打开列表的速度很慢.可以做多个操作一起分析,这里为了方便分析,我只测试一个事务,与loadrunner测试时设置的事务对应. 等到页面加载完毕,点击F12工具左上角的结束按钮或再次使用快

如何使用IE9浏览器自带开发人员工具捕获网页请求

我们在通过浏览器访问一个网页的时候,有时候会遇到页面不能正常显示,图片不能正常加载的问题. 如果我们需要知道浏览器打开该网页时,网页中每个元素的加载情况.这时,我们便可以借助浏览器自带开发人员工具,来获取网页请求的信息.以下以IE9浏览器为例,接下来主要介绍如何使用浏览器自带开发人员工具捕获网页请求,调试表单. 1.开启工具 按F12快捷键启用开发人员工具.如图所示: 启用"网络选项卡".如图所示: 2.使用捕获功能 选择"开始捕获"按钮,按下F5快捷键,让网页重新

IE的F12开发人员工具不显示问题

按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的缩略图上,右键-最大化,工具就全屏出现了.(或者是右键-移动,然后手动调整窗口大小) 但是这时候是单独一个窗口,没有和IE页面结合在一起.点击右上角的固定按钮(快捷键CTRL+P),就和IE结合在一起了,位于页面的下方. 或者是打开工具后,直接按快捷键ctrl+p,就出来了.(当然了,必须先打开开发工具,否则ctrl+p是IE8的打印)

IE11 F12 开发人员工具 查看 Cookie

参考网址:Using the F12 developer tools in IE11 Step1 : IE11 => F12 打开 开发人员工具 Step2:开发人员工具 => 网络F5 启用网络流量捕获 Step3:IE11 =>输入和访问相关网址 Step4:开发人员工具 => 网络 => 详细信息 => Cookie IE11 F12 开发人员工具 查看 Cookie

IE的F12开发人员工具不显示

IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的缩略图上,右键-最大化,工具就全屏出现了.(或者是右键-移动,然后手动调整窗口大小) 但是这时候是单独一个窗口,没有和IE页面结合在一起.点击右上角的固定按钮(快捷键CTRL+P),就和IE结合在一起了,位于页面的下方. 或者是打开工具后,直接按快捷键ctrl+p,就出来了.(当然了,必须先打开开发