как зашифровать javascript код
Создание приложения для шифрования файлов с помощью JavaScript
Безопасность и конфиденциальность — это одни из самых актуальных тем на сегодняшний день. Это заставляет нас еще раз пересмотреть подходы к безопасности. И, как всегда, все зависит от оптимального баланса — удобства и факторов риска. Сегодня мы попытаемся найти формулу их оптимального соотношения.
Приложение, которое мы собираемся сегодня создать — это эксперимент. Оно позволит пользователям выбирать на своих компьютерах файлы и шифровать их на стороне клиента с использованием кода доступа.
Обратите внимание, что приложение будет шифровать не сам файл, а его копию, так что оригинал в любом случае у вас сохранится.
Но прежде чем мы начнем, вот несколько проблем и ограничений, с которыми нам придется столкнуться:
Проблемы и ограничения
Лимит в 1 Мб
При загрузке больших файлов текущая вкладка в браузере Google Chrome просто зависает, при использовании Firefox вылетает весь процесс браузера.
Способом решить эту проблему могло бы стать использование File System API и запись в нем двоичных данных, но на данный момент это приложение поддерживается только в Google Chrome.
Причем, на скорости шифрования файла размер не сказывается, это проблема только для возможности скачивания файлов.
Как насчет HTTPS?
Так как кроме стартовой загрузки HTML и активных элементов, данные между вами и сервером не передаются — все делается на стороне клиента с помощью JavaScript. Если это все же беспокоит вас, вы можете просто скачать демо-версию и запустить ее прямо на вашем компьютере.
Насколько это безопасно?
Библиотека, которую я использую — CryptoJS — это программное обеспечение с открытым исходным кодом, так что я считаю, что она заслуживает доверия.
Я использовал алгоритм AES из коллекции, которая, насколько мне известно, безопасна. Для большей безопасности используйте длинные пароли, которые трудно подобрать:
JavaScript File Encryption App
Разметка приложения состоит из обычного документа HTML5 и нескольких блоков, которые разделяют приложение на несколько отдельных экранов. Вы увидите, как они взаимодействуют в разделах JavaScript и CSS данной статьи.
Во время работы приложения только один из блоков выполнения виден на экране. В зависимости от выбора пользователя — шифрование или расшифровка — для элемента тела устанавливается имя класса.
Выбор файла для шифрования
Код JavaScript
Объект FileReader позволяет нам читать содержимое локальных файлов с помощью JavaScript, но только тех файлов, которые были выбраны пользователем непосредственно через диалоговое окно, предлагающее выбрать файл.
Как это делается, вы можете понять при рассмотрении ниже приведенного кода. Обратите внимание, что большая часть кода обрабатывает переходы между различными экранами приложения, а само считывание файла происходит, начиная со строки 85:
Я использую алгоритм AES для шифрования URI-данных с выбранным паролем, и предлагаю его для скачивания. Во время расшифровки происходит обратная процедура.
При этом никакие данные на сервер на самом деле не пересылаются. Если на то пошло, вам даже не нужен сервер, вы можете просто открыть HTML-файл непосредственно из папки на вашем компьютере, и использовать его как есть.
Ввод пароля
Первое, о чем я хочу рассказать — это стили, которые создают макет и обеспечивают возможность плавного перехода между экранами путем изменения свойства top элемента #stage :
Поскольку для блоков шагов задаются размеры в 100% по ширине и высоте, они автоматически занимают полный размер окна браузера без необходимости дополнительных преобразований.
Еще одним интересным фрагментом кода являются условные классы, которые значительно упрощают наш JavaScript:
Мы закончили!
На этом наше JavaScript-приложение для шифрования данных готово! Вы можете использовать его, чтобы поделиться фотографиями и документами с друзьями, отправив им зашифрованную версию файла с предварительно оговоренной кодовой фразой.
Шифр Вернама на JavaScript
Невзламываемый шифр за 4 строчки кода.
Вчера мы показали вам невзламываемый шифр Вернама. Теперь напишем собственную реализацию этого шифра на JavaScript.
Принцип работы шифра Вернама
Алгоритм
Сделаем классическую реализацию шифра Вернама:
Единственное отличие нашего алгоритма от классического — принудительная проверка длины ключа. Чтобы шифр нельзя было взломать, ключ должен быть как минимум той же длины, что и исходное сообщение.
Подготовка
Заведём нужные переменные:
Ещё нам понадобится функция, которая возвращает случайное число в указанном диапазоне. Её мы будем использовать для создания нового ключа, если ключ пользователя будет слишком короткий.
Последнее, что нам осталось сделать, — запросить у пользователя сообщение, которое будем шифровать, и ключ:
Проверяем ключ
Теперь, когда у нас есть сообщение и ключ, проверим, хватит ли длины ключа или нет. Если не хватит — выведем сообщение и сгенерируем новый ключ.
👉 Обратите внимание на второй параметр в функции, которая возвращает случайное значение. В нашем примере мы взяли число 66535, потому что в первом регистре кодировки Unicode 66536 символов — от 0 до 66535, а JavaScript возвращает коды символов строки как раз в Unicode. Попробуйте поставить число поменьше, например 9999, и посмотрите, как меняются символы в ключе и в готовой шифровке.
Само генерирование ключа очень простое: мы берём случайное число, переводим его в строку функцией String.fromCharCode() и добавляем результат к строке с ключом.
Шифруем сообщение
В основе алгоритма Вернама лежит XOR — исключающее ИЛИ. Его особенность в том, что если его применить к зашифрованному тексту снова с тем же ключом, то мы получим расшифрованное исходное сообщение. Это значит, что этим алгоритмом мы можем и шифровать, и расшифровывать.
Логика работы алгоритма такая:
Если хотите проверить, как работает алгоритм, расшифруйте это сообщение
Это может показаться удивительным, но в нашем примере длина ключа и сообщения совпадают. Это связано с особенностью кодировки Unicode — один код может одновременно кодировать несколько визуальных символов, поэтому длина кажется разной.
Что дальше
В нашей реализации шифра есть несколько минусов:
Когда-нибудь мы соберёмся с силами и исправим все три пункта.
Прячем JavaScript-код на фронтенде от посторонних
Рассказывает веб-разработчик Денис Лисогорский
Давайте представим ситуацию, когда вы и ваша команда пишете интересный и сложный код на JavaScript. Причём этот код в кратчайшие сроки нужно использовать в проекте. Если его функциональность действительно уникальна, то в процессе разработки и у вас, и у членов команды вполне резонно возникнет вопрос: «Как защитить код от копирования?».
Как защитить код: веб-сокеты, крипторы и обфускация
Разумеется, все мы прекрасно понимаем, что JavaScript выполняется на стороне браузера. И любой зашифрованный код всегда можно расшифровать, если знать принципы работы браузера. Поэтому можно попробовать лишь затруднить понимание данного кода, а это, в свою очередь, очень сильно помешает злоумышленнику модифицировать его под свои нужды.
Итак, есть несколько вариантов защиты кода:
Крипторы приводят код в нечитаемый вид, используя, как правило, base64 (что неизбежно приводит к увеличению объёма кода примерно на 30%). Затем к полученному результату прибавляется так называемая «соль» — набор символов, который при разборе кода функцией-дешифровщиком используется в качестве ключа. Ну а потом вся строка кода обычно выполняется через eval(). Проблема крипторов в том, что если понять принцип их работы, отсечь «соль» и декодировать, то сразу становится доступен весь код в его исходном виде.
Обфускаторы же изменяют сам код, вставляя между операторами нечитаемые символы, меняя имена переменных и функций на набор визуально непонятных символов. При этом объём кода также сильно увеличивается из-за вставки дополнительного псевдокода, а также замены символов на hex, когда любые символы переводятся в их hex-значения (например, латинская буква ‘e’ может быть записана как ‘\x65’, причём это прекрасно интерпретируется любым браузером). Можете посмотреть, как работает перевод в hex через любой сервис Text To Hex, например на Crypt Online.
1 октября в 10:00, Москва, Беcплатно
Также есть всем известный Closure Compiler от Google, который кроме минимизации анализирует JavaScript-код, удаляет мёртвый код, переписывает и сводит к минимуму то, что осталось. Он также проверяет синтаксис, ссылки на переменные и типы и предупреждает об общих ошибках JavaScript. Имеет хорошо документированный API.
Кроме предложенных методов можно сделать следующее:
Всё это, разумеется, не станет стопроцентной защитой. Тем не менее чем сложнее процесс дешифровки, тем больше шансов, что после множества неудачных попыток любители копировать чужой код оставят ваш сайт в покое.
Зашифровка кода на примере JavaScript-калькулятора
Не так давно я разработал JavaScript-калькулятор для расчёта стоимости услуг, с большим количеством взаимосвязанных параметров. Руководство поставило задачу защитить данный скрипт от копирования, чтобы конкуренты не смогли использовать его на своих сайтах. Искал различные решения, ничего подходящего не нашёл, поэтому начал писать собственное. Представляю его ниже.
Обращаю ваше внимание на то, что любой код можно расшифровать, просто для этого нужно время. Поэтому данное решение, разумеется, не идеально. Тем не менее, чтобы его раскрыть, требуется время, внимательность и усидчивость. И это может оттолкнуть ваших конкурентов от идеи скопировать ваш скрипт. Большинство из них после нескольких неудачных попыток просто будут искать аналог похожего скрипта на других ресурсах.
По итогам работ в браузере вы увидите нечто такое:
При этом все зашифрованные скрипты будут работать корректно. Опытный взгляд программиста сразу визуально определит кодирование через base64. Но при попытке расшифровать строку любым base64 декодером, будет ошибка. Если вставить скрипт в alert (такой метод также рекомендуют на форумах для дешифровки кода), то результат также будет нулевым.
При этом никто ведь не знает, что здесь зашифрован именно скрипт. Это может оказаться какой-то параметр, текст или изображение. Через base64 можно зашифровать всё что угодно.
На этом месте многие закончат попытки расшифровки и оставят ваш сайт в покое.
Рассмотрим алгоритм подробнее.
Как защитить JavaScript от копирования на своём сайте
Первым делом указываем в футере сайта путь на скрипт и тут же кодируем его:
Добавление строки ‘K’ (это может быть любая латинская буква или комбинация букв или цифр) защищает нас от того, что желающий скопировать ваш скрипт расшифрует его с помощью alert() или онлайн-дешифратора. Ведь с дополнительными символами скрипт не будет работоспособен.
Затем где-то дальше в коде вызываем скрипт:
Пусть этот скрипт вызывается отдельно, подальше от других скриптов и ссылок на скрипты.
Далее где-то в файле с общими скриптами сайта, отдельно от других скриптов, вставляем вызов функций дешифровки. Вставлять можно независимо от других функций и библиотек.
Разбираем подробно что здесь происходит.
[] (это равно 1 в зашифрованном виде), которая извлекает из s строку начиная с первого символа и до конца. Следовательно, если мы в PHP-коде в качестве строки прибавляли более одного символа, скажем три, то нам нужно будет в функции substring() указать 2+(-
Пример замены цифр через побитовый оператор
Попробуйте ввести это в консоли браузера и вы увидите, что на самом деле делает эта функция. Например, вы увидите:
Вы уже догадались, что нужно сделать? 🙂 Выполните в консоли браузера и вы увидите:
Здесь, думаю, уже объяснять ничего не надо. Все мы знаем, что функция eval() выполняет скрипт, полученный из строки. «Плохая практика», как сказали бы многие, для обычного кода, но в нашем случае это безопасная и нужная функция для реализации нашей идеи. К тому же напрямую к этой функции пользователь не сможет получить доступ.
Наверное, вы задались вопросом, а каким же образом функции зашифрованы в наборе символов? Очень просто: набор символов — это текст, преобразованный в шестнадцатеричную систему счисления. Т.е. это текст в формате hex (hexadecimal), в котором можно зашифровать любые символы.
Таким образом, наша расшифрованная функция выглядит так (специально разбил по строчкам, чтобы было наглядно):
Всё будет работать как и раньше, но собьёт с толку нехороших копипастеров.
За материал благодарим нашего подписчика Дениса Лисогорского
Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.
Перейти к регистрации
Прячем, обфусцируем и криптуем клиентскую часть веб-приложений
Обфусцированный скрипт
Теория
Работа JJEncode
Базовое шифрование HTML/CSS
Что делать, если нам нужно зашифровать HTML или CSS код? Все просто: зашифровать на JavaScript, а после расшифровки вставить как HTML код.
Пример вставки (без шифровки/крипта/обфускации):
Точно так же мы поступим и с CSS-стилями:
Теперь постараемся абстрагироваться от HTML и CSS и поговорить только о самой сути — сначала скрытии, а затем и криптовке JavaScript.
Прежде, чем кто-либо захочет посмотреть и расшифровать наш код, он постарается его найти. Ниже ты найдешь несколько действенных методов сокрытия кода от глаз любопытных пользователей.
Прячем слово «][akep» в теле документа
Замена атрибутов тега
А теперь просто создадим папку «text», в которую положим наш скрипт («script.js») под именем «javascript» и поменяем атрибуты местами. Это будет выглядеть так:
Для лучшего эффекта сразу отвлечем внимание пользователя на путь. Например, так:
Проверено на личном опыте: работает отлично! Таким способом я сам накручивал партнерку по кликам, так как пришлось использовать накрутчик на JavaScript. Администрация партнерки его так и не увидела :).
JavaScript-обработчики
Данный способ также не является универсальным средством для сокрытия JS-кода, но все же я расскажу о нем. Главная идея состоит в том, чтобы прятать код внутрь обработчиков событий onLoad, onClick и т.д. То есть примерно в следующие конструкции:
Например, для тегов body и frameset есть обработчик onLoad, который запустит в нем прописанный код после загрузки страницы/фрейма.
Отмечу, что не для всех объектов обработчики одинаковы.
Cookie, Referrer и адрес
JavaScript можно также спрятать и в такие нестандартные места, как cookie (document.cookie), реферрер (document.referrer) и адрес страницы (location.href). В данном случае код будет храниться как обычный текст, а выполняться с помощью функции eval(), которая берет в качестве аргумента текст и выполняет его как JavaScript-код.
В качестве примера примем такое допущение, что у нас уже установлены кукисы следующего вида:
Теперь выполним этот алерт следующим образом:
Здесь мы берем текст всех cookie-записей для нашего хоста и делим его на части в местах, где стоит «||». Затем берем второй элемент ([1]) и запускаем его через eval().
Данный способ не так уж и плох, так как код, который мы хотим исполнить, не виден на самой странице, а также потому, что мы можем заставить код удалить самого себя! Пример реализации:
Аналогичным образом можно использовать и другие строки, доступные через JavaScript, например, location.href и document.referrer.
Сокрытие кода на Ajax
Нуллбайт атакует Оперу
Этот метод прост и достаточно эффективен, но, к сожалению, он рассчитан только на браузер Opera. Суть метода в том, чтобы перед скрываемым кодом поставить так называемый нуллбайт (нуллбайт или nullbyte — это символ с ASCII кодом «0»). Зачем? Затем, что Opera просто-напросто не показывает код во встроенном просмотрщике после данного символа. Пример:
В данном примере сначала идет нормальный код, который нам скрывать не требуется. Потом с помощью PHP мы вставляем нуллбайт, а после него идет скрываемый код.
Прячемся в HTML-коде и комментариях
Код можно легко спрятать в HTML, затем обработать его и выполнить. Например, вот так:
В данном случае мы спрятали код в атрибутах тега img, после чего обработали код всей страницы, собирая разбросанные кусочки. Таким же способом можно скрывать текст в HTML/JavaScript комментариях:
Отдельно стоит отметить, что очень эффективно можно прятать код внутри популярных фреймворков — например, jQuery, mooTools и подобных. Эти файлы не являются подозрительными, а исследование их займет много времени (хотя всегда существует возможность автоматического сравнения оригинала и измененного файла).
Теперь же, думаю, можно поговорить о том, что, в конце концов, видит эксперт безопасности, и о том, что исследуют антивирусы. Ниже читай о наиболее популярных методах криптовки и обфускации JS-кода.
Субституция стандартных функций/методов JavaScript
Данный метод ориентирован на то, чтобы вместо стандартных функций или методов JavaScript подставить свои переменные:
Флуд комментариями и кодом
Данный способ рассчитан на то, чтобы вставить в обфусцируемый код флуд, то есть что-то, что не несет смысловой нагрузки для кода скрипта. Флудить можно как код, так и комментарии:
В данном случае мы — во-первых, использовали внутреннюю переменную «cookie» объекта «document», как элемент массива. Во-вторых, мы перевели ее имя в шестнадцатеричный формат. Если бы мы использовали переменную «cookie» через точку, то есть как document.cookie, то мы бы не смогли перевести обращение к ней в шестнадцатеричный формат, так как это относится только к строкам (в массиве ключ является строкой), а в document.cookie строк нет.
PHP-функция перевода в шестнадцатеричный формат:
Трюк с несуществующими функциями
Как мы уже знаем из прочитанного выше, в JavaScript можно вызывать методы, как элементы обьекта: document.getElementById и document[‘getElementById’]. Оба варианта фактически одинаковы, различие есть только в записи — во втором варианте мы используем строку.
Как-то вечером я придумал очень интересный способ получения подобных строк. Например, нам нужно зашифровать вышеупомянутый «getElementById». Отвлечемся на короткое объяснение данного способа с помощью такого примера:
Этот скрипт не будет работать, так как функции b, c и d не были ранее объявлены. Теперь попробуем сделать так, чтобы этот код заработал, для этого будем использовать «песочницу» конструкции try<>catch()<>:
После запуска мы увидим ошибку, а это значит, что, хоть код и не является рабочим, он не остановил выполнение оставшейся корректной части.
А вот теперь мы зададимся вопросом, как такая схема может быть связана с шифрованием строки «getElementById»? А вот так:
После выполнения этого кода у нас получится строка «getElementById», содержащаяся в переменной «x».
В чем соль этого метода? В том, что эвристический анализ антивирусов при нахождении функций будет ругаться на то, что они не существуют. Тем самым мы обфусцируем код не на уровне шифровки строк разными способами, а на уровне получения данных строк от самого JavaScript.
Числа с помощью оператора «
» (тильда) является битовым отрицанием и используется вот так: «alert(
13);». Этот код выведет нам «-14». Работает данный оператор по принципу «-(число+1)».
Представим, что мы хотим присвоить переменной «a» какое-нибудь число, причем нигде это число не писать: «a =
[]»;
Данный код присвоит переменной «a» число «-1». Почему? Потому что массив представляет собой нейтральный элемент с числовым значением «0», следовательно,
Буквы и строки без строковых данных
Иногда требуется получить букву/символ или какой-то текст без его явного написания. Сделать это позволяет одна особенность JavaScript. В этом языке существуют различные внутрисистемные сообщения, которые можно преобразовать в текст, а затем этот текст обработать.
Например, представим, что нам нужно получить текст «code». Эта строка содержится в именах таких методов, как charCodeAt(), fromCharCode() и других. Получить текст можно следующим образом:
В данном примере переменная «a» будет содержать текст «code». Разберем подробнее. Попробуй исполнить вот такой код: «alert(alert+»);». Ты увидишь что-то вроде «function alert() < [native code] >». Тем самым, использовав всего-навсего два раза функцию alert(), мы получили совершенно другие символы.
Теперь постараемся понять, как это все работает. Представим, что у каждого объекта, функции и всего остального в JavaScript есть некое «описание». Чтобы получить к нему доступ, нужно явно изменить тип данного объекта или функции на строковой, присоединив, например, пустую строку (+»»).
Шифровка строк
Для шифровки/расшифровки строк в JavaScript существуют несколько полезных функций. Разберем некоторые из них:
Также есть два метода объекта String, которые работают с преобразованием символа в ASCII-код и наоборот:
Преобразование объектов/переменных
Имена объектов и переменных можно также преобразовать в строку (например, чтобы потом эту строку зашифровать). Преобразование происходит по тому же принципу, что и преобразование имен методов, то есть с помощью перехода из формы «.метод» в форму «[метод]». Для корректного преобразования нужно найти еще более высокий в иерархии объектов элемент, который бы имел внутри себя слово «document». Имя ему this. Согласно стандартам JavaScript, this не является объектом, а является оператором, возвращающим ссылку на объект. В результате теперь мы можем безболезненно использовать getElementById таким образом: «this[«document»][«getElementById»]».
Привязка кода
Избегание подозрительных функций
Советую также избегать явное использование функций eval(), document.write() и других. При поиске настоящего кода люди часто используют метод подстановки alert() вместо данных функций, так как после этого код можно сразу прочитать таким, каким мы его начинали шифровать, следовательно, весь смысл обфускации пропадает. Как же выполнить код, не используя фунцкию eval()?
Вспомним про то, что во главе всего стоит оператор this. С помощью него функцию eval() можно превратить вот в такой код:
После такого преобразования мы спокойно сможем использовать «a()» вместо «eval()».
Изменение на нечитаемые строки
Шифрование кода
Способов шифровки текста существует неограниченное количество, хотя все они основаны на использовании каких-либо текстовых/числовых функций. Часто работает конструкция: eval() + функция_расшифровки() + шифрованная_строка. Попробую без лишней воды показать один из таких способов.
Допустим, нам нужно зашифровать строку «alert(1);». Мне пришло в голову брать по два символа из нее, переводить их в числа (ASCII код), считывать их и рядом ставить первый символ в чистой (без перевода) форме. Только стоит учесть, что, разделяя код на такие двухбуквенные части, мы получим код примерно в 2-2,5 раза больше оригинала, а также нельзя забывать, что такие блоки лучше как-то разделять (как элемент массива или через разделитель). За разделитель возьмем знак «%», так как он делает шифрованную строку похожей на URL-строку. Напишем простой PHP-скрипт:
Вот что у нас получилось: « %a205%e215%t156%190%;59 ».
А теперь напишем дешифровщик этого кода на JavaScript:
Вызов кода в таком случае будет выглядеть так: «eval(d(‘%a205%e215%t156%190%;59’));».
Теперь остается только немного обфусцировать весь этот скрипт. Мы не будем использовать все описанные методы, а затронем лишь некоторые из них:
Напоследок
Ну что ж, подведем итоги. При комбинации всех этих способов можно быть на 100% уверенным, что простой или даже средний пользователь не сможет прочитать или скопировать к себе твой код. Но так как специалисты по компьютерной безопасности прекрасно знают о большинстве данных трюков, а также потому что я выкладываю эту информацию на всеобщее обозрение, могу предположить, что данные методы станут более популярными и известными. Я надеюсь, что ты сможешь использовать представленную информацию в благих целях.
Делаем скрипт читаемым
Журнал Хакер, Сентябрь (09) 152
|qbz| (lopuxin.iv@yandex.ru, http://essenzo.net).