Как работает этот запутанный JavaScript?

Как работает следующий JavaScript?

Я понимаю, что это минимизированный код. Я попытался немного обфусцировать его, но не могу понять, как он достигает этого эффекта. Я вижу, что он использует Strings для какой-то итерации, использования объекта Date, странного манипулирования строками, математических функций, затем код печатает сам.

Как можно переписать тот же эффект на минимальном примере?

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  [email protected] , */+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

93 голоса | спросил Alexander 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 16 Sep 2013 21:54:54 +0400 2013, 21:54:54

4 ответа


0

Предисловие . Я подробно описал код на странице http://jsfiddle.net/WZXYr/2 /

Рассмотрим самый внешний слой:

eval(z = '...');

Строка кода хранится в переменной z. Оператор присваивания возвращает присвоенное значение, поэтому строка кода также передается в качестве аргумента в eval.

Строка кода z выполняется внутри eval

  1. Разобрать строку из числа base-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)
    

Обратите внимание, что мой окончательный вывод не является совершенно правильным - я не учел обратную косую черту ближе к концу - но он все равно должен дать вам довольно хорошее представление о том, как работает техника как правило,.

ответил apsillers 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 16 Sep 2013 23:18:44 +0400 2013, 23:18:44
0

Вот аннотированный источник. Пс: я автор;)

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()
ответил aemkei 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 23 Sep 2013 20:34:24 +0400 2013, 20:34:24
0

Вот еще одна версия, лишённая ручного объяснения, которая переносит всю инициализацию из выражения в собственные операторы:

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  [email protected] , */+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 - многострочная строка, содержащая весь код. Это eval редактор
  • В конце кода z передается в setTimeout . Он работает как requestAnimationFrame и eval вместе, оценивая его в интервале с максимально возможной скоростью.
  • Сам код инициализирует p, строковый буфер, к которому будет добавлен HTML, и n, массив чисел в кодировке base-36 (объединенный в строку с помощью "4", комментарии являются ненужным мусором, который не рассматривается parseInt ) литий>
  • каждое число в n кодирует одну строку (n.length == 16). Теперь он перечислен .
  • Инициализируется группа переменных, некоторые маскируются под литерал массива e, но затем они приводятся к числам (x) или логические (r) или строки (t) при использовании.
  • Каждая цифра в номере t нумеруется, инвертируя логическое значение r каждый ход. Для разных углов x и в зависимости от текущее время new Date / 1000 (чтобы оно анимация), массив e заполняется с использованием некоторого побитовые операторы - с 1 когда r равно false и 2 s когда r является истинным в то время.
  • Затем цикл выполняет итерацию 61 столбца изображения, начиная с x=0 и заканчивая 122, добавляя одиночные символы в p литий>
  • B, являющийся обратной косой чертой, строка S создается из строки кода z путем экранирования обратной косой черты и апострофов, чтобы получить точное представление о том, что выглядело в исходном коде.
  • Каждые два последовательных числа из e добавляются и используются для доступа к символу из " *#", чтобы создать анимированное изображение. Если один из индексов не определен, индекс NaN преобразуется в неопределенный символ и вместо соответствующего символа из S взята строка (см. Формулу x/2+61*y-1). Если этот символ должен быть символом слова , он будет по-разному окрашен с помощью fontcolor Строковый метод .
  • После каждой строки конечный пробел и перевод строки добавляются в 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> element

  • Замена некоторых частей кода анимированной строкой
ответил Bergi 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 17 Sep 2013 00:12:01 +0400 2013, 00:12:01
0

Строка со всем кодом оценивается, и тайм-аут делает цикл; Строка хранится в переменной с именем z и в середине кода между комментариями /* и */ существует «Искусство ASCII Земли». Код анализирует комментарии и изменяет содержимое документа, сохраняя 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
  }
ответил rafaelcastrocouto 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 16 Sep 2013 22:23:08 +0400 2013, 22:23:08

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132