今日,偶尔翻看淘宝源码,发现竟有美女形状源码。如下图:
此段代码在console中运行,结果更为惊叹。
亲手尝试的读者已经看到了代码运行的结果。taobao.com的console打印出了UED的招聘信息。淘宝的页面在短暂的loading 之后进入了UED的宣传遮罩层,同时提醒用户打开摄像头...可能读者已经发现了更多有趣的东西,这些有趣的东西感兴趣的同学可以慢慢挖掘。这里很多人已 经迫不及待想知道为什么。
我们看"美女"的源码,进入美女的世界...
一.美女爱金蛋
美女的源码,采用了匿名函数自执行的方式。为方便大家,还是贴过来:
javascript:Function('a,l,i,t,b,u,e,d',"a=['"+[
' :h8G895r,',
' ,hA@@@@@@@@#&5:',
' S#@Hs:;h&@@@@@@#3',
' 8F@P r&@@@@@@A;',
' 9.@e;grgr :9#@@@@@M;',
' h&@&&FiP9., ;8GH@@@@B.',
' :e@g@g (5":% iA@@@5',
' .c@j@oG ;s,: .A@@#5',
' ri@n@ Bu, .::. .;, ;@@@M ,:',
' .sM%@c@s&h sh;,..,. h@@@B sr',
' .i@d@u@.@msj ;9@@s8# si',
' s@Mt@a@o@b@aXos.:cro9m@"@) ;,s1.',
' rM#@@@@@@@@@B#@#&35s38#@@@8 i3;,',
' r&M@@@@@@@@@S:sS3r ,hS@@@@@&,,i:;;.',
' ,1G@@@@@@@@@@5 :;:SGM@@@@@&.:,:8&hir:',
' ;&@@@@@@@@@@B; 1HM@@@@@@Ms:,;r5h;H@,',
' G@@@@@@@@@@G: rsi&@@@@@@&: ,:,X9,.',
' r8M@@@@@@@@@@@#8r. G@@@@@@@B3;:,.:s::;',
' :G&B@@@@@@@@@@@@@@@MAXXXB@@@@@@@@@B31hi:,:;;',
' sGi.;3#@@@@@@@@@@@@@@@@@@@@@@@@@@@@#9rr;,,,i,',
' h1: ,S#@@@@@@@@@@@@@@@@@@@@@@@@@@@@Xhi. ,r',
' 13i,. :X@@@@@@@@@@@@@@@@@@@@@@@@@@MXh...,;r:',
' iXh;,.. 9@@@@@@@@@@@@@@@@@@@@@@@@@@MA9hr;:is:',
' ,X9r:,,.. 3@@@@@@@@@@@@@@@@@@@@@@@@@@@@G5s;;sh,',
' 9&5i;:,,. S@@@@@@@@@@@@@@@@@@@@@@@@@@@B9hsrsh1',
' sBG5i;::,..72&52&32&12&91&71&51&31&11&9&7&5&3&1',
' :11,11&9&7&5&3&1:01,9&7&5&3&1:9,7&5&3&1:8,5&3&1:',
' 7,11&9&7&5&3&1:6,9&7&5&3&1:5,7&5&3&1:4,3&1:3@821'
].join("','")+"'];l=a.join(i='').replace(/\\s+/g,i)[d='split'](i).reverse().join(i);l=l.substr(l.indexOf('@')+1,parseInt(l))[d](/[,:]/);while(t=l[b='shift']()){u=l[b]()[d]('&');while(e=u[b]())i+=a[t].replace(/^\\s+/g,'').charAt(+e);}eval(i);")();
为了降低代码的可读性,淘宝可谓用心良苦。将大量的代码写到了函数声明的内部,然后采用匿名函数的自执行。由于代码生涩难懂,我们不做手术刀式的解刨。将代码大致翻译如下:
//页面源代码的翻译
~function(){
var a,l,i,t,b,u,e,d;
//a 是一个数组的数据池
a = [
' :h8G895r,',
' ,FAP@.@e@g@g&&:',
' S&@FsP;.&e@g@g@(3',
' 8"@% r&@@@@@@A;',
' 9c@j;orir :9#@@@@@M;',
' hn@ &uis9%, ;8GH@@@@B.',
' :c@s@h i5d:u iA@@@5',
' ..@m@jG ;s,: .A@@#5',
' r@@t@aBo, .::. .;, ;@@@M ,:',
' .bMa@o@.&c sh;,..,. h@@@B sr',
' .o@m@"@)@;s, ;9@@s8# si',
' sHM@@@@@@@@BXSsi::r19&@@@G 5,s1.',
' rM#@@@@@@@@@B#@#&35s38#@@@8 i3;,',
' r&M@@@@@@@@@S:sS3r ,hS@@@@@&,,i:;;.',
' ,1G@@@@@@@@@@5 :;:SGM@@@@@&.:,:8&hir:',
' ;&@@@@@@@@@@B; 1HM@@@@@@Ms:,;r5h;H@,',
' G@@@@@@@@@@G: rsi&@@@@@@&: ,:,X9,.',
' r8M@@@@@@@@@@@#8r. G@@@@@@@B3;:,.:s::;',
' :G&B@@@@@@@@@@@@@@@MAXXXB@@@@@@@@@B31hi:,:;;',
' sGi.;3#@@@@@@@@@@@@@@@@@@@@@@@@@@@@#9rr;,,,i,',
' h1: ,S#@@@@@@@@@@@@@@@@@@@@@@@@@@@@Xhi. ,r',
' 13i,. :X@@@@@@@@@@@@@@@@@@@@@@@@@@MXh...,;r:',
' iXh;,.. 9@@@@@@@@@@@@@@@@@@@@@@@@@@MA9hr;:is:',
' ,X9r:,,.. 3@@@@@@@@@@@@@@@@@@@@@@@@@@@@G5s;;sh,',
' 9&5i;:,,. S@@@@@@@@@@@@@@@@@@@@@@@@@@@B9hsrsh1',
' sBG5i;::,..G@@@9&7&5&3&1:01,9&7&5&3&1:9,7&5&3&1',
' :8,5&3&1:7,11&9&7&5&3&1:6,9&7&5&3&1:5,7&5&3&1:4,',
' 3&1:3,51&31&11&9&7&5&3&1:2,31&11&9&7&5&3&1:1@421'
];
i = ''
d= 'split'
//将数组转换成字符串倒序之后再转化为数组
l=a.join('').replace(/\s+/g,'').split('').reverse().join('');
//获取位置的数据 美女右下角的数字反序(124)代表了要截取的长度 从@的位置开始截取
l=l.substr(l.indexOf('@')+1,parseInt(l)).split(/[,:]/);
/* 根据位置信息搜索出隐藏的字符
l是如下的数组 ["1", "1&3&5&7&9&11&13", "2", "1&3&5&7&9&11&13&15", "3", "1&3", "4", "1&3&5&7", "5", "1&3&5&7&9", "6", "1&3&5&7&9&11", "7", "1&3&5", "8", "1&3&5&7", "9", "1&3&5&7&9", "10", "1&3&5&7&9"]
通过观察发现 数组的奇数项代表a数组的某行,而偶数项代表对应行关键信息的下标。
通过下面的循环将隐藏信息逐字取出。并使用eval执行
*/
while( l.length > 0 )
{
b = 'shift'
t = l.shift(); //t是l数组的奇数项,代表目标字符在a数组的某一行
u = l.shift().split('&');
//
while(u.length>0){
e = u.shift(); //e 是l 数组的偶数项,代表目标字符在某行字符串的具体位置
i+= a[t].replace(/^\s+/g,'').charAt(+e);
}
}
eval(i)
}()
通过翻译后的代码可以看出eval(i)是美女代码的最终目标,美女的图案为i提供了一个数据池,而美女的后三行隐藏着找到i的方法。
好的,相信读者已经知道i的最终结果是 FP.egg&&FP.egg("%cjoin us%cshidu.mj@taobao.com");
原来"美女爱金蛋"!
关于如何从美女的源码图中找到'FP.egg&&FP.egg("%cjoin us%cshidu.mj@taobao.com")',如果读者有不清楚的地方欢迎讨论。关于FP.egg这行代码做了什么,由于天色已晚,待明日分解。
在阅读本文的同时,别忘了UED是通过这种形式在招聘和吸引前端人才,百度很多产品线也采用console的方式进行招聘。希望大家留意不要错过大好机会。