Обфускация JavaScript-кода: способы и отличия от минимизации

В большинстве случаев код JavaScript является общедоступным. Это означает, что исходный код всегда будет подвержен некоторым угрозам: 

• его могут скопировать и использовать без разрешения автора;
• код станет уязвимым для хакеров;
• другим программистам будет раскрыта функциональная логика и алгоритмы программы.

Именно для того, чтобы избежать подобных ситуаций, в JavaScript используется обфускация кода. 

Что такое обфускация в JavaScript?

Проще говоря, обфускация кода — это метод, используемый для преобразования простого, легкочитаемого кода в новую версию, которая становится тяжелой для понимания и обратного проектирования — как для людей, так и для машин.

К примеру, есть код: 

function hello(name) {
    console.log('Hello, ' + name);
}
hello('New user');

Теперь рассмотрим тот же код, запутанный онлайн-обфускатором JavaScript:

eval(function(p,a,c,k,e,d){e=function(c){returnc};if(!''.replace(/^/,String)){while(c--){d=k||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k)}}return p}('3 0(1){2.4(\'5, \'+1)}0(\'7 6\');',8,8,'hello|name|console|function|log|Hello|user|New'.split('|'),0,{}))

Не зная, как выглядит исходный код, тому, кто читает, будет сложнее определить, что подразумевал автор. При этом полученный код будет работать так же, как и исходный. 

Нужно ли обфусцировать код?

Основным условием использования обфускатора является то, что ваш исходный код в JavaScript должен стать недоступным для чтения. Когда же это может понадобиться? Приведем несколько реальных примеров, когда код обязательно должен быть запутан.

Когда вы продаете шаблон сайта

На рынке шаблонов веб-сайтов важно защитить вашу работу. К примеру, на Themeforest пользователям перед покупкой доступен предварительный просмотр шаблона. Это означает, что в своей работе вы будете использовать HTML, CSS и JS. Поэтому, если не обфусцируете код, каждый сможет загрузить ресурсы из предварительного просмотра вашего веб-сайта и работать с ними, не покупая шаблон.

Когда вы используете JavaScript в браузерных играх

Если вы разрабатываете видеоигры в браузере с использованием любого игрового движка JavaScript, то вам наверняка захочется защитить код от чтения другими программистами или кого-то, кто попытается нарушить правила в вашей игре. С помощью обфускатора код будет намного сложнее понять.

Способы минимизации и обфускации в JavaScript и онлайн-сервисы

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

Минимизация кода — это процесс сжатия исходного кода с целью экономии памяти за счет уменьшения количества символов и пробелов в коде.

Минимизированный код можно легко преобразовать обратно в исходную форму с помощью любого инструмента для улучшения кода.

В случае с обфускацией вам необходимо использовать тот же инструмент, который работал над исходным кодом. Этот процесс называется деобфускацией.

Давайте разберем это на примере:

function sum(num1,num2) {

  return num1 + num2;

}

sum(2,3);

После минимизации приведенный выше код будет выглядеть примерно так:

function sum(u,n){return u+n}sum(2,3);

Как видите, несмотря на то, что код преобразован и некоторые лишние символы удалены, его логика все еще понятна. А при обфускации код будет выглядеть примерно так, как показано ниже:

var _0x2e0d=['\x75\x42\x63\x53\x76'];(function(_0x138fb9,_0x2e0dfe){var _0x2c4a47=function(_0x35b774)

{while(--_0x35b774){_0x138fb9['push'](_0x138fb9['shift']());}};_0x2c4a47(++_0x2e0dfe);}(_0x2e0d,0xb6)

);var _0x2c4a=function(_0x138fb9,_0x2e0dfe){_0x138fb9=_0x138fb9-0x0;var _0x2c4a47=_0x2e0d[_0x138fb9];

return _0x2c4a47;};function _0x38c633(_0x156bdc,_0x188515){var _0x5db170={};_0x5db170[_0x2c4a('\x30\x

78\x30')]=function(_0x5055cf,_0x480ab2){return _0x5055cf+_0x480ab2;};var _0x58cfc2=_0x5db170;return _

0x58cfc2[_0x2c4a('\x30\x78\x30')](_0x156bdc,_0x188515);}_0x38c633(0x2,0x3);

Теперь, когда стало ясно, что представляет собой обфускация JS в более широком контексте, давайте немного подробнее рассмотрим, что конкретно она делает с исходным кодом.

Простая обфускация: инструменты

Самый популярный способ запутывания кода — использование инструментов минимизации и обфускации.

Среди популярных:

• JSmin — инструмент для минимизации, сжимает файл на 40-50%;
• YUI Compressor — минимизирует код;
• JS Packer (обфускатор);
• Closure Compiler (минимизатор).

Они превращают код:

unction createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

В следующий вид: 

eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('d c(){b 0=1.a(\'9\');0.8=\'7 6 5 4!\';1.3.2(0)}',14,14,'para|document|appendChild|body|button|the|clicked|You|textContent|p|createElement|var|createParagraph|function'.split('|'),0,{}))

Сложная обфускация: модули и плагины

Теперь давайте посмотрим на пример более сложной обфускации. Вы можете получить такой же результат с помощью модуля javascript-obfuscator, а также плагинов:

• webpack-obfuscator;
• gulp-javascript-obfuscator;
• grunt-contrib-obfuscator.

Например, у нас есть исходный код:

function hi() {
  console.log("Hello World!");
}
hi();

Мы получим следующий результат:

$=~[];$={___:++$,$$$$:(![]+"")[$],__$:++$,$_$_:(![]+"")[$],_$_:++$,$_$$:({}+"")[$],$$_$:($[$]+"")[$],_$$:++$,$$$_:(!""+"")[$],$__:++$,$_$:++$,$$__:({}+"")[$],$$_:++$,$$$:++$,$___:++$,$__$:++$};$.$_=($.$_=$+"")[$.$_$]+($._$=$.$_[$.__$])+($.$$=($.$+"")[$.__$])+((!$)+"")[$._$$]+($.__=$.$_[$.$$_])+($.$=(!""+"")[$.__$])+($._=(!""+"")[$._$_])+$.$_[$.$_$]+$.__+$._$+$.$;$.$$=$.$+(!""+"")[$._$$]+$.__+$._+$.$+$.$$;$.$=($.___)[$.$_][$.$_];$.$($.$($.$$+"\""+$.$$$$+$._+"\\"+$.__$+$.$_$+$.$$_+$.$$__+$.__+"\\"+$.__$+$.$_$+$.__$+$._$+"\\"+$.__$+$.$_$+$.$$_+"\\"+$.$__+$.___+"\\"+$.__$+$.$_$+$.___+"\\"+$.__$+$.$_$+$.__$+"()\\"+$.$__+$.___+"{\\"+$.$__+$.___+$.$$__+$._$+"\\"+$.__$+$.$_$+$.$$_+"\\"+$.__$+$.$$_+$._$$+$._$+(![]+"")[$._$_]+$.$$$_+"."+(![]+"")[$._$_]+$._$+"\\"+$.__$+$.$__+$.$$$+"(\\\"\\"+$.__$+$.__$+$.___+$.$$$_+(![]+"")[$._$_]+(![]+"")[$._$_]+$._$+"\\"+$.$__+$.___+"\\"+$.__$+$._$_+$.$$$+$._$+"\\"+$.__$+$.$$_+$._$_+(![]+"")[$._$_]+$.$$_$+"!\\\");\\"+$.$__+$.___+"}\\"+$.$__+$.___+"\\"+$.__$+$.$_$+$.___+"\\"+$.__$+$.$_$+$.__$+"();"+"\"")())();

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

Преобразовать код можно и онлайн, например, с помощью:

• aaencode demo;
Онлайн-курс "Предметний дизайн" від Skvot.
Навчіться створювати функціональні, трендові та ергономічні дизайни меблів та предметів інтер’єру.
Детальніше про програму курсу і лекторів
• jjencode demo.

Хотя обфускация защищает код, она также делает его медленнее из-за дополнительного фрагмента, который используется для запутывания пользователя. Всегда важно понимать, какие части кода важны и быть избирательным в применении обфускации. Такой подход поможет вам сохранить баланс между защитой кода и производительностью.