無標題文檔

Twitter 的 Clickjacking

最近的 Twitter 的 Clickjacking 漏洞 值得我们注意下。

这个漏洞的原理,就是将 Twitter 的发布页面 通过 iframe 载入到第三方页面。然后将 iframe 透明度设置成零,并将发布按钮与第三方页面的按钮重合。当用户本意点击第三方页面的按钮时,实际上点击的是 Twitter 页面的发布按钮( 详细 )。

https://gracecode.b0.upaiyun.com/2009_02_13/1234539040.jpg

由于 Twitter 中的好友基本上都是熟人,加之好奇心的驱使很多人都会点击该按钮,因此很快就被传播开来。不过很快截止目前(2009-02-12), Twitter 官方已经修复了该漏洞

https://gracecode.b0.upaiyun.com/2009_02_13/1234539182.png

官方的修复方式较简单,就是判断页面是否被 iframe 引入,如有则清空 body 节点的内容。而个人认为,这是非常偷懒而且治标不治本的的解决办法。

首先,既然清空页面(还做了个延时,又那么多的 DOM 操作,费时又费力),那何不直接跳转?其次,就是发现 Twitter 将几乎所有的 Web 版页面都加入了这段代码,有点杀鸡取卵的意思。再加个「马后炮」,其实这个页面压根就可以不用处理 $_GET['status'] 请求。

看了下代码,发现 Twitter 发布页同时包含了个 Javascript 的全局变量 twttr.form_authenticity_token,-- 我想你知道干嘛用的 (当然,前提条件是你怎么得到它)。

另外,还有个安全隐患,就是 移动版的 Twitter 页面 。手机页面由于没有过多的考虑 Javascript 操作,也就没有了上述的那段代码,但这意味着 Clickjacking 攻击其实在此页面还是存在的。

https://gracecode.b0.upaiyun.com/2009_02_13/1234539386.png

上图是将此页面加入到 iframe 的效果,感谢 玉伯 同学的测试,剩下就打住不继续说了。

几点心得和感叹

  1. 前端代码在实现越来越丰富的应用的同时,也给安全问题划开了道巨大的口子
  2. Twitter 此法虽然也解决了该漏洞,但个人感觉并非常「不完美」。这就想起在平时,需要用什么方法才能恰当的搞定相应的需求
  3. 老生常谈, 避免 Javascript 全局变量 -- 没有不注意它的理由
  4. 漏洞的解决尽可能覆盖到所有的产品线,捡了西瓜的同时还得捡起芝麻

2009 年,IE6 走好

https://gracecode.b0.upaiyun.com/2009_01_03/1230920848.png

根据 Dotzler 的统计 ,IE6 的份额正在缩水,这可能是 2009 年本人听到的第一个好消息。于此同时, Gmail 的浏览器支持列表中已经将 IE6 给剔除 ,Google 官方 推荐用户使用 Firefox 或者 Chrome 可获得双倍的速度和用户体验。

那么, 似乎又回到 了 IE6 的话题。

IE6 为什么存在着?

IE6 的发布时间可以追溯到 2001 年的 Windows XP 的发布。是的,IE6 已经成为了世上最「长寿」的浏览器。而问题是,IE6 为什么能够如此顽强的存在着。抛砖引玉,本人先列举几条,欢迎补充:

操作系统的「潜规则」

Windows 系统和 IE 紧紧的捆绑,使得升级浏览器变得如履薄冰。正如我们看到的,几年来 Windows 系统的补丁也仅仅是在原有的基础上缝缝补补 -- 微软显然不愿冒这个风险。

Vista 的失败

Vista 已经变成了第二个 Windows ME 。撇开这个先不谈,用户升级浏览器的另种情况,就是操作系统的升级。Vista 商业上的失败,注定 IE6 搭载的 XP 这艘船能够续航更长的一段时间。

IE7 也不是什么好鸟

2006 年底发布的 IE7 远远的没有达到市场的预期。从当时的 IE7 发布情况看,注定 IE7 只是个过渡性的产品。

IE8 开发进展缓慢,并远被甩在了后面

「现在这个功能,我们也有了」, D2 上微软兄弟幽默的言语 也折射出一个事实,目前根本就没有用户敢用 IE8。IE6-8 三个版本并存的混乱局面,越发说明了微软的这个坑是被自己越挖越大、越挖越深了。

普通用户不在乎

是的,这是事实。普通用户而言,上网仅仅是双击某个图标,输入某个网址就可以。他不了解什么是浏览器,当然也没必要了解。对于他们而言,能够完成自己的目标才是最重要的。

国内「特殊的情况」

譬如:国内的软件几乎都是免费的,获取没有任何的成本、国内的教程几乎都是介绍怎么使用 Dreamweaver、 Firefox 在国内病毒式的推广 ,在部分「不明真相」的用户心中,俨然已经是恶意软件的代名词,等等…

「2009 年,IE6 真的会消亡吗」

那么,在接下来的 2009 年,IE6 真的会消亡吗?在本人看来,至少不会完全消亡。IE6 的完全消亡,需要我们大家共同的参与。例如,作为名前端(或者其他与浏览器打交道的兄弟),应该怎么做?

浏览器的表现不完全一致

不同的浏览器提供的功能和性能不完全一致,所以页面没必要在所有的浏览器中完全的一致。我们要让我们的同伴、用户了解,至少那 2001 年发布的浏览器所表现的性能,不可能和现代的浏览器完全一致。

对于 IE6 的优雅降级

我们可以尝试先丢下 IE6 的包袱,开始针对现代的浏览器开发,然后 优雅的降级 到老版本的浏览器。例如,我们可以高版本的 CSS 特性,然后再针对 IE6 使用单独的脚本去实现它。

继续布道

我们要让更多的人了解 IE6 是个糟糕的浏览器,并推荐他们使用更好的浏览器,譬如 Firefox、Chrome 等。

-- Split --

最后,解铃还须系铃人。2009 年微软 即将发布的 Windows7 ,从另个侧面也将推动 IE6 的灭亡。总之,09 新年伊始,是时候给那老态龙钟的 IE6 钉上棺材钉了。

「我们是前端」

周六与朋友一起,相互分享自己的新知。本人较懒,没有做过多的准备,简单的分享了下对前端这个职位的理解( 下载 PPT )。

其中主要讲述了前端及其职能、前端的项目开发流程等方面。这些内容 其实 圆心 已经非常详细的解说过了 ,本人也是即学即用。

前端这个职位目前在国内还是比较「新鲜」的,很多人都不了解前端具体是做什么。而可以预见的是,通过 D2 、相互分享等渠道,前端这个职位将会被越来越多的人所知。

最后,获得四个很受用的关键字

激情、执着、开放、谦逊

上述我想不仅仅是前端,也应是所有的开发人员,都值得去努力做到的。

IE6 方程式(翻译)

<!--[if lt IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" 
        type="text/javascript"></script>
<![endif]-->

兼容标准的浏览器并不会运行此段脚本(对于他们而言仅仅是注释而已)。如果访问者使用的是 IE6 这糟糕的浏览器,就会额外的下载这段 Javascript 脚本。

那么问题是,什么时候应该编写额外的 IE6 样式,而什么时候应该做的仅仅是引入那段 Dean Edwards 编写的脚本呢?详细的回答这个问题,可能需要花费我和我的同事 Natalie Downe 整个上午的时间。然而回答这个问题之前,您首先需要了解并回答两个问题:「在针对 IE6 上的开发时间有多少?」以及「有多少访问者正在使用的 IE6 ?」。

让我们使用 t 表示总的开发时间、t6 表示花在 IE6 上的时间;所有的访问者数目表示为 a、 a6 则表示正在使用 IE6 的访问者。本人和那伙极具数学细胞的伙伴 Cennydd Bowles 和 Natalie 定义了下面的公式,用于量化的计算有多大的权重去使用上述 Dean Edwards 的 IE7 脚本。

https://gracecode.b0.upaiyun.com/2009_11_05/004696a19db9.jpg

p = 50 [ log ( at6 / ta6 ) + 1 ]

你可以尝试计算下属于你自己的数字。比如你花了大量的时间在 IE6 上,但只有很小部分访问者使用该浏览器,那么你可能会获得个非常高的数字。这意味着你可以使用 IE7 脚本。而反过来,如果使用较少的时间处理 IE6 的问题,或者你的大部分访问者都在使用 IE6 浏览器,那么那个 p 值会很小,这时你应该另外编写针对 IE6 的样式。

当然,实际情况是使用这个方程式显得有点自欺欺人。你可以很容易获得使用 IE6 的访问者占总访问者的比例数,但然而获得精确花费在 IE6 上的开发时间却显得相当的困难 - 或许需要当你完成了总的开发计划以后,才能得出具体所占的时间,而到那时这个方程式已经显得有点「马后炮」了。

替代上述方程式的另个方案,可以尝试下限制花费在 IE6 上的开发时间。具体是首先让你的站点与标准保持兼容,然后计划针对 IE6 上的开发时限。如果不能在这个时限内解决问题,那么替代使用 Dean Edwards 的脚本。

这一具体的占用时间可考虑和访问者使用 IE6 所占的比例进行计算。比如 20% 的访问者仍然在使用 IE6,同时你使用了 5 天开发时间完成了兼容标准的站点,那么就可以限定 1 天时间集中解决 IE6 的问题;但如果有 50% 的访问者仍然在使用着 IE6,那么你可能需要准备 2.5 天时间去解决这些问题。

所有这些针对 IE6 的处理方式的讨论没有绝对唯一的答案,同时也不可能适用于每个人。如何处理 IE6 这个棘手的问题仍然是当前的焦点之一,目前互联网上不少的 Blog、文章甚至站点都在讨论什么时候应该放弃支持 IE6。但他们没有明确的定义他们所谓的 「支持」具体是何意 。当然这不是个简单的「是」或者「非」就能回答的问题。作为替代,下面有个不同层级的支持方案:

上述每个条目获得的最终结果可能是非常极端的。本人不赞成开发人员积极的抵制任何一款浏览器,也同时认为使用那些过时的浏览器的访问者获得的体验,与那些使用现代的浏览器的用户获得的不可能完全一致。真正的要点在于,IE6 被我们放在「支持」与「不支持」之间的哪个平衡点之间。

正如我认为标记语言最重要的是语义,上述的观点在 Web 开发中同样的重要。我们尝试获得更好的方式,这总要比那挂在口头的冰冷动词「支持(support)」显得更为的重要。如果你向你的访问者保证你的站点「支持」 IE6,那么你得了解更深一层的含义。相反的,如果你表明将「不支持」 IE6,那么你同样需要花点时间思考为什么需要这样做。

最后,Yahoo 的 Web 开发人员提出的 浏览器分级 概念我很认同。当然有其他的想法,我同样会有兴趣去倾听。如果我们都步调一致的发出自己的心声,那么最终我们会以更好的姿态去击败共同的对手!

淘宝和「有啊」之争

https://gracecode.b0.upaiyun.com/2009_11_05/76098674b3e1.jpg https://gracecode.b0.upaiyun.com/2009_11_05/62439674b295.jpg

本来不该引发这样「敏感」的话题,但同时也作为经常上网购物的普通消费用户,在这里算是废话几句。

事情得首先从尝试「有啊」开始。在「有啊」上找到了件合适的商品,由于自己没有安装百度 Hi 客户端,所以使用旺旺联系上卖家说明情况,然后表示能否使用百付宝付款(自己也够孙子的)。

然而那时那卖家显得很紧张,慌忙把我拉到 QQ 里面聊。具体的情况看下面的聊天记录

××专卖店
    淘宝上的,认识您很荣幸!
手气不错
    怎么不能用有啊呀~ 
××专卖店
    不要在淘宝上把顾客引到百度有啊,这样淘宝会把咱们的店铺封掉的啦。
××专卖店
    我一直叫你加我QQ
手气不错
    不会吧,现在淘宝还这样做呀? 
××专卖店
    这很正常的啊,百度开了和淘宝一样的购物平台,你不知道这利害关系啊?
手气不错 
    我有啊里的确充点钱,现在拿不出来,所以只能消费了。 
××专卖店
    所以在淘宝的时候就要遵守淘宝的规则,不能故意把顾客往外网上拉的,
手气不错 
    不明白,对于我们用户而言都不是一样的嘛~~
××专卖店
    在有啊的地盘就要遵守有啊的规则也不能把顾客引到其它平台上交易的,
手气不错
    这个也算是不正当竞争吧~ 
××专卖店
    就好比咱们在大商场卖东西一样的啦,要小心哦。
手气不错 
    还不知道有这样的玄机,晕的 
××专卖店
    要小心,在每个平台上我们做为卖家都要小心的。
手气不错 
    那您说淘宝官方搞不好还监控旺旺的聊天记录喽?
××专卖店
    肯定的啦
手气不错 
    嗯,理解的 
××专卖店
    咱们聊QQ,腾讯也知道咱们聊的是什么内容
××专卖店 
    每个行业都有竟争的,
手气不错 
    哎,晕的,那我从有啊上给您拍下,然后您修改下价格吧,顺便我也熟悉下有
    啊的购物流程 
××专卖店
    好的,要记住,做为卖家,咱们在有啊的时候就要遵守有啊,在淘宝的时候就
    要遵守淘宝的,这样咱们才不吃亏的啦。
××专卖店
    特别不要在旺旺和有啊上讲关于信誉的事哦,呵呵。
手气不错
    嗯,受教啦,以后这点得注意了,在别人的地盘,哎…… 
××专卖店 
    就是啦,呵呵。
手气不错 
    放心吧,这事情会注意的,今天我也算是见识到了 
××专卖店 
    呵呵,互相学习了哦 
××专卖店
    http://wenda.tianya.cn/wenda/thread?tid=793e6b54f97210e3
××专卖店 
    您用GOOGLE(谷歌)搜索一下,关于百度和淘宝的竟争,有好多新闻和贴子的,
    那些都是非是啦,咱们生意不参与的。即使要参与也要穿着马甲不让别人认
    出来的,呵。

最后,说下自己的几点个人看法

  1. 两平台间的竞争,最后波及的只能是徘徊于两者之间的中小卖家。
  2. 在还未成型的电子商务领域过早的形成寡头垄断,未必是件好事 - 有竞争才会有进步。
  3. 双方企业选择以什么样的姿态面对自己竞争对手,这直接影响着我对其的印象和态度。
  4. 如能看到双方企业都能以开放和自信的心态去对待自己的竞争对手,我想那是相当喜闻乐见的。

我的照片

嗨!我叫「明城」,八零后、孩她爸、码农、真谷粉、伪果粉、微软无脑黑、宁波佬,现居杭州。 除了这里,同时也欢迎您关注我的 GitHub (2) 、 TwitterInstagram 等,谢谢。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 其实无所谓叫什么名字,作为码农知道取名是件很难的事情。最后想到的这个名字,其实都没啥特别的含义,系统默认的文件名而已。

作为八零后,自认为还仅存点傲娇式的幽默感,以及对平淡生活的追求和向往。 为了免得对号入座和不必要的麻烦,声明本站点所持观点仅代表个人意见,不代表自己所服务公司的立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

文章

项目

微信公众号