这种混淆的JavaScript如何工作？

以下JavaScript如何工作？

我了解这是缩小代码。我已经尝试对它进行模糊处理，但是我不清楚它是如何实现这种效果的。我可以看到它使用Strings进行某种形式的迭代，使用Date对象，奇怪的字符串操作，Math函数，然后代码会自行打印。

用一个最小的例子如何重写相同的效果？

eval(z='p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0>cos(o=\
new Date/1e3/*      .Q#########Md#.###OP  A@ , */+x/PI)&&(e[~\
~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
it(B = "\\\\")./*           G####B" #       */join(B+B).split\
(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//

JSFiddle

前言：我在http://jsfiddle.net/WZXYr/2/上广泛地美化了代码

考虑最外层：

eval(z = '...');

代码字符串存储在变量中z。赋值运算符返回分配的值，因此代码字符串也作为参数传递给eval。

代码字符串z在中运行eval。该代码即使在清理后也非常笨拙，但似乎：

1. 解析一串以36为底的数字，由字符描绘4。
2. 填充地图值，使用全局变量e，x以及y以保持地图的状态。映射状态部分是挂钟（new Date / 1e3）上当前秒的函数。
3. 使用映射值，代码生成输出字符串， p
   • 该代码用于p += " *#"[index]确定是使用空格，星号还是井号，而index实际上是在哪里e[x++] + e[x++]（如上所述，e并x负责地图状态）
   • 如果索引大于的长度" *#"，则存在备用代码，该备用代码会p使用中的字符填充输出z。内部角色填充有动画角色，而外部角色则是从提取的z。

在代码末尾，有一个对的调用setTimeout(z)，该调用异步评估代码字符串z。重复调用z允许代码循环。

简单的例子：

这是一个超级简单的版本（http://jsfiddle.net/5QXn8/）：

eval(z='p="<"+"pre>";for(i=0;i<172;++i)if(i > 62 && i < 67)p+="!---"[~~(new Date/1e2 + i)%4];else p += ("eval(z=\'" + z + "\')")[i];document.body.innerHTML = p;setTimeout(z)')

1. 的for循环增加了每个字符的输出字符串p（字符串是172个字符）：

   for(i=0;i<172;++i)

2. 内部条件决定我们是否处于位置62到67之间的角色，这些角色是动画角色：

   if(i > 62 && i < 67)

3. 如果是，则!---根据第二个壁钟值的十分之一打印输出，并进行移位。这提供了动画效果。

   p+="!---"[~~(new Date/1e2 + i)%4]

   （new Date实际上，所有麻烦之处都在于将日期值转换为0到3之间的数字。）

4. 否则，如果我们不在动画角色上，则打印i由定义的字符串中的索引字符

   "eval(z='" + z + "')"

   也就是说，z由eval('和包围的代码字符串')。

5. 最后，输出字符串并用于setTimeout排队另一个执行z：

   document.body.innerHTML = p;setTimeout(z)

请注意，我的最终输出不太正确-我还没有考虑到最后的反斜杠-但它仍然应该使您对这项技术的总体运作方式有一个很好的了解。

这是带注释的来源。附言：我是作者;）

function z(){                     // will be replaced with eval

  p = "<" + "pre>";               // use <pre> tag for formatted output

  for (                           // loop though lines
    y in n = (                    // y - the line number
      "zw24"      +               // n - the encoded data
      "l6k4"      +               // every line holds encoded data
      "e3t4"      +
      "jnt4"      +               // string will be concated in build process
      "qj24"      +
      "xh2  4"    +               // data after spaces will be ignored but
      "2kty24"    +               // … is used to not break block comments
      "wrt4"      +               // … which will save some chars
      "13n24"     +
      "3n9h24"    +
      "3pdxt4"    +
      "1csb   4"  +
      "3iyb6k4"   +
      "3pk724"    +
      "3nmr24"
    ).split(4)                    // data will be split by (unused) 4

  ){
    for (                         // loop throug every char in line
      a in t = parseInt(          // numbers are encoded as string
        n[y],                     // … with a base of 36
        36
      ) + (                       // large number will be converted to string
        e =                       // e - holds the rendered globe
        x =                       // x - horizonal position
        r = []                    // r - bitmap flag if pixel is set
      )
    ){
      r = !r;                     // toggle binary flag

      for (                       // look though bitmap states
        i = 0;                 
        t[a] > i;                 // draw pixel t[a]-times
        i += .05
      )
        with (Math)               // refer to Math later
          x -= .05,
          0 > cos(                // prevent backface visibility
            o =
              new Date / 1e3 +    // get rotation based on current time
              x / PI
          ) && (
            e[                    // access matrix
              ~~(                 // convert float to integer
                sin(o) *          // rotate around y axis
                sin(.5 + y/7) *
                32                // scale up the globe
              ) + 60              // move to center
            ] = -~r               // store bitmap state in render matrix
          )
    }

    for (                         // loop through columns
      x = 0;
      122 > x;                    // break after char 122
    ) p += "   *#"[               // add space, asterisk or hash
        e[x++] +                  // … based pixel opacity
        e[x++]
      ] || (S = (                 // otherwise use the original code
        "eval(z='" +              // inception of missing "eval" statement
          z
            .split(B = "\\")      // escape \ with \\
            .join(B + B)

            .split(Q = "'")       // escape ' with \'
            .join(B + Q) +

          Q +                     // add missing ')

          ")////////"             // add extra chars to fill mapping
        )[
          x / 2 +                 // get character at current position
          61 * y-1
        ]

      ).fontcolor(                // colorize outpu
        /\w/.test(S) &&           // test for [0-9A-Z]
        "#03B"                    // render blue
                                  // otherwise pink (default)
      );

    document.body.innerHTML =     // render output
      p +=                        // append new line
      B +                         // add backspace
      "\n";                       // add new line
  }

  setTimeout(z)                   // render animation on next frame
}
z()

这是另一个手动去混淆的版本，将所有初始化从表达式移到自己的语句中：

z='p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0>cos(o=\
new Date/1e3/*      .Q#########Md#.###OP  A@ , */+x/PI)&&(e[~\
~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
it(B = "\\\\")./*           G####B" #       */join(B+B).split\
(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)';

p = "<" + "pre>";
n = ["zw2", "l6k", "e3t", "jnt", "qj2", "xh2 x/* =<,m#F^    A W###q. */", "2kty2", "wrt", "13n2", "3n9h2", "3pdxt", "1csb yz/* #K       q##H######Am */", "3iyb6k", "3pk72", "3nmr2", ""]
for (y in n) {
    e = [];
    x = 0;
    r = true;
    t = parseInt(n[y], 36) + "";
    for (a in t) {
        r = !r
        for (i = 0; i < t[a]; i += 0.05) {
             x -= 0.05;
             o = new Date / 1e3 + x / Math.PI
             if (Math.cos(o) < 0)
                 e[~~(32 * Math.sin(o) * Math.sin(0.5 + y / 7)) + 60] = -~r;
        }
    for (x = 0; x < 122;) {
        S = "eval" + "(z='" + z.split(B = "\\").join(B + B).split(Q = "'").join(B + Q) + Q + ")//m1k"
        p += "   *#"[e[x++] + e[x++]] || S[x/2+61*y-1]).fontcolor(/\w/.test(S[x/2+61*y-1]) && "#03B");
    }
    p += B + "\n";
    document.body.innerHTML = p;
}
setTimeout(z)

这是发生了什么：

• z是包含所有代码的多行字符串。它是evaled。
• 在代码末尾，z传递给setTimeout。它就像requestAnimationFrame并且eval一起工作，以最高可能的速率在一个时间间隔内对其进行评估。
• 代码本身会初始化p，HTML将附加到其上的字符串缓冲区以及n以36为底的编码数字数组（由组成的字符串"4"，注释是不相关的垃圾，不会被视为parseInt）。
• 中的每个数字n都对一行（n.length == 16）进行编码。现在将其枚举。
• 初始化了一堆变量，一些变量伪装成e数组文字，但是在使用时将其强制转换为数字（x）或布尔值（r）或字符串（t）。
• t枚举数字中的每个数字，r每转一圈将布尔值取反。对于不同的角度x，并根据当前时间 new Date / 1000（以便生成动画），e使用一些按位运算符填充数组- 1当时的when r为false以及2s when r为true。
• 然后，循环会x=0以双步方式从61 到122 迭代图像的61列，并将单个字符附加到p。
• B作为反斜杠，该字符串S是z通过转义反斜杠和撇号从代码字符串构建的，以准确表示其在源代码中的外观。
• 来自的每两个连续数字e相加，并用于访问来自的字符" *#"，以建立动画图像。如果NaN未定义索引之一，则索引解析为未定义的字符，而是采用S字符串中的各个字符（请查看公式x/2+61*y-1）。如果该字符应该是单词字符，则使用fontcolorString方法对其进行不同的着色。
• 每行之后，将尾随退格和换行符添加到p，并且HTML字符串被分配给文档主体。

一个最小的例子如何重写相同的效果？

这是另一个示例：

setInterval(z='s=("setInterval(z=\'"+\
z.replace(/[\\\\\']/g,"\\\\$&")+"\')"\
).match(/.{1,37}/g).join("\\\\\\n");d\
ocument.body.innerHTML=\"<\\pre>"+s.s\
lice(0, 175)+String( + new Date()).fo\
ntcolor("red")+s.slice(188)')

（jsfiddle.net上的演示）

它具有这种动画所需的所有相关内容：

• setInterval并Date为动画

• 在这里重建自己的代码（类似于quine）：

  s = ( "setInterval(z='" // the outer invokation
        + z.replace(/[\\\']/g,"\\$&") // the escaped version
      + "\')" ) // the end of the assignment
      .match(/.{1,37}/g).join("\\\n"); // chunked into lines

• 通过document.body.innerHTML和<pre>元素输出

• 用动画字符串替换代码的某些部分

一个包含所有代码的字符串将被求值，并且超时将导致循环；该字符串存储在一个名为的变量中，z并位于代码的中间，在注释之间，/*并且*/有一个“ Earth ASCII Art”。该代码解析注释并更改文档内容，保留js并更新技术。波纹管只是切成薄片的代码：

  p="<pre>";
  for(y in n="zw24l6k4e3t4jnt4qj24xh2 x42kty24wrt413n243n9h243pdxt41csb yz43iyb6k43pk7243nmr24".split(4)){ 
    for(a in t = parseInt(n[y],36)+(e=x=r=[]))
      for(r=!r,i=0;t[a]>i;i+=.05)
        with(Math) x-= .05,0>cos(o=new Date/1e3+x/PI)&&(e[~~(32*sin(o)*sin(.5+y/7))+60] =-~ r);
          for(x=0;122>x;) p += "   *#"[e[x++]+e[x++\]] ||
              (S=("eval"+"(z=\'"+z.split(B = "\\\\").join(B+B).split(Q="\'").join(B+Q)+Q+")//m1k")[x/2+61*y-1]).fontcolor(/\\w/.test(S)&&"#\03B");
    p += B+"\\n"
    document.body.innerHTML= p
  }