打造属于自己的火狐插件浏览器
Firefox是个伟大的浏览器，尽管有时它备受诟病。但每个Firefoxer都能感受到这款浏览器的优秀特质，比如高效、安全、跨平台等。下面我主要说的是它的扩展性，说说我常用的七种扩展，谓之：七种武器。
第一种武器：长生剑 Firebug
Firebug可谓是前端工程师用作测试的神兵利器，熟悉非常。下面主要给一些不太熟悉的狐狸精作下简介，共同学习。
在扩展搜索界面搜索"Firebug"即可下载安装Firebug,重启浏览器生效。
我们可以通过按左上角的logo弹出菜单或者直接按F12打开Firebug
打开后，窗口一分为二。上面的是我们正在浏览的页面，下面的就是Firefox的主界面。
可以看到主要有Console、HTML、CSS、Script、DOM、Net这六个标签菜单。
Console
Console就是所谓的控制台，里面主要是JavaScript的命令操作与网页的警告、错误信息等。可以看到Console标签下又分为两个部分，左边主要是信息的显示，右边主要供用户调试JS用。
像我们学习任何计算机语言一样，写个Hello World是很有必要的。
在右边输入:alert("Hello Firebug!");然后按Run命令，就会弹出一个对话框。
还可以用它的log命令:console.log("Hello World!");把结果输出到控制台，这个在调试中是很有用的。由于篇幅所限，不深入讨论。
Clear:清除log信息。
Persist:保持监听，不被页面转跳而失去信息。
Profile:性能分析，列出调用函数，和所用时间。
Errors:列出页面错误。
Warnings:列出警告信息。
HTML
HTML查看器是个功能强大的HTML查看工具。可以查看页面的HTML代码，即时修改数据，可视化地检查页面中的元素。
以百度首页演示，点击那个蓝色的箭头（红圈内），然后点击百度的logo，就可以看到控制这logo具体的HTML和CSS代码、属性。点击可以即时修改生效也可以在相应的标签内按“Edit”菜单或右键菜单“Edit”进行编辑。右边是相应的CSS，可精确到CSS文件中的行数。这些都可以即时修改，前端工程师可用于调试页面，Firefox的各种开发者可以用来辅助制作GreaseMonkey JavaScript、Stylish CSS等。
Computed:查看页面中CSS属性的默认值。
Firebug可谓是前端工程师用作测试的神兵利器，熟悉非常。下面主要给一些不太熟悉的狐狸精作下简介，共同学习。
在扩展搜索界面搜索"Firebug"即可下载安装Firebug,重启浏览器生效。
我们可以通过按左上角的logo弹出菜单或者直接按F12打开Firebug
打开后，窗口一分为二。上面的是我们正在浏览的页面，下面的就是Firefox的主界面。
可以看到主要有Console、HTML、CSS、Script、DOM、Net这六个标签菜单。
Console
Console就是所谓的控制台，里面主要是JavaScript的命令操作与网页的警告、错误信息等。可以看到Console标签下又分为两个部分，左边主要是信息的显示，右边主要供用户调试JS用。
像我们学习任何计算机语言一样，写个Hello World是很有必要的。
在右边输入:alert("Hello Firebug!");然后按Run命令，就会弹出一个对话框。
还可以用它的log命令:console.log("Hello World!");把结果输出到控制台，这个在调试中是很有用的。由于篇幅所限，不深入讨论。
Clear:清除log信息。
Persist:保持监听，不被页面转跳而失去信息。
Profile:性能分析，列出调用函数，和所用时间。
Errors:列出页面错误。
Warnings:列出警告信息。
HTML
HTML查看器是个功能强大的HTML查看工具。可以查看页面的HTML代码，即时修改数据，可视化地检查页面中的元素。
以百度首页演示，点击那个蓝色的箭头（红圈内），然后点击百度的logo，就可以看到控制这logo具体的HTML和CSS代码、属性。点击可以即时修改生效也可以在相应的标签内按“Edit”菜单或右键菜单“Edit”进行编辑。右边是相应的CSS，可精确到CSS文件中的行数。这些都可以即时修改，前端工程师可用于调试页面，Firefox的各种开发者可以用来辅助制作GreaseMonkey JavaScript、Stylish CSS等。
Computed:查看页面中CSS属性的默认值。
。
Layout:CSS的盒模型是让不少前端工程师头痛的东西。不过，有了它，就方便了，各种margin、border、padding一目了然。还可以用于测量各种元素的像素。并直接在Layout中修改margin、padding等参数，即时生效。妈妈再也不用担心前端工程师面对盒模型而头痛了。
DOM：简而言之，就是访问和操作HTML文档的标准方法。
HTML查看器对于前端是如此有用，但它不仅能改变已经下载好的数据，也能更改将要POST的数据。如果能改POST的数据，那么可以做的事情就太多了。比如，绕过各种前端检测。修改正常POST的数据。攻击者甚至可以用来构造各种XSS跨站脚本攻击等。
我之前发的一个XSS盗取贴吧Cookies的案例：http://tieba.baidu.com/p/1620499476
上面的案例只是构造url进行反射型的XSS攻击。但是，攻击者还可以利用系统漏洞，构造各种存储型的XSS，存储型的XSS危害极大，隐蔽性极强，防不胜防。
以百度贴吧为例。正常情况下，可以插入视频，并发布。但是我们可以通过Firebug修改要POST的数据，然后构造一个攻击代码。然后用户打开后视频后，触发XSS代码并受到攻击，甚至导致帐号被盗。
正常情况下插入视频后，会生成一段html代码
只要我们按“发表”，就会把数据POST到百度服务器，而攻击者可以修改title的内容，构造XSS代码。用户只要播放视频，触发服务端生成的NoAutoVideo方法，XSS就会触发。各种跨站脚本攻击就此诞生。这种是比较传统的XSS，在这里讨论是因为百度之前已经在服务端进行了过滤与净化，所以现在已不具攻击性。
Flash的安全性一直备受诟病，而现在Flash的大量应用，也带来很大的隐患。攻击者很容易利用Flash播放器漏洞进行XSS，像之前我那样，就是利用"社工"+Flash漏洞进行XSS，成功盗取部分吧友的Cookies。攻击者可以修改正常的SWF地址，替换成精心构造有漏洞的SWF进行XSS。Flash播放器的AllowScriptAccess属性默认值是允许执行本域名的脚本的，之前百度对此意识不足，很容易被利用。攻击者甚至可以修改为:AllowScriptAccess:always，进行跨站的脚本攻击。而现在第三方的Flash播放器也越来越多，安全隐患也是难以避免。当然，现在百度已经修补了这个bug，所以可以公开讨论。
大家可以通过这个链接：http://tieba.baidu.com/f/search/res?qw=AllowScriptAccess&sm=2&cf=1看看曾经的各种攻击（攻击未遂）。
所以有时你看到把视频大小改为1×1像素然后自动播放的帖子，也就见怪不怪了。我个人是比较反感这种行为的，因为有些人喜欢用来播放一些令人不悦的声音，所以在这里不作讨论，但原理相同。虽然百度已进行一些简单的过滤修正，但只要进行一些基本的转换就可以绕过过滤。有兴趣的童鞋可以试试。
第二种武器：碧玉刀 Tamper Data
地址：https://addons.mozilla.org/en-us/firefox/addon/tamper-data/
Tamper Data是一个用于跟踪和修改http/https请求和POST参数的扩展。
相对上次介绍的 Firebug 这个杀手级的扩展，Tamper Data算不上大众，安装量也就10多万。不过小扩展也有大用途，实在是居家旅行、上网冲浪、Web调试、杀人灭口必备扩展。
打开上面地址，点击安装，重启生效。打开“工具”菜单，点击 Tamper Data，呼出主界面。
可以看到主界面由三个内容区域组成，上面的区域显示了浏览器的各个通信情况。类似Firefox下著名的抓包扩展Httpfox，这里详细记录了：“网址”、“所耗时间”、“页面大小”、“请求方式”、“状态”、“Content Type”等信息。
点击你要查看的具体记录，在下面左右两个子区域能看到相应 Request Header 和 Response Header 的 Name/Value对信息。
和Httpfox等专业的抓包扩展相比，Tamper Data所展现的信息也仅仅算是合格，表现中规中矩。但是，术业有专攻，正如它的名字一样，它不同于Httpfox的“可远观而不可亵玩焉”，，Tamper Data的真正用途是窜改数据。
点击“Start Temper”按钮，这时浏览器所发送的任何请求，都会被拦截下来。例如，我们尝试在贴吧发个帖子。当按下“发表”按钮的时候，它会弹出一个对话框：
我们可以选择“Tamper”和“Submit”还有“Abort Request”。中间的按钮是让其通过，第三个按钮是终止请求，现在，我们点击第一个按钮“Tamper”。
这样，平时在用户角度，完全是黑盒的http header和post等信息展现了出来。左侧是http header信息，右侧我们可以看到即将要提交到贴吧服务器的post信息，比如title（帖子标题）、content（帖子内容）、anonymous（是否匿名）等。这些属性值，都是可以编辑的。按下“确定”按钮，这些修改后的信息就会提交到目标服务器。
我们也可以分别在两侧的空白处，右击鼠标，添加header和post信息：
另外，Tamper Data也提供了一些日常的测试功能：
xss：一些常用的XSS（跨站脚本攻击）。
sql：一些SQL注入的语句。
data：一些特殊（非预期）的数据，扰乱程序正常的逻辑。
典型利用场所：
1.月份数据溢出，直接变0，实现支付绕过：http://www.wooyun.org/bugs/wooyun-2012-05353
2.逆向支付，给账户充值：http://www.wooyun.org/bugs/wooyun-2012-06589
此外，还有常见的ua什么的。
一言蔽之，Tamper Data 就是一个“窜改数据”的扩展。既提供了一些常见的抓包功能，也能窜改自己的Header与Post信息。麻雀虽小五脏俱全，与传统的Fiddler这些代理服务器抓包程序不同，Tamper Data仅使用浏览器API完成这一切（弱点是对于服务端的某些post检验，Tamper Data往往会无能为力），但对于日常一些简单的Web调试，或许有意想不到的功效。
DOM：简而言之，就是访问和操作HTML文档的标准方法。
HTML查看器对于前端是如此有用，但它不仅能改变已经下载好的数据，也能更改将要POST的数据。如果能改POST的数据，那么可以做的事情就太多了。比如，绕过各种前端检测。修改正常POST的数据。攻击者甚至可以用来构造各种XSS跨站脚本攻击等。
我之前发的一个XSS盗取贴吧Cookies的案例：http://tieba.baidu.com/p/1620499476
上面的案例只是构造url进行反射型的XSS攻击。但是，攻击者还可以利用系统漏洞，构造各种存储型的XSS，存储型的XSS危害极大，隐蔽性极强，防不胜防。
以百度贴吧为例。正常情况下，可以插入视频，并发布。但是我们可以通过Firebug修改要POST的数据，然后构造一个攻击代码。然后用户打开后视频后，触发XSS代码并受到攻击，甚至导致帐号被盗。
正常情况下插入视频后，会生成一段html代码
只要我们按“发表”，就会把数据POST到百度服务器，而攻击者可以修改title的内容，构造XSS代码。用户只要播放视频，触发服务端生成的NoAutoVideo方法，XSS就会触发。各种跨站脚本攻击就此诞生。这种是比较传统的XSS，在这里讨论是因为百度之前已经在服务端进行了过滤与净化，所以现在已不具攻击性。
Flash的安全性一直备受诟病，而现在Flash的大量应用，也带来很大的隐患。攻击者很容易利用Flash播放器漏洞进行XSS，像之前我那样，就是利用"社工"+Flash漏洞进行XSS，成功盗取部分吧友的Cookies。攻击者可以修改正常的SWF地址，替换成精心构造有漏洞的SWF进行XSS。Flash播放器的AllowScriptAccess属性默认值是允许执行本域名的脚本的，之前百度对此意识不足，很容易被利用。攻击者甚至可以修改为:AllowScriptAccess:always，进行跨站的脚本攻击。而现在第三方的Flash播放器也越来越多，安全隐患也是难以避免。当然，现在百度已经修补了这个bug，所以可以公开讨论。
大家可以通过这个链接：http://tieba.baidu.com/f/search/res?qw=AllowScriptAccess&sm=2&cf=1看看曾经的各种攻击（攻击未遂）。
所以有时你看到把视频大小改为1×1像素然后自动播放的帖子，也就见怪不怪了。我个人是比较反感这种行为的，因为有些人喜欢用来播放一些令人不悦的声音，所以在这里不作讨论，但原理相同。虽然百度已进行一些简单的过滤修正，但只要进行一些基本的转换就可以绕过过滤。有兴趣的童鞋可以试试。
第二种武器：碧玉刀 Tamper Data
地址：https://addons.mozilla.org/en-us/firefox/addon/tamper-data/
Tamper Data是一个用于跟踪和修改http/https请求和POST参数的扩展。
相对上次介绍的 Firebug 这个杀手级的扩展，Tamper Data算不上大众，安装量也就10多万。不过小扩展也有大用途，实在是居家旅行、上网冲浪、Web调试、杀人灭口必备扩展。
打开上面地址，点击安装，重启生效。打开“工具”菜单，点击 Tamper Data，呼出主界面。
可以看到主界面由三个内容区域组成，上面的区域显示了浏览器的各个通信情况。类似Firefox下著名的抓包扩展Httpfox，这里详细记录了：“网址”、“所耗时间”、“页面大小”、“请求方式”、“状态”、“Content Type”等信息。
点击你要查看的具体记录，在下面左右两个子区域能看到相应 Request Header 和 Response Header 的 Name/Value对信息。
和Httpfox等专业的抓包扩展相比，Tamper Data所展现的信息也仅仅算是合格，表现中规中矩。但是，术业有专攻，正如它的名字一样，它不同于Httpfox的“可远观而不可亵玩焉”，，Tamper Data的真正用途是窜改数据。
点击“Start Temper”按钮，这时浏览器所发送的任何请求，都会被拦截下来。例如，我们尝试在贴吧发个帖子。当按下“发表”按钮的时候，它会弹出一个对话框：
我们可以选择“Tamper”和“Submit”还有“Abort Request”。中间的按钮是让其通过，第三个按钮是终止请求，现在，我们点击第一个按钮“Tamper”。
这样，平时在用户角度，完全是黑盒的http header和post等信息展现了出来。左侧是http header信息，右侧我们可以看到即将要提交到贴吧服务器的post信息，比如title（帖子标题）、content（帖子内容）、anonymous（是否匿名）等。这些属性值，都是可以编辑的。按下“确定”按钮，这些修改后的信息就会提交到目标服务器。
我们也可以分别在两侧的空白处，右击鼠标，添加header和post信息：
另外，Tamper Data也提供了一些日常的测试功能：
xss：一些常用的XSS（跨站脚本攻击）。
sql：一些SQL注入的语句。
data：一些特殊（非预期）的数据，扰乱程序正常的逻辑。
典型利用场所：
1.月份数据溢出，直接变0，实现支付绕过：http://www.wooyun.org/bugs/wooyun-2012-05353
2.逆向支付，给账户充值：http://www.wooyun.org/bugs/wooyun-2012-06589
此外，还有常见的ua什么的。
一言蔽之，Tamper Data 就是一个“窜改数据”的扩展。既提供了一些常见的抓包功能，也能窜改自己的Header与Post信息。麻雀虽小五脏俱全，与传统的Fiddler这些代理服务器抓包程序不同，Tamper Data仅使用浏览器API完成这一切（弱点是对于服务端的某些post检验，Tamper Data往往会无能为力），但对于日常一些简单的Web调试，或许有意想不到的功效。
