声明，此漏洞已提交叽歪官方处理（2009-02-05），本案例仅作技术研究。由此漏洞造成的所有后果，本人不承担任何责任。

参加集团「精武门」安全峰会时， 80sec 团队对于饭否的 CSRF 蠕虫攻击 案例还记忆犹新。抱着对比的心态，逐个检测国内各微博客类站点的安全性能，最终「很不幸」的锁定到了 叽歪 上。

分析 叽歪页面发布信息页面 的表单，结果发现全部都是交给 updateStatus 方法处理，如图

那么我们来看下 updateStatus 的脚本 是怎么写的（通过这个脚本，也可大体的了解叽歪的 API）：

发现 updateStatus 的脚本非常简单，就是检测下 textarea 的值是否为空（其实那样敲几个空格就可以绕过），然后就提交给服务器处理。而且逻辑上似乎有问题，返回的都是 false （或许是为了防止事件冒泡）。

既然 Javascript 方面没有增加额外的提交参数，这说明在 Javascript 禁用的情况下提交表单服务器那边也是能处理的。那么，根据叽歪发布页面的表单，尝试本地构建个同样的表单发送叽歪信息

<form action="http://jiwai.de/wo/status/update" method="post">
    <textarea name="jw_status" ></textarea>
    <input type="submit" />
</form>

结果成功了。这表明有存在 CSRF 的可能 -- 用户可以自行表单，发送信息给叽歪服务器处理，并且没有任何验证信息。

然后，非常「邪恶」地将 POST 方式改成 GET 尝试，结果发现又成功了。看来叽歪的接口没有区分 POST 和 GET，那么这样攻击的危害更扩大了层。

根据这个漏洞，简单的写了个本地 Javascript 脚本，尝试每隔一秒发送叽歪信息

setInterval(function() {
    var img = new Image();
    var message = '明城很帅';
    var api = 'http://jiwai.de/wo/status/update';
    img.src = api + '?jw_status=' + message + '&t=' + new Date().getTime();
}, 1000);

剩下就是社会学的范畴了。想到 沉鱼 小姑娘是叽歪的重度用户，于是让她打开这个页面（这时候，相貌是多么的重要）。

结果自然是预期所想的，顺便发现叽歪也没有限制发送信息的频率。就这样打住，通过这个漏洞进行蠕虫等进一步攻击等已是唾手可得。

最后，啰嗦下防范 CSRF 攻击 的「军规」：

1. 在请求中使用 Security token
2. 正确使用 GET、POST 和 Cookie
3. 使用 Referer 判断请求来源

后记

截止发文时（2009-02-07），叽歪已经修复了该漏洞，增加了个 Security token :

<input type="hidden" value="..." name="crumb" />

说完了理论 ，我们来做点实事。这篇文章将介绍使用 Javascript 实现的动画组件。

下面记录下当时编写这个组件的考虑的些问题，对技术细节感兴趣的朋友，可以 到这里参看源代码 ：

1. 需要几个回调函数控制初始化、动画运行时、动画完成的情况
2. 将动画精确到运行了几帧
3. 使用 setInterval 还是 setTimeout，最后还是选择了 setInterval（ 详细 ）
4. 不管元素需要更改那些属性，提供相应公式即可，但这可能带来性能问题
5. 要可扩展、而且稳定

这个动画组件的用法简要的说明下，首先我们要确定元素从哪里移动（begin）到哪里（final），我们可以将两个信息绑定到一起，比如

var position = {from: 0, to: 100};

然后实例化个动画组件，指定动画的运行时长（duration）以及动画运行类型（tween）

var motion = new Motion(duration, tween);

另外，我们当然希望在动画初始化、开始以及进行和结束时候做额外的事情，那么加入相应 的回调：

// 初始化
motion.onInit = function() {
    // ...
};

// 开始
motion.onStart = function() {
    // ...
};

// 动画运行时
motion.onTweening = function() {
    // 需要获取某个时间点的坐标时，可以使用 this.equation 方法
    var p = this.equation(position.from, position.to);
};

// 动画完成时
motion.onComplete = function() {
    // ...
};

当一切准备就绪，那么就可以开始动画了

motion.start();

当然，任何时候我们都希望能停止动画，那么就

motion.stop();

那么我们就可以通过这个动画组件完成常见的动画效果了。 这里有个 DEMO ，看下这个动画组件的实际使用例子。按照传统，代码可以在这里 打包下载 。

附，参考资源： YUI 的动画组件 、 mootools 的动画组件 。

-- 全文完 --

哲学上有种说法，「运动是绝对的，静止是相对的」。我们在编写各样的效果时，时常会碰到动画。下面的章，将讨论动画的原理以及实现。

动画，简而言之就是物体在某时间段内，不断的改变自身的属性。这些属性有可能是位置、大小等。为了方便说明，在这里统一认定为位置（position）。

那么，动画就有了两个基本的变量，时间和位置。用直角坐标系来表示，将 x 轴定为时间（time），将 y 轴定为位置（position），就可以得到这样的坐标系

从这个坐标系可以获得更多的信息，比如动画运行的时间段（x 轴的区间）、动画开始试物体的位置（begin）以及结束时的位置（final）。

然后，动画的基本关系可初步抽象出来。时间（duration）和位置（position）存在函数关系

position = f(time)

在这里同时引入 fps （帧率）这个概念。fps 简单的说，就是一秒钟内物体变化了几帧。它抽象成坐标中的元素，就是 x 轴的粒度。

fps 是个常量（比如通常电影的 fps 为 25，即每秒 25 帧），通过 fps 以及时间段（duration），则可以计算出这个时间段内物体位移了几帧（frames），公式如下

frames = (duration/1000)*fps

上述公式中，时间段（duration）以 毫秒 计算，即一毫秒等于一千分之一秒。

综合起来，我们要获得某个时间点的位置时，就可以利用 当前时间点（time）、时间段（duration、x 轴的区间），以及开始的坐标（begin）和结束的坐标（final）等因素来完成，那么可以将第一个的公式细化成

position = f(time, begin, final, duration)

同时，根据 fps 计算出的帧数，则可以得知某动画在这个时间段内运行了几次。而此函数产生的曲线，则可以说明在指定时间段内，物体的运动情况。如曲线比较抖，则说明物体运动比较快，反之则慢。

例如上述函数图的 45 度曲线，如果不考虑区间因素则可以写成

position = time

然后加上函数区间，则用函数表示

postion = final * time / duration + begin

那么就可以说明物体随着时间的改变，位置进行匀速递增的运行。

至此，元素的动画问题，这时就可以抽象成具体的数学问题。仅通过改变函数的公式，就可以改变物体动画的运行效果。

附，相关参考资源：

维基百科： 动画 （ 中文 ）、 FPS/帧率 （ 中文 ）

--未完待续--