Прячем JavaScript-код на фронтенде от посторонних

Как защитить ваш уникальный код от копирования с помощью веб-сокетов, крипторов, обфускации и других методов? Разбираемся, как защитить код на JavaScript.

Рассказывает веб-разработчик Денис Лисогорский

Давайте представим ситуацию, когда вы и ваша команда пишете интересный и сложный код на JavaScript. Причём этот код в кратчайшие сроки нужно использовать в проекте. Если его функциональность действительно уникальна, то в процессе разработки и у вас, и у членов команды вполне резонно возникнет вопрос: «Как защитить код от копирования?».

Как защитить код: веб-сокеты, крипторы и обфускация

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

Итак, есть несколько вариантов защиты кода:

Использовать веб-сокеты.
Использовать крипторы.
Сделать обфускацию кода.

Крипторы приводят код в нечитаемый вид, используя, как правило, base64 (что неизбежно приводит к увеличению объёма кода примерно на 30%). Затем к полученному результату прибавляется так называемая «соль» — набор символов, который при разборе кода функцией-дешифровщиком используется в качестве ключа. Ну а потом вся строка кода обычно выполняется через eval(). Проблема крипторов в том, что если понять принцип их работы, отсечь «соль» и декодировать, то сразу становится доступен весь код в его исходном виде.

Обфускаторы же изменяют сам код, вставляя между операторами нечитаемые символы, меняя имена переменных и функций на набор визуально непонятных символов. При этом объём кода также сильно увеличивается из-за вставки дополнительного псевдокода, а также замены символов на hex, когда любые символы переводятся в их hex-значения (например, латинская буква ‘e’ может быть записана как ‘\x65’, причём это прекрасно интерпретируется любым браузером). Можете посмотреть, как работает перевод в hex через любой сервис Text To Hex, например на Crypt Online.

Применение обфускаторов сильно усложняет дальнейшую отладку кода, поскольку это необратимый процесс. К тому же в некоторых случаях они могут повлиять на функциональность кода. Попробовать обфускаторы можно на любом сервисе обфускации, к примеру этом или этом. Также в Сети можно найти платные крипторы-обфускаторы, в настройках которых вы сможете указывать степень защиты, время жизни скрипта и прочее, при этом скрипт будет намертво привязан к вашему домену, т.е. для дешифровки будет использоваться уникальное для вашего хоста значение. Стоимость таких крипторов начинается от 45 $. Кроме этого, перед обфускацией вы можете предварительно минимизировать код, заменив все имена переменных и функций на их односимвольные синонимы. Отличный и очень популярный инструмент на Node.js — UglifyJS, который работает как в автоматическом режиме (скажем, через Gulp), так и в режиме командной строки.

Также есть всем известный Closure Compiler от Google, который кроме минимизации анализирует JavaScript-код, удаляет мёртвый код, переписывает и сводит к минимуму то, что осталось. Он также проверяет синтаксис, ссылки на переменные и типы и предупреждает об общих ошибках JavaScript. Имеет хорошо документированный API.

Кроме предложенных методов можно сделать следующее:

использовать WebStorage и скрывать там JavaScript код;
прятать часть кода в отдельном файле на сервере и вызывать его через XMLHttpRequest;
использовать побитовые операторы для замены чисел на наборы скобок и знака ~;
делать субституцию стандартных функций и методов JavaScript.

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

Зашифровка кода на примере JavaScript-калькулятора

Не так давно я разработал JavaScript-калькулятор для расчёта стоимости услуг, с большим количеством взаимосвязанных параметров. Руководство поставило задачу защитить данный скрипт от копирования, чтобы конкуренты не смогли использовать его на своих сайтах. Искал различные решения, ничего подходящего не нашёл, поэтому начал писать собственное. Представляю его ниже.

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

По итогам работ в браузере вы увидите нечто такое:

			<script>glob('KKGZ1bmN0aW9uKCQpIHsNCgkkKGRvY3VtZW50KS5yZWFkeSggZnVuY3Rpb24gKCkgew0KDQoJCWlmKCAkKCdk
aXYnKS5pcygnLmNhbGMnKSApIHsNCg0KCQkJJCgnLmNhbGMgPiAucm93JykuZWFjaChmdW5jdGlvbihpKSB7DQoJCQkJJCh0aGl
zKS5hdHRyKCdkYXRhLXN0ZXAnLCBpKzEpOw0KCQkJfSk7DQoNCgkJCSQoJy5jYWxjID4gW2Rhdgetc3RlcD0iMSJdJykuYWRkQ2xh
c3MoJ2FjdGl2ZScpOw0KDQoJCQkkKCdhW2hyZWY9Ii9zdG9pbW9zdC8iXScpLmNsaWNrKGZ1bmN0aW9uKGUpIHsNCgkJCQllLn
ByZXZlbnREZWZhdWx0KCk7DQoJCQkJJCgnLmNhbGMnKS5mYWRlVG9nZ2xlKCk7DQoJCQkJeWFDb3VudGVyMTM4ODc0NTcuc
mVhY2hHb2FsKCdjYWxjX29wZW4nKTsNCgkJCX0pOw0KDQoJCQlpZiAoICQodzZW5kJyk7DQoJCQkJCQl5YUNvdW50ZXIxMzg4N
zQ1Ny5yZWFjaEdvYWwoJ2NhbGNfc2VuZCcpOw0KCQkJCQl9DQoJCQkJfSk7DQoJCQkJc2V0VGltZW91dChmdW5jdGlvbigpIHsN
CgkJCQkJJCgnLmNhbGMnKS5mYWRlT3V0KDc3Nyk7DQoJCQkJCSQoJ2EuYnV0dG9uc0ZvckRvY3MnKS5jc3MoJ21hcmdpbi10b3A
nLCAnMTVweCcpOw0KCQkJCX0sNzAwMCk7DQoJCQl9KTsNCg0KCQkJJCgnI3RoYW5rc0J1dHRvbicpLm9uKCdjbGljaycsIGZ1bmN
0aW9uKCkgew0KCQkJCSQoJy5jYWxjJykuZmFkZU91dCgxMDApOw0KCQkJCSQoJ2EuYnV0dG9uc0ZvckRvY3MnKS5jc3MoJ21hcm
dpbi10b3AnLCAnMTVweCcpOw0KCQkJCWNhbGNSZWJvb3QoKTsNCgkJCX0pOw0KDQoJCQkkKCcuY2FsYyAuY2xvc2UnKS5vbig
nY2xpY2snLCBmdW5jdGlvbigpIHsNCgkJCQkkKCcuY2FsYycpLnJlbW92ZSgpOw0KCQkJCSQoJ2EuYnV0dG9uc0ZvckRvY3MnKS5jc3
MoJ21hcmdpbi10b3AnLCAnMTVweCcpOw0KCQkJfSk7DQoNCgkJfTsNCg0KCX0pOw0KfSkoalF1ZXJ5KTs=')</script>

При этом все зашифрованные скрипты будут работать корректно. Опытный взгляд программиста сразу визуально определит кодирование через base64. Но при попытке расшифровать строку любым base64 декодером, будет ошибка. Если вставить скрипт в alert (такой метод также рекомендуют на форумах для дешифровки кода), то результат также будет нулевым.

При этом никто ведь не знает, что здесь зашифрован именно скрипт. Это может оказаться какой-то параметр, текст или изображение. Через base64 можно зашифровать всё что угодно.

Поищем в коде функцию glob(), которой передаётся шифрованная строка. Вот она: glob=function(s){sfd(rty(s.substring(-~[])));

Видим ещё несколько функций sfd() и rty(). Ищем эти функции. Вот они:

			sfd=this["\x65\x76\x61\x6C"];rty=this["\x61\x74\x6F\x62"];

На этом месте многие закончат попытки расшифровки и оставят ваш сайт в покое.

Рассмотрим алгоритм подробнее.

Как защитить JavaScript от копирования на своём сайте

Первым делом указываем в футере сайта путь на скрипт и тут же кодируем его:

			<?$filebase64='K'.base64_encode(file_get_contents('<путь к файлу скрипта>'));?>

В строке выше мы говорим интерпретатору PHP взять файл script.js, далее закодировать его через base64, прибавить строку ‘K’ и всё это записать в переменную $filebase64.

Добавление строки ‘K’ (это может быть любая латинская буква или комбинация букв или цифр) защищает нас от того, что желающий скопировать ваш скрипт расшифрует его с помощью alert() или онлайн-дешифратора. Ведь с дополнительными символами скрипт не будет работоспособен.

Затем где-то дальше в коде вызываем скрипт:

			<script>glob('<?=$filebase64?>')</script>

Пусть этот скрипт вызывается отдельно, подальше от других скриптов и ссылок на скрипты.

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

			sfd=this["\x65\x76\x61\x6C"];rty=this["\x61\x74\x6F\x62"];glob=function(s){sfd(rty(s.substring(-~[])));}

Разбираем подробно что здесь происходит.

Наша основная функция glob() принимает один параметр s. Он сразу передаётся функции substring() с параметром -~[] (это равно 1 в зашифрованном виде), которая извлекает из s строку начиная с первого символа и до конца. Следовательно, если мы в PHP-коде в качестве строки прибавляли более одного символа, скажем три, то нам нужно будет в функции substring() указать 2+(-~[]). Либо путём шифрования цифр через побитовые операторы мы можем создать запутанную формулу, часть переменных которой мы можем прятать в cookies или sessionStorage, что сделает крайне затруднительным понимание того, какое количество символов необходимо отбросить для дешифровки кода.

Пример замены цифр через побитовый оператор ~:

-1 можно заменить на ~[]
1 можно заменить на -~[]
0 можно заменить на ~~[]

Далее полученный результат принимает функция rty(). Эта функция представляет собой набор символов, в частности: this["\x61\x74\x6F\x62"];

Попробуйте ввести это в консоли браузера и вы увидите, что на самом деле делает эта функция. Например, вы увидите:

ƒ atob() { [native code] }

Т.е. набор символов — это зашифрованная функция atob(), которая, согласно описанию на MDN, декодирует строку, закодированную с использованием base64.

Результат декодирования получает функция sfd(). Она также представляет собой набор символов: this["\x65\x76\x61\x6C"];.

Вы уже догадались, что нужно сделать? ? Выполните в консоли браузера и вы увидите:

ƒ eval() { [native code] }

Здесь, думаю, уже объяснять ничего не надо. Все мы знаем, что функция eval() выполняет скрипт, полученный из строки. «Плохая практика», как сказали бы многие, для обычного кода, но в нашем случае это безопасная и нужная функция для реализации нашей идеи. К тому же напрямую к этой функции пользователь не сможет получить доступ.

Наверное, вы задались вопросом, а каким же образом функции зашифрованы в наборе символов? Очень просто: набор символов — это текст, преобразованный в шестнадцатеричную систему счисления. Т.е. это текст в формате hex (hexadecimal), в котором можно зашифровать любые символы.

Таким образом, наша расшифрованная функция выглядит так (специально разбил по строчкам, чтобы было наглядно):

			glob = function(s) {
  eval(
      atob(
        s.substring(1)
      )
  );
}

В итоге отбрасываем первый символ шифрованной строки (при этом символов может быть хоть 353, и об этом никто не сможет быстро догадаться), потом дешифруем, потом выполняем через eval().

Вы можете пойти и дальше. Если каким-то образом кто-то всё же расшифрует ваш скрипт, немного усложните его, чтобы людям было сложнее модифицировать его. Например, можно поговорить о побитовом операторе ^, c помощью которого можно творить чудеса. Например, a^b^b будет равно a. В качестве b может быть использован ключ, который мы зашифруем где-то выше…

Всё будет работать как и раньше, но собьёт с толку нехороших копипастеров.

За материал благодарим нашего подписчика Дениса Лисогорского