上个周日,即 5 月 12 日,风和日丽,正和朋友在天河公园悠闲的散步。突然接到运营的电话,语气匆匆的说道: “xxx, 不好啦,阴阳师官方论坛 好像被黑客攻击了,全部页面变成黑白了,你快回来修复一下”。一听到这消息,我肯定很震惊啊,做了几年的 web 开发,总算被黑客盯上了,正如一句老话所言:出来混,迟早要还的。于是乎,我匆匆忙忙的和朋友道了别,小跑回公司,因为公司到天河公园就几百米的路程嘛,所以大概 10 分钟就到了,打开电脑一看,啧,还真是啊,页面怎么全部变成黑白了啊?
看上去,我的第一反应是有种淡淡的忧伤。之前也了解过,有些网站为了悼念某个人,可能会在那人的诞辰日把网站设置成黑白。但是,这种网站一般都是个人网站,他为了纪念过世的亲友。可是,我们的阴阳师论坛不是个人网站,为了悼念谁呢?难道是悼念游戏里面的某个人物?
还有一个问题让我困惑的是,运营说她上周五下班前看论坛还是正常的,就刚刚打开才变成这样的。我们周六日一般也没有人回来加班的的,就算加班,也不可能随意发布代码到线上环境的。所以排除了周六日有人上传了代码的可能。越想越觉得匪夷所思,难道真的是灵异事件?
既然,想不出来是什么原因,那就老老实实的从代码中找原因啦,毕竟我们作为马列主义的信仰者,才不相信什么灵异事件呢!于是打开 chrome dev tools ,通过审核元素,选中 html 根元素,就看到设置了如下的样式 :
filter: grayscale(100%);
复制代码
咦,这不是滤镜嘛!然后,把这代码删除掉,页面突然就变成了彩色了。所以找到页面变成黑白的原因了,是因为添加了个滤镜属性。
可是,还有个问题是,这个滤镜是谁加的?我在论坛项目的根目录全局搜索 “filter” 关键字,却什么也没有搜索到。难道是我没有更新代码,于是 git pull 一下,再搜索,依旧没有搜索到任何东西。
然后,静下心来想想,突然想到论坛是使用 discuz 来搭建的,除了本地代码外,还可以在管理后台的统计代码处添加 css 和 js 的,于是登录到后台,果不其然,看到了一坨如下的代码:
function bnw() {
var black = "filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(data:image/svg+xml;utf8,#grayscale); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: gray; -webkit-filter: grayscale(1);",
body_bg = "background:url(https://dhxy-f.netease.com/forum/201805/11/202133wufbodbhdzxqdeub.jpg) center top repeat-x!important";
var star_month = new Date().getMonth() + 1,
star_today = new Date().getDate(),
end_today = 13;
var _html = document.getElementsByTagName("html")[0],
_body = document.getElementsByTagName("body")[0];
if (star_month == 5 && end_today - star_today == 1) {
_html.style.cssText = black;
_body.style.cssText = body_bg;
}
}
bnw();
复制代码
这段代码虽然有点长,但是做的事情是:判断日期,如果是 5.12 日就添加滤镜效果,让页面变成黑白。 现在问题的根源已经找到了,原来是后台配置了一个定时炸弹。这不是什么灵异事件,更不是什么黑客攻击。 可是,这代码是谁加上去的?是什么时候添加上去?因为后台配置的代码没有 log, 我无法查看修改记录。另外, 5.12 是个什么特殊的日子呢?我只知道今天是母亲节。百思不得其姐的我,拿起电话打给 了老大,他一开始也很诧异,说最近没有接到过要在 5.12 把论坛设置成黑白的需求啊。然后,过了一会,他突然大声的说:我想起来了,5.12 是汶川大地震纪念日啊!这个需求是去年提的,当时为了 悼念 汶川地震 10 周年。
事情的真相总算找到了,原来这是去年遗留的代码引起的。
这次 ”灵异事件“,引起了我对代码管理的一些思考:
- 条件判断要严格
- 及时移除过期的代码
- 让用户知情,或把选择权交给用户
第 1 点,条件判断要严格:以这次事故为例,那段代码是去年添加的,本来是 希望仅在 2018-05-12 这天起作用的,可是,由于代码里面只判断了 月日,而没有判断年份,导致了在 2019-05-12、2020-05-12......每年的 5.12 都会起作用。所以,我们写代码不应该偷懒,该严格的的地方还是得严格。
第 2 点,及时移除过期的代码:纪念汶川地震10周年,这属于一次性活动,活动结束之后,这段代码就是多余的、过期的了,所以应该要及时移除掉的。这种过期的代码,除了会影响后面接手同学的理解之后,还可能会引起一些其他负面影响,就像这次的事件。
第 3 点,让用户知情,或把选择权交给用户:并不是每个人都会 一下子想起来 5.12 是汶川地震,在他不知情的情况下打开页面,看到黑白,肯定会觉得莫名其妙的,甚至觉得网站是不是 有 bug 了。所以,可以打开 页面时,提示用户: ”今天是汶川地震 xx 周年“。又或者,把是否要显示成黑白的选择权交给用户,比如弹窗提示 “切换到黑白主题”,让用户 选择 “是” 或 “不是”。
说到这里,不知道大家还记不记得去年的 “antd 的圣诞彩蛋事件”,传送门:如何看待 Ant Design 圣诞节彩蛋事件?。这种强行把自己的意愿推加到用户身上的做法,是不负责任的。想一下,比如你用 antd 做了个伊斯兰国的政府网站 ,一打开竟然全都是庆祝基督教圣诞节的彩蛋,这后果有多严重?所以,不要老是想着给用户带来什么惊喜,因为每个用户的性格或文化可能不一样,你的精心准备,可能只会让用户有惊而无喜。