Hi,丸子|一个挺不正经的前端小混混

Uncategorized

使用新浪API接口编写微博蠕虫

去年写了一篇关于jsonp信息泄漏的文章(http://i.wanz.im/2011/02/06/jsonp_user_info_leak/),利用腾讯的接口可以获取用户一些私密的个人信息。也是去年开始尝试使用新浪微博,虽然不怎么喜欢新浪微博的一些体验,但也一直用着,女同事们对各种微博活动都很狂热,最近一个ktv送vip卡的活动就被狂@到了,于是进去看了看,发现有个发微博@五位好友的发布框,可以选择好友,由于是新浪地方站点,发布微博和拉取好友的功能就必须跨域调用,看了下请求,确实是使用jsonp方式跨域,于是有了邪恶的想法。 既然使用了jsonp方式跨域调用,那么就是说只要用户是在新浪微博登录过的前提下,在任何页面访问这两个接口都是被授权的,那么我可以制作一个这样的页面,这个页面可以拉取当前访问者的好友列表,然后随机取几个好友,@他们,并发布一条诱惑性的微博。准备好这个页面后,我们可以用任何方式吸引用户去点击这个页面,之后的效果就会像微博活动一样,访问者会自动转发并@他们的好友,好友的好友看到了也去访问,最后这个微博就会像蠕虫一样扩散开来。 接下来就放出演示链接和关键代码,出于保护的目的,演示中不给出拉取好友的接口,相信懂的人可以自己挖掘并利用。 测试微博:http://weibo.com/1725812854/yjNq9uAZ4 ,在测试微博里可以找到测试代码页面。 引用所需的js XHTML 12<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script><script type="text/javascript" src="http://fj.sinaimg.cn/utils/API-pack.js"></script> 编写对应的利用代码 JavaScript var content = ['嘿嘿,推荐大家收听@丸子-_- ,他写的这个东西很好玩,http://wanz.im/sinaworm.html',                            '我擦,@丸子-_- 他写的这个东西太牛逼了,http://wanz.im/sinaworm.html',                            '昂~@丸子-_- 他写的这个东西好羞色哟~,http://wanz.im/sinaworm.html'],                pics = ["http://ww1.sinaimg.cn/bmiddle/7e7fc78bgw1ds88rpzhefj.jpg","http://ww1.sinaimg.cn/bmiddle/7e7fc78bgw1ds88rpzhefj.jpg"],                i = Math.floor(Math.random() * 2),                pic = pics[i],                success = function(json){                    //window.location='http://weibo.com/hiwanz';                },                failure ....

Uncategorized

语义化html的好处有感

经常会无聊看看google play里新推了什么新应用,这次看到了pocket(http://getpocket.com),点进去一看,原来是以前用过的read it later,简单的说,这是一个服务,提供了一个途径,使得你可以把临时看到想看的页面暂时收藏起来,过后有空在去看,它还提供了移动终端的应用,方便事后阅读,在使用了pocket应用后,便有了一些感受,也就是我想分享的关于语义化的好处。 经常在css森林里看到关于语义化的讨论,基本会扯到seo,屏幕阅读,最终又常常无疾而终,似乎大家都无法说出特别让人信服的强有力的理由,我就想在这总结下,继续抛砖引玉。 那么什么是语义化的html呢?我的理解是通过html的标签,class和id等属性将标签内的内容整合,使其结构更加清晰更有语义,这里的语义是指让机器能理解的信号,更接近自然语言的逻辑和含义。 如果这样看来,会扯到seo,屏幕阅读似乎很合理,可是为什么每次讨论都还是会有人重复在纠结同样的问题,还是充满着疑问却说不清道不明。seo和屏幕阅读确实需要有良好的语义做支撑,可是对于我们的用户(我们本身也是用户)来讲,这些东西似乎离我们大部分人还很遥远,这也是一个疑惑点,因为感觉不到语义化带来的好处,没有一个很直观的提升体验,所谓语义的重要性也只是停留在理论支持。 我们先来看几个语义化的好处: 1,简洁明了;语义化的代码使你的代码能体现其要展示的内容,对于开发者来说,模块更清晰。2,可访问性;就像前面说的,屏幕阅读器能准确读出页面上的内容,还可以在标题或者其他需要强调的地方加强语气。可以让更多的设备识别并利用页面上的内容。3,对搜索引擎友好;其实这点可以算是第二点的在特定领域的应用。 以上三点应该算是经常被提起,也算是比较被认可的观点,个人认为第二点能给用户带来最直接好处。屏幕阅读和seo都只是其中的一种应用,回顾语义化html的定义和它的好处,我们可以发现,它的好处不仅仅局限于此。就像开始提到的一个跨平台的应用,用户在移动终端最想得到的是页面的主体内容,也就是标题和正文,其他的不关心也不想关心,而且访问速度要快,这里就涉及到产品的体验问题,一下就可以分辨出语义化相对非语义化的区别了,良好的语义化html的页面使得应用(不仅仅是屏幕阅读了)可以通过算法更好的识别并合理利用页面的内容,得到用户关心的,减少访问流量,加快信息获取速度。而时间成本的减少,流量消耗的减少和产品良好的阅读体验带来的提升就是各种省钱啊,减少机房废气排放啊,环保节能啊(扯太远了→_→),总之,能让用户和服务提供方省钱的技术才是好技术,而在多终端跨终端访问成为趋势的大背景下,这点变得更有意义,虽然这也只是其中的一种应用,但我相信未来会有更多应用受惠于它。

Uncategorized

Sublime Text2/3破解

目前最新版本的Sublime Text2破解方法:将sublime_text.exe复制一份改名为sublime_text_cracked.exe,用sublime text2打开这个sublime_text_cracked文件(新版sublime text貌似无法二进制写入,导致保存后无法识别为有效win32应用程序)用支持二进制写入的编辑器来改,搜索3342,改为3242保存(这里我搜出来只有一个3342,但是好多网友貌似会搜到多个,根据成功的网友反馈,遇到多个的情况可以把3032前面的那个3342改成3242),打开sublime_text_cracked文件,在help菜单里enter license,把下面注册码贴进去,包括begin和end那两行,完。 测试环境:sublime text2 32bit在win7 ultimate 64bit sp1,xp professional 32bit sp2,windows server 2003 32bit,BackTrack 5。 linux和mac下的sublime text破解过程与windows下的同理,sublime text 3破解方法一样,需要耐心测试。 —–BEGIN LICENSE—–hiwanzUnlimited User LicenseEA7E-268385B320641E6E11F5C6E16553C438A683972BA70FE439203367920D70E7DEB0E92436D756177BBE49EFC9FBBB3420DB9D36AA8307E845B6AB8AF99D81734EEA96102402C853F1FFF9854D94799D1317F371DAB52730F6CADDE701BF3BE03C34EF285E053D2B5E16502F4B009DE413591DE0840D6E2CBF0A3049E2FAD940A53FF67—–END LICENSE—– 鉴于很多朋友修改失败,我将我改好的文件传上来给大家,安装完用下面的压缩包里的文件解压覆盖原文件后用上面的序列号注册即可。如果你觉得这个编辑器不错,人家也要生存要发展,可以支持下正版。 下面是目前[2012-06-27]最新的Sublime Text ....

Uncategorized

关于css通配符性能问题不完全测试

关于css通配符这东西,一直以来的经验告诉我们,它的性能是极差的,对于不懂底层的人来说,貌似我们也觉得这个结论是可以接受的,虽然不知道这个结论是从哪里来的,之前小飞的博客中(CSS通用元素选择器的都市流言)有提到这点,在我看来css性能这种东西根本是感觉不出来的,所以也没太在意,当然我还是喜欢叛逆的反常规的想法,今天又看到艾文王微博上推了这篇文章,于是就想干脆简单测试下,由于是黑盒测试,条件简陋,所以结果仅作参考。 一、测试环境 操作系统: Win7 ultimate 32bit浏览器版本: Google Chrome 16.0.912.63 m测试工具: 浏览器自带开发人员工具测试目的: 为了求证css通配符选择器性能是否真的很低测试方法: 用大家所熟悉并认同的yui css reset做参考,对比性能。 二、测试过程 1,我直接把yui的reset demo页面和reset样式下载到本地做测试排除一些网络因素影响;页面地址:http://yuilibrary.com/yui/docs/cssreset/cssreset-context-example.html 2,使用Chrome打开本地页面,打开Chrome开发人员工具的timeline面板将loading和scripting记录勾勾去掉,留下一个rendering记录,也就是我们只记录页面的渲染,当页面只有html结构和样式的时候,我们可以认为这个渲染记录约等于css的渲染记录。 3,点击record后,刷新demo页面,得到yui reset css渲染timeline数据,右键保存数据为yui-20120103T131135.json; 4,同一个文件将yui里的css定义全部整合到通配符选择器中,并重复上一步操作,保存数据为uniselector-20120103T131500.json。 CSS *{ margin:0; padding:0; border-collapse:collapse; border-spacing:0; border:0; ....

Uncategorized

QQ音乐2011 N宗罪

已经忘记是哪一天,QQ音乐突然更新到某整个UI都是绿色的版本,当时对这个更新就突然不爽了,播放器这个配色虽然突然有点不习惯,但也就算了,设置窗口里的文字也是绿色的呀,瞎了啊瞎了啊,我的眼,这是罪一。 如果你一直用先前版本的QQ音乐或同类产品,你应该知道,它的歌曲列表的窗口和歌词窗口有个磁性吸附的功能,列表和歌词黏在一起的,但是最小化后,歌词窗口不会跟着最小化啊,毛病了吧!罪二。 会看我博客的同学一般都会知道css里的z-index属性,用这个表述比较形象点。在我切换窗口做其他事情后,把窗口切回QQ音乐,尼玛歌词哪去了?歌词按钮是激活的,也就是应该一起出现的啊,后来发现,其实歌词是有在的,只是它的z-index跟主窗口不一致,在其他窗口后面躲着,一 一+罪三。 有时候有的歌曲在列表自动播放的时候,会变成红色,就是说,那是不能播放的状态,或者解码失败什么的,手动点击是可以正常播放的。坑爹么,罪四。 还有部分歌曲有时候没播放完毕就自动切歌了,我原以为是我人品问题,可是后面觉得不应该人品差到会下到好几首这样的,还是通过QQ音乐搜索的结果下的,后来跟腾讯的某前端说的时候,他也说有时候会遇到,我就不说什么了,罪五。 对于搜索框合并成一个,我一开始很不爽这感觉,但是想想会习惯的,可是它就是不给我习惯的机会,拼音搜索的时候,它知道我要搜的是什么,可以搜到网络资源,却不知道我本地也有,罪六。 好吧,还是搜索功能,有些歌会有重名,即使同一首可能我也会喜欢收藏不同人不同版本的翻唱,那么,搜索出来的结果,我该怎么分辨,当我选错了,要怎么快速定位到下一个搜索结果呢?以前的版本本地搜索是没这个问题的,可以很方便地点箭头定位到下一首,罪七。 嗯,随机播放什么的重复的概率有点高,貌似用过的播放器都是这样,不知道是为什么,但是也不至于每次打开播放器都从更新后第一次打开的那首开始放吧,shit,罪八。 使用一段时间后,关闭QQ音乐,然后crash,罪九。 暂时只有这些不舒服的地方,还有的地方可能没用到也就没体验到,欢迎补充。btw,不喜欢乐库弹出推荐,对于产品运营需要表示理解,但是大部分情况下我只想听已下载的歌曲,没心情去发现新歌的时候,基本看都不看就关闭了,不知道能不能对这个影响加载速度的流程做些优化,比如可以不要每次都弹,一天只弹一次什么的。 本文发表前两周已经通过腾讯的前端友人帮忙传达了一个无足轻重的用户的使用体验,不知道什么时候会把这些细节都改好。本来好好的一个产品因为一次突然的改版出现这么多问题,这个产品不知道是怎么把关的,难道自己开发的东西自己都不用一下么,用了就没问题么。好多的体验一下子都毁了,这不是自杀么。

Uncategorized

Chrome扩展:Run Selected HTML

大家推荐自己开发的Chrome扩展:Run Selected HTML,Fork it on Github:Run Selected HTML 这个扩展对于平常爱学习的同学还是比较有用的,至少我是这样感觉的哈哈,安装完扩展后,当你在阅读一些前端技术博客的时候,就可以选中页面上的html代码,然后右键点“Run Selected Code”就可以查看代码效果啦。 XHTML 123456789101112<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>测试一下下</title></head><body><h1>测试扩展</h1><div>安装完扩展,请选中这段html代码,然后右键点击“Run Selected HTML”查看效果</div></body></html> 有任何bug或者建议,欢迎留言反馈。如果觉得工具挺方便麻烦+1或好评哦 更新:2011-12-18 添加了一个可以拖放的按钮,这个按钮可以把你看到的示例代码进行分享

Uncategorized

QQ帐号申诉流程“漏洞”

06年利用拍拍的信息泄漏问题为自己的QQ找回了第一代密保,而写这篇文章则是因为室友在外地QQ被盗,回来改了密保后,密保又被盗号者修改而来,为了搞清楚为什么密保改了还会被修改,我亲自尝试以他人身份,假设在知道很少的信息的情况下修改自己QQ的二代密保,结果显然是成功了。 在尝试的时候,我发现这个帐号申述流程比以前“好多了”,简单明了易操作,让我们来看看这个流程是怎么进行的,其实你也可以直接到申诉页面(http://aq.qq.com/cn2/appeal/appeal_index)自己体验下。 我简单用文字描述下几个必填项目: 填写要申诉的QQ和验证码填写“真实姓名”和收信邮箱(或者用短信方式,没有尝试)填写邮箱收到的验证码,用过的密码(非必须),常用登录地点(非必须)跳过密保验证,直接进入邀请好友协助,填写三个好友QQ和“他们的名字”将邮箱收到的申述编号和你的真实姓名给你的好友在好友的填写完“他们的名字”、申诉编号和你的“真实姓名”后,等待不超过三个小时,申诉成功 这个流程看上去没什么问题,好吧,看看我是怎么申诉的,下面分两种情况来“盗取指定QQ号码”,首先假设我是盗号者。情景一:我通过木马盗取了目标QQ,登录QQ时记下上次的登录地点,然后我通过目标QQ的好友知道了QQ拥有者的基本信息,或者我通过QQ资料(可以在QQ各个业务中找到)以及搜索引擎知道了目标QQ拥有者更多的信息,为了确保重复盗取的可能性,我偷偷的开几个小号混到目标QQ好友里。 情景二:我想盗取目标QQ,但是他并没有中木马,甚至还不知道我的存在,我先利用搜索引擎收集对方QQ的资料,然后分不同时间以各种手段加好友(3个以上的号),通过跟对方聊天的过程获取对方登录地点,以及一些基本的个人信息,尽可能多和真实,我想这点不难吧,你需要的是耐心。 情景一的前提是随机性的中木马,后续工作其实跟情景二是一样的,就是利用各种社工手段获取尽量多的信息,然后接下来去QQ安全中心申诉。 我们按照前面的提到的申诉步骤来分析下:第一步谁都会,跳过; 第二步,如果你知道了对方的真实姓名最好,这个信息在前面的两个情景中都可以很轻易得到,不然随便填一个,邮箱当然是填你自己的啦; 第三步,如果你是盗号的,你肯定知道他用的密码,填一个,然后是登录地点,情景一在登录对方QQ的时候,QQ自己会提示,情景二中也很容易问到; 第四步,好友协助,你懂了吧,情景一偷偷用对方的QQ加自己的小号,情景二就想办法加3个,然后填写你的小号,邀请他们协助你申诉; 第五步,申诉编号在你的邮箱里; 第六步,你的小号会收到协助邀请,打开填写对方的名字,也就是第二步填写的名字,你的名字和编号; 最后你就在只知道对方名字、QQ号、登录点的情况下修改了对方QQ的密保了,整个过程正如我实验的那样。 亲,常用登陆地下,如果帐号资料有限或无异常,资料只填一两项就会通过的。好幼稚的测试呀~——某腾讯工作人员如是说 在实际操作过程中,我发现异地申请并不是失败的主要原因,而是邀请协助的好友跟你联系的时间长短,也就是说,要成功利用,你的小号必须潜伏一段时间,并且跟目标都有频繁的联系。 整个过程其实没有什么技术含量,基本就是靠一些常规的社工即可完成,虽然本次测试可能是运气好,或者说对在常用地申诉的审核会放宽松,实际我特意让好友用假的名字帮我测试的,如果这个问题不应该被重视,那就当我蛋疼又放了个P吧,btw,忘记自己密保的同学赶紧先改下。

Uncategorized

自定义Google Chrome控制台样式

忘记什么时候,好像有个群里有人问可以自定义Google开发人员工具的样式吗,我一直以为是修改devtools.css,但是没找到样式文件,现在终于让我找到方法,看效果图 样式下载:Google Chrome开发人员工具样式文件或者到这里: IR_Black Skin by Ben Truyman将此样式文件覆盖Google Chrome程序文件夹下的custom.css即可看到效果。 对应系统的开发人员工具样式路径:Mac: /Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.cssPC: C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css ~Thanks to @VSCUbuntu (Chromium): ~/.config/chromium/Default/User/StyleSheets/Custom.css ~Thanks to @Carlos xp以下的系统开发人员工具样式路径自行查找相应的Google Chrome位置,你可以在Chrome地址栏输入:chrome-devtools://devtools/devTools.css,回车并查看开发人员工具的默认样式和选择器,然后在custom.css里重写样式。

Uncategorized

python简易网站路径扫描器

出于一些需要,要对网站的指定目录或者页面进行检查是否存在,于是用python写了个简单的检测脚本,没有用多线程实现,只是简单的实例,可以根据自己的需求改写和自定义字典文件。下载:urlscanner

Uncategorized

一个分享网页内容片段到腾讯微博的JS

如果你要找的是网站访客点击按钮就能将网页名称+网址+指定图片,转发到腾讯微博的脚本,很好,请访问http://open.t.qq.com/apps/share/,腾讯已经有提供这样的功能了。 如果你发现一个网站上的某句话或一个笑话你很喜欢,你想转播到腾讯微博,你必须复制想要的内容,网页的地址,然后贴到腾讯微博发表。 如果你觉得上面的做法还是很麻烦,或者你懒到极致了,你可以试试一个丸子写的user script:http://userscripts.org/scripts/show/99027。安装完脚本,你在访问页面的时候,选中文本就会有分享到微博的按钮出现,点击它即可。 如果你是像我一样的博主或站长,只是想给自己的博客或站点添加一个这样的功能,你可以下载这个js,引入到页面即可。你可以试试在当前页面选中一段文本看看效果。 好吧,不得不承认默认情况下,只有Chrome可以直接安装使用,而在Firefox、Opera、IE678等不同浏览器上的使用你可以参考:UserScript(用户脚本)在Firefox、Opera、IE678等不同浏览器上的使用上面的方法。 这个用户脚本是有缺陷的,因为它绑定了页面的mouseup事件,所以,如果页面中如果有监听鼠标点击弹起动作的脚本可能会失效。