この難読化されたJavaScriptはどのように機能しますか？

次のJavaScriptはどのように機能しますか？

縮小コードであることを理解しています。私は少し難読化を解除しようとしましたが、それがこの効果をどのように達成するかについての明確な概念を得ることができません。ある種の反復、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  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. もしそうなら、プリントアウトし!---、2番目のウォールクロック値の10分の1に基づいてシフトします。これはアニメーション効果を提供します。

   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)

私の最終的な出力は完全に正しくないことに注意してください-終わりに向かってバックスラッシュを考慮していません-しかし、それでもテクニックが一般的にどのように機能するかについてかなり良い考えが得られるはずです。

これが注釈付きソースです。PS：私は作者です;）

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すべてのコードを含む複数行の文字列です。それはあるeval編。
• コードの最後で、にz渡されsetTimeoutます。これは、同じように動作requestAnimationFrameし、eval可能な限り最高のレートで間隔でそれを評価し、一緒に。
• コード自体pは、HTMLが追加される文字列バッファ、およびnbase-36でエンコードされた数値の配列（によって文字列に結合され"4"、コメントはによって考慮されない不要なガベージ）を初期化しますparseInt。
• の各数値はn1行をエンコードします（n.length == 16）。現在列挙されています。
• e一連の変数が初期化され、一部は配列リテラルに偽装されますが、使用時に数値（x）またはブール値（r）または文字列（t）にキャストされます。
• 数値の各桁tが列挙され、ブールをr毎ターン反転させます。異なる角度のためx、及びに応じ現在の時間 new Date / 1000（それはアニメーションを与えるように）、アレイは、eいくつかの使用して充填されるビット単位の演算子を -と1するときr偽であり、2場合sはrその時点で真です。
• 次に、ループは画像の61列を繰り返し、x=0122から122までの二重ステップで、1文字をに追加しpます。
• Bバックスラッシュである文字列Sは、zバックスラッシュとアポストロフィをエスケープすることによってコード文字列から構築され、ソース内での文字列の正確な表現を取得します。
• から2つ連続する番号eが追加され" *#"、からの文字へのアクセスに使用され、アニメーション画像が作成されます。インデックスの1つが定義されていない場合、インデックスは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、コードの途中で、コメントの間/*及び*/「地球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
  }