Защита сайта: скрываем наши JavaScript сценарии от посторонних глаз

Для чего нам это?

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

Что для этого нужно?

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

а) Для тестирования создайте каталог на сервере.
Я захожу на виртуальный диск, у меня это диск R, там же зайдите в папку home

Создайте директорию script, а внутри создайте папку www, в итоге у вас получится: home/script/www/ — после этого обязательно обновите сервер (Restart Denwer)

б) Создаем файл index.php – допустим, это наша главная страница сайта, и тут нам нужно выводить скрытые скрипты. Так же создайте папку «js» в этом каталоге.

Для нашей задачи, потребуются AJAX-запросы, для этого вы можете использовать свои рациональные функции, но если ваш проект будет разрастаться до размеров, который потребует применение особых эффектов, событий, подключите библиотеку, а я подключу заранее jQuery, поэтому в корень папки «js» добавьте jquery.js.

Затем в этой же папке создайте новую папку, в ней и будут храниться скрипты, которые нам нужно будет скрывать. Я назову ее «security»:

в) Набираем предварительный код в index.php

Как вы видите, присутствует блок <?php ?>

PHP берет на себя роль считывания ваших скриптов, которые будут заблокированы на сервере и к ним нельзя будет обратиться.

Но для начала давайте создадим наши скрипты, которые хотим спрятать.

г) В папке «security» создайте script1.js и script2.js, c таким вот содержимым, соответственно:

Для примера достаточно и этого! Теперь, чтобы к ним нельзя было обратиться, необходимо задать это на сервере, это делается благодаря файлу .htaccess.

.htaccess – это файл конфигураций, настраиваемый разработчиком, пользователем данного сервера.

.htaccess имеет такое содержимое:

После чего, на запрос:

Вы увидите подобное:

Тем самым ваша папка security скрыта от посторонних глаз, она является недоступной.

Если вы попытаетесь подключить скрипты:

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

д) Возвращаемся к программному php-блоку в index.php

Суть в том, что PHP имеет доступ ко всем файлам на сервере, независимо, скрыты они или нет, то есть, если вы пропишете:

то в данном случае мы с вами увидим содержимое нашего скрытого скрипта.

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

Дальше нам нужно научить наш сайт обрабатывать код PHP и переводить его в JavaScript. В принципе, это делается легко, для этого нам потребуется AJAX-запрос.

е) Вот как будет выглядеть конечный результат:

А теперь разбираемся, как это все работает. jQuery выполняет post-запрос (это помогает избежать дыр в работе index.php) на сервер «index.php?js=result», там идет проверка, если запрос с нашего сервера (функция strpos() и адрес нашего сервера «HTTP://script» – c учетом данного примера), то скрипт проверяет POST-переменную, то есть адрес нашего скрытого скрипта, и выдает текстовый результат. jQuery метод done() получает ответ в виде этого текстового содержимого, а уже этот текст можно преобразовать в рабочий javascript, это делает стандартная кроссбраузерная функция eval();

В итоге

Мы получаем свой результат, наши скрипты нельзя увидеть статически или динамически через консоль браузера, но легко увидеть их работу. Данные скрипты и их функции легко выполняются. Однако нужно хорошо подумать, чтобы применять данную технику, так как в данном случае поднимается вопрос производительности, быстродействия. Функция eval(code) среди разработчиков javascript считается злом, и рекомендуется использовать ее аналог new Function(‘return ’ + code), правда последнее не умеет выполнять определение функций внутри, то есть если в вашей переменной будет запись определения функции, code = “function test() {alert(1);}; test();”, то код не будет выполнен, а значит eval() подходит на все случаи жизни, правда имеет свои нюансы, о которых еще нужно дополнительно почитать.

Пример на GitHub
Демонстрация