Издательский дом ООО "Гейм Лэнд"ЖУРНАЛ ХАКЕР #125, МАЙ 2009 г.

Волшебные записочки. Методика полного копирования сайта

Роман «Spirit» Хоменко (http://tutamc.com)

Сейчас стало модным делать сайт и называть его словом «стартап». Этим занимаются все, кому не лень. Ну, мы тоже жить не можем без своего стартапа. Но ведь самим писать - не наш метод. Лучше возьмем сайт соседа и полностью, со всей функциональностью, скопируем. А потом внизу смело подпишемся своим именем.

Как-то вечером, перебирая клейкие листочки на сайте zapisochki.ru, я поймал себя на мысли, что владелец сервиса может, в теории, читать все, о чем я написал… И главный вопрос даже не во владельце – ведь мои любимые спецслужбы также могут это делать! Отказываться от сервиса я не планировал, в связи с его качеством и полезностью, поэтому решил взломать сервер, скопировать все исходники и установить их себе. Сказано – сделано. Сразу в бой за доступ вступили разные приемы проверки на инъекции, инклуды, простые пароли и прочее. Эта идея с грохотом провалилась, правда, взамен родилась новая, которая просто не могла не реализоваться. Но – прервемся немного и посмотрим, что собой представляет сайт zapisochki.ru.

Записочки

Сервис онлайн-записочек очень прост, и эта простота дьявольски притягивает. После захода на сайт весь экран браузера становится пустым. Если нажать на пустом месте, то появится «клейкий листочек» - некий квадратик, в котором можно писать текст и затем его редактировать. Также, в углу есть маленький квадратик, нажимая на который можно менять цвет листочка. И есть крестик, которым удаляется записочка. Весь интерфейс выполнен с использованием AJAX, и страница при работе не перегружается. Рабочая поверхность, на которой находятся записочки, называется «доска» (board) и имеет уникальный идентификатор, что отображается в URL. Эту информацию я рассказал, потому что без нее сложно понять статью. Оптимальным вариантом будет, если перед прочтением следующих абзацев ты зайдешь на сайт и сам испробуешь функционал.

Возрождение старой методики

Вернемся к рассмотрению мега-старой методики, которая сейчас снова возрождается. Раньше все сайты были статическими - состояли из HTML-файлов и картинок. Это добро отдавалось браузеру полностью для отображения. Чтобы скопировать сайт с потрохами, нужно было лишь запустить программу, которая открывает все ссылки на сайте и сохраняет все, что отдает сервер. Но затем в мир Веба пришла динамика, и копирование сайта стало задачей чрезвычайно трудной. К примеру, форум с сообщениями. Даже если по нему пройдется бот и сохранит все страницы, – это ничего не даст. Практически весь функционал заброшен в скрипты, которые остаются для нас закрытыми. При этом, тенденции к упрощению функционала не наблюдается и, казалось бы, скопировать сайт стало невозможно. Но тут пришла эра Веб 2.0! Одним из ее аспектов является перенос большой части функционала с серверного уровня на браузерный, на JavaScript... – а ведь он отдается нам в открытом виде! Чем больше система будет работать на стороне браузера, тем меньше кода на сервере – то есть, скрытого от нас кода. Этот маленький участок кода, который можно и самому дописать, – мелочь по сравнению с той частью, что мы без проблем скопируем. Теория может показаться немного непонятной, но после практики все встанет на свои места.

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

Инструменты

Чтобы разобраться с работой сайта, воспользуемся FireFox с установленными тремя плагинами:

Также необходим Offline Browser для скачивания всего сайта (триальная версия есть на www.metaproducts.com/mp/Portable_Offline_Browser.htm или у нас на диске).

Этапы копирования

Копирование сайта «Записочки» состоит со следующих этапов:

  • Анализ и эмуляция идентификации;
  • Копирование страницы с записочками;
  • Анализ протокола обмена клиентской части с серверной;
  • Анализ генерации главной страницы;
  • Программинг серверной части.

В результате мы получим полностью рабочий сайт zapisochki.ru у себя на локальном сервере.

Анализ идентификации

Перед копированием разберемся с идентификацией юзера, ведь у каждого своя страница с клейкими листочками, и нужно знать, какому юзеру какие записочки отображать. Перед началом анализа я, с помощью плагина Web Developer, удалил все кукисы для чистоты эксперимента. Включив Temper Data, я загрузил zapisochki.ru, – на что сервер вернул код переадресации 302 на zapisochki.ru/много_цифр/, да и еще бросил кукисы с каким-то логином и паролем. Я попробовал удалить пришедшие кукисы и загрузил zapisochki.ru/много_цифр/. Даже без логина и пароля, что были в кукисах, страничка нормально отобразилась. Делаем вывод, что идентификация происходит именно по этих циферкам в URL, а логин и пароль требуются лишь для внутренних нужд сайта.

Теперь можно копировать сайт и реализовать идентификацию. Для этого я быстро создал на Денвере хост с многозначительным названием «z». Для эмуляции главной странички – набросал скрипт, который при заходе на сайт «z» будет проверять кукисы. Если они есть, то, исходя из них, юзер будет переброшен на ту доску, которая прописана у него в кукисах.

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

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

Offline Explorer в работе

Рассмотрим копирование функциональности самих листочков. Перейдем на сайт zapisochki.ru/много_цифр/, создадим несколько разных записок и попробуем скопировать HTML-страницу со всей обвязкой. Конечно, можно все это и вручную проделать, – смотреть, какие файлы загружаются вместе со страничкой, и потом их копировать по одному – но лучше воспользоваться инструментом для создания фейков, а именно Offline Browser. Запустим его и в качестве исходного URL зададим zapisochki.ru/много_цифр/. Пара кликов на Next – и сайт полностью сохранен. После этого воспользуемся функцией экспорта и сохраним результат. В каталоге экспорта появилась папка с названием zapisochki.ru, а в ней, в папке themes, – все нужные картинки, скрипты и пр. Также там есть папка «много_цифр», а в ней один файлик с названием default.htm.

Далее я скопировал в Денвер папки themes и «много_цифр», а default.htm переименовал на index.php. Если зайти в браузере на http://z/много_буковок/, то отобразится страничка с нашими закладками, правда, не все пока работает. Почему-то не двигаются закладки. Сейчас исправим…

FireBug vs. Offline Explorer

Откроем наш FireBug и активируем весь функционал, например, нажав на вкладке «Net». Поставим везде галочки и нажмем «Применить». Теперь, когда перейдем на вкладку «Console», там пишется что-то типа «ошибка с dragdrop». Тут нужно отлаживать JavaScript, смотреть, в чем проблема, но я воспользовался другой методикой, и она сработала! Я открыл скачанный default.htm и в поиске ввел «dragdrop» - курсор переместился на строчку:

<script
src="../scriptaculous.js@load=effects,dragdrop"
type="text/javascript"></script>

Сразу в глаза бросается, что после scriptaculous.js идет «@», хотя в теории должен быть «?» (это же Get-запрос). Понятно, что так сделал Offline Browser, чтобы превратить динамически сайт в статический, но нам оно не нужно. Поэтому возвращаем все назад и заменяем «@» на «?», а файл scriptaculous.js@load=effects,dragdrop переименуем в изначальный - scriptaculous.js. После этого мы увидим, что во вкладе Net в FireBug появились две ошибки номер 404, то есть, двух файлов не было обнаружено, а именно:

effects.js
dragdrop.js

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

Удаление лишнего

Красоту немного портит «разьехавшийся» дизайн – будем исправлять! Если нажать на «инспектора» в FireBug и навести на наше меню, то увидим, что это все одна таблица. Нам ее не жалко, заходим в исходник страницы и удаляем все между тегами <table>, да и сами теги также. После обновления наблюдаем идеальный минималистский дизайн.

Но в «Console» FireBug опять появились ошибки. На этот раз – в файле sticker.js. Также там возле ошибки указывается номер проблемной строки. Если перейти на нее, а потом удалить строку, то после обновления ошибки больше не будет. Вот так, иногда удаление бывает эффективнее создания.

Протокол обмена

Записочки двигаются, текст и цвет меняется, однако, все это не сохраняется. Давай разберемся в протоколе обмена, чтобы в будущем его эмулировать. Откроем наши записочки в FireBug с вкладкой Console. Будем пробовать записочки в действии. Нажмем на пустом месте – появляется пустая записка. Теперь введем любой текст и выставим цвет. Видим, что браузер послал запрос:

Post
board: 70012862175107245171625585615874
color: 1
id:
text: sometext
x: 123.1
y: 543.2

Причем, переменная board берется с начала нашего файла default.htm, где есть строчка:

var board = '70012862175107245171625585615874';

Это важно, ведь потом данную строчку будет генерировать скрипт. Также видим, что id передается пустым, а в результате сервер возвращает число. Если изменить какой-то параметр записочки (цвет, расположения или текст), то посылается такой же запрос, только id становится не пустым. Из этого можно сделать вывод, что, если id пустое, то сервер создает в базе новую запись о записочке и возвращает клиенту ее идентификатор. В противном случае изменяются в базе параметры той записочки, идентификатор которой передается. Посмотрев на default.htm, видим строку:

var saveURL = '../noteboard/save/';

– она определяет путь к файлу, что обрабатывает сохранение, но мы его изменим на:

var saveURL = '../save.php';

Написанием этого файла займемся позже. Теперь рассмотрим удаление. Если нажать на крестик, то в FireBug появится такой запрос:

POST /NoteBoard/delete/37094

Видим, что при удалении в запросе указывается id записочки. URL, по которому будет отослан запрос, так же, как и для сохранения хранится в default.htm:

var deleteURL = '../noteboard/delete/';

Хотя это несколько неудобно, ведь нужно настраивать .htaccess для таких запросов. Поэтому упростим алгоритм, изменив URL на:

var deleteURL = '../delete.php?';

С этого времени запросы всегда будут обращаться на файл delete.php, а id листочка –приходить как GET-параметр. Мы знаем протокол обмена между сервером и клиентом и уже можем написать сценарии save.php и delete.php, но оставим программерскую часть на потом. Ведь у нас осталась еще генерация первой страницы. То есть, когда уже страница загрузилась, дальше всю работу по прорисовке берет на себя JavaScript. Но первый раз страницу нужно генерировать. А именно – вверху, в переменную board, вписать тот идентификатор, по которому пришел юзер.

Формирование записочек

Если посмотреть в конец исходника default.htm, то можно увидеть следующее:

<form id="stickers">
<textarea id="s36734"
style="left:61px;top:32px;z-index:1">
текст записочки 1</textarea>
<textarea id="s36735"
style="left:90px;top:33px;z-index:0">
текст записочки 2</textarea>
</form>

Нам нужно взять из базы «записочки» данные и потом их выводить как textarea, где в стиле прописывать позицию в параметры left и top, в z-index писать цвет, а в id - идентификатор записочки. Также между тегами <textarea> надо вписать текст.

Программирование

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

Нам требуется сделать четыре файла: .htaccess, index.php, save.php, delete.php. В .htaccess пропишем правила перенаправления всех несуществующих каталогов к index.php (это нужно, чтобы перехватить запросы на адреса со многими циферками). Файл .htaccess будет следующим:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?$1 [L,QSA]

Подумаем над проблемой хранения информации. Создадим в MySQL базу данных с одной простой таблицей и следующими полями, выбранными исходя из параметров записочки:

id - integer, для хранения идентификатора записочки
board - bigint, для хранения доски, в которой находится записочка
color - tinyint, для хранения цвета
x - float, для хранения x-координаты
y - float, для хранения y-координаты
text - varchar(255), для хранения текста

Файл save.php очень простой. Он лишь должен уметь принимать Post-данные и генерировать запрос на создание новой записочки:

INSERT INTO z SET `board`='$board', `text`='$text', `x`='$x', `y`='$y', `color`='$color'

– или запрос для обновления уже существующей:

UPDATE z SET `board`='$board', `text`='$text', `x`='$x', `y`='$y', `color`='$color' WHERE `id`='$id'

Ну а delete.php будет не сложнее:

DELETE FROM z WHERE id='$id' AND board='$board'

Файл index.php, как мы уже обсуждали, нужен для переадресации юзера по его кукисам на необходимую страничку. То есть, он будет «брать» идентификатор доски id, который хранится в кукисах, и выбирать с базы все соответствующие записочки, а дальше выводить тот файл, что мы получили от Offline Browser, и в нем между тегами <form> помещать записочки в формате, который мы определили выше.

Все у наших ног

На создание сайта у автора ушел, как минимум, месяц, а мы его скопировали за час. И таких сайтов сейчас очень много, так что простор для творчества огромен. Позволю себе напомнить, что вся информация представлена лишь для ознакомления. Если у тебя будут вопросы, то координаты найдешь на моем сайте http://tutamc.com. Всегда с радостью отвечу и помогу.

DVD

На диске – Offline Explorer, все файлы с zapisochki.ru и PHP-скрипты для эмуляции серверной стороны.

VIDEO

Ищи на диске видео, где показан полный процесс копирования сайта.

WARNING

Вся информация, конечно же, представлена лишь в ознакомительных целях. Не нужно повторять глупости за автором :).

WWW

Содержание