上个周日, 即 5 月 12 日, 风和日丽, 正和朋友在天河公园悠闲的散步. 突然接到运营的电话, 语气匆匆的说道: "xxx, 不好啦, 阴阳师官方论坛 https://yys.16163.com/ 好像被黑客攻击了, 全部页面变成黑白了, 看着挺吓人的, 你快回来修复一下". 一听到这消息, 我肯定很震惊啊, 做了几年的 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,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter ....3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#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 圣诞节彩蛋事件? https://www.zhihu.com/question/306858501 . 这种强行把自己的意愿推加到用户身上的做法, 是不负责任的. 想一下, 比如你用 antd 做了个伊斯兰国的政府网站 , 一打开竟然全都是庆祝基督教圣诞节的彩蛋, 这后果有多严重? 所以, 不要老是想着给用户带来什么惊喜, 因为每个用户的性格或文化可能不一样, 你的精心准备, 可能只会让用户有惊而无喜.
来源: https://www.cnblogs.com/yugege/p/10874608.html