【解密】阿里UED闯关第三季

今天突然收到群里发来的一则阿里校招的 UED 闯关试题，我本身就是做前端的嘛，于是抱着试试看的心情玩了一把。

先上地址：http://ued.taobao.com/quiz3/。记得，这个游戏要用chrome来玩哦。

OK，let's go!

填写了邮箱后，进入第一关。

第一关　　突破，带锁的门

一扇密码大门，密码是什么呢？左试右试，都不对。然后，打开chrome的开发人员工具，仔细查看源代码。当看到一个id=page的div时，咦？这是什么？好像有个base64的东东？解开看看？

于是乎，网上找了一个base64在线解密的网站（这个随便一搜就有，就不提供地址了），解密.... 哇，这，这，这不就是一个地址吗？OKay，输入这个地址看看。哇哈哈，果然是第二关的地址。

正确方法：控制台输入 powder.blow() 即会显示三个指纹印，也就是3的阶乘 = 6种情况。都试一遍就出来了。不过你的显示器要好哦，要不像我一样，换了电脑才看出来。。。

第二关　　激光，前进的方向

这是什么东东？两面镜子，一个激光器。镜子用来干嘛的？嗯，应该是反射激光的吧。可是，只有一个小黑点，反射到哪里去呢？还是用chrome的开发人员工具展开源代码。咦，貌似有个小黑点被隐藏了（id=pharaoh的那个div）。我们把它显示出来，修改其display:block。OKay，现在我们有两个小黑点了。接下来，自然是调整镜子，反射光线穿过这两个小黑点。

怎么调？首先，第一面镜子 （id=ma 的那个div），高度上升30：top:550px，逆时针旋转82度：-webkit-transform: rotate(-82deg);。

第二面镜子（id=mb的那个div），高度上升20：top:430px，顺时针旋转172度：-webkit-transform: rotate(172deg);。哈哈，发现一部PDA。

第三关　　坐标，隐藏的线索

嗯，一个没完成的二维码，似乎图片上有些乱七八糟的数字。再用我们的开发人员工具展开看看。咦，这个二维码不就是个canvas吗（id=qr-canvas的那个canvas）？我们似乎可以画点什么上去。画什么呢？貌似看到一段js注释，里面都是乱七八糟的数字。仔细一看，呃，这些数字似乎是某种坐标。该不会就是用来绘制我们的二维码的吧？不管了，试试。

总不能人肉一个一个输入吧，写个for？下面是我自己写的：

var s = '这里是那段js注释，太长了，你们自己搞定吧'.split(' ');
var c = document.getElementById('qr-canvas').getContext('2d');
c.fillStyle = '#000';
for (var i in s) {
    var a = s[i].split(',');
    c.fillRect(a[0], a[1], a[2], a[3]);
}

哈哈，果然，二维码绘制成功，可爱的success蹦出来了。

第四关　　图案，疯狂的猜测

这关比较蛋疼，考你的日常积累的。就是猜图游戏，直接输入你猜的答案就可以了。这里提供几个我遇到的：

操作系统：ubuntu

网址：stackoverflow.com、http等

模板语言：jade

工具：grunt

其它：CSS Sprites、less、npm、v等，自己试吧

第五关　　寻找，无尽的房间

呃，一个空房间，有个next-room号。再仔细观察，咦，地址url上似乎可以写房间号。那我们就把下一个房间的号码写上去吧：room=（下个房间号），回车。果然，下一个next-room出现了。那意思是要我们一个房间一个房间的找下去吗？人肉？NO，没看到标题叫无尽的房间吗？好吧，我们写个循环吧。

打开控制台，看到什么？“jQuery is ready for you”，真贴心，那就用jQuery吧。

function _get(id){
    var u = window.location.href.replace(/\=\d+$/, '='+id);
    $.get(u,
       function(data){
           console.log($(data).find('#message').text());
           _get($(data).find('#next-room').text());
       }
    );
}
_get(你页面上显示的下一个房间号);

嗯，自动化就是快，不用3秒种，系统终于认输了，直接给你一个地址。还愣着干什么，还不赶快输入地址栏！

第六关　　消除，最后的任务

终于到最后一关了，看到指纹没，看到指纹没？可是，怎么帮斯诺克消除指纹呢？直接用js去掉那个DIV？显然不行！控制台似乎提示我们要注意cover。好吧，确实找到一个class=cover的div。然后，我试着把它移到指纹上面，不行，没反应！再试着把它直接appendChild到指纹的DIV里，还是没反应。怎么会没有反应？

折腾来折腾去，一点办法也没有。再来看看源代码，呃，似乎在body里又发现一段base64。解密，又是一个地址。赶紧输入地址栏，YES! 成功通关！

正确方法：在输入框注入一楼提供的代码！

结后语：第一关和第六关本人都没找到正确的办法，都是通过隐藏在源代码里的base64侥幸通过。我不知道这是不是正确的办法。如果你有正确的办法，请告诉我，谢谢！正确方法已跟进。