Ботокс для web 2.0

Дмитрий Оксель, Денис Лянда

Хакер, номер #112, стр. 112-042-1

Делаем скин для чужого сайта, наращивая его функциональность

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

Модное словечко «Web 2.0» многим уже, наверное, набило оскомину. Разного рода социальные сети и проекты для совместной работы стали повседневной реальностью сетевого жителя. Ты сам, дорогой читатель, наверняка не одну ночь просиживал в проектах типа «вконтакте» или «одноклассники».

Аудитория наиболее популярных Web 2.0 сайтов огромна – миллионы и миллионы пользователей. Поставь себя на место руководства такого джаггернаута: нужно, если не угодить каждому, то хотя бы никого не обидеть. А публика пестрая – от пионеров до пенсионеров, и вкусы у всех, мягко скажем, разные. Засвечиваются даже самые замшелые снобы и социофобы. Поэтому применяется принцип «наименьшего общего знаменателя»: дизайн минималистский, блеклый; функциональный набор – осторожный. Ситуация напоминает расцвет конвейерного производства в США – все поголовно надевают серый долгополый плащ, шляпу «федора», выходят из небоскреба с газетой в руке и сигарой в зубах и садятся в машину «Форд», цвет которой может быть любым, если он черный. К сожалению, с математической точностью можно утверждать, что продукт, подогнанный под усредненные вкусы и запросы, никогда не будет идеальным для каждого индивидуального пользователя.

Человека, не склонного маршировать, такое положение дел радовать не может. Совесть требует сделать красивый, эргономичный и функциональный интернет, если не для каждого, то хотя бы для себя. Причем, без плясок с бубном и отверткой, а просто и интуитивно: нажал – работает.

Web 2.0 на стероидах

На выручку приходит новая технология JABFrame (что расшифровывается, как Javascript Anabolic Bookmarklets in Frame). Она позволяет производить с конечной страницей любые действия, включая предварительную обработку и анализ. Проще говоря, берем фронтенд сайта, разбираем по кирпичикам и строим из них «морду» по своему вкусу. Сервер наивно принимает ее за свою собственную.

Как это работает с технической точки зрения? По соображениям безопасности, веб-проекты обычно запрещают непосредственную работу сторонних сайтов с серверной частью. Подобные опасения понять нетрудно: в противном случае в Cети появилось бы бесконечное множество клонов крупных порталов, отличающихся только добавлением рекламы и воровством данных (логинов-паролей) по пути на оригинальный сайт. Это ограничение до сих пор обходилось с применением бэкенд-технологий: php-скрипт на нашем сервере запрашивает страницу интересующего сайта, выполняет над ней необходимые операции и выдает во фронтенд пользователю. Очевидно, что способ громоздкий и неудобный, более того, вызывает нагрузку на наш сервер, что нецелесообразно с экономической точки зрения (с такими затратами проще сделать свой проект и модить его сколько душе угодно). Недовольным оказывается и владелец оригинального сайта, поскольку мы фактически паразитируем на его серверных ресурсах, переманивая посетителей. Для конечных пользователей посторонний сайт в качестве этакого «прокси-интерфейса» и вовсе опасен: php-код на сервере закрытый, что он там делает – проверить невозможно. Зато легко догадаться, наверняка, гад такой, ворует пароли.

Итак, «тяжелая артиллерия» в виде специального сервера неуместна. Что остается? Можно прикрутить свой CSS, например, в Опере. Можно написать плагин к браузеру. Оба способа требуют от пользователя определенной технической подготовки и массы свободного времени, так что наивно ждать их широкого применения.

Новое платье короля

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

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

Основной «фокус» заключается в получении «нулевых прав». Ключевую роль здесь играет технология bookmarklet, которая находит все большую популярность (используется, например, в del.icio.us). В действии это выглядит следующим образом:

1. Берем сайт, который требуется модифицировать, например, google.com (сайт «А»).
2. На основе JABFrame создаем скрипт, который производит изменения в гипертексте исходного сайта, и размещаем его на сайте разработчика (сайт «Б»).
3. Вносим изменения в bookmarklet JABFrame, где прописываем адрес скрипта на сайте «Б», после чего выкладываем его на том же сайте.
4. Пользователь добавляет bookmarklet себе в избранное или на панель закладок (в современных браузерах – простым перетаскиванием ссылки на панель).
5. Затем пользователь переходит на интересующий его сайт «А» и вызывает bookmarklet из закладок или с панели. Управление получает скрипт JABFrame и начинает обработку – пользователь немедленно видит сайт «А» с расширенной функциональностью или с измененным внешним видом. Скрипт работает только в текущей вкладке и только до тех пор, пока вкладка с запущенным bookmarklet не будет закрыта или пока пользователь не перейдет на другой сайт.

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

JABFrame в действии: меняем «вконтакте»

В качестве наглядной демонстрации технологии студия Ajachtung ведет работу по модификации крупнейшей социальной сети «Вконтакте» (vkontakte.ru). Проект первый – создание специального «скина», то есть JABFrame-скрипта, позволяющего изменять внешний вид сайта. Благодаря отсутствию ограничений по работе с исходным кодом страницы был изменен не только банальный CSS-стиль, но и добавлены flash-модули, кастомные шрифты по технологии IFR (Image Flash Replacement), скриптовые эффекты и многое другое. Создатель собственного фронтенда не имеет доступа только к базе базой данных и серверным скриптам исходного сайта. Все остальное – к его услугам.

Можно утверждать, что технология успешно прошла полевые испытания: первым, пробным, скином пользуется более тысячи человек ежедневно, и эта цифра постоянно растет. Подтверждена поддержка самых разнообразных браузеров (от IE до Safari) и операционных систем (Windows, *nix, Mac OS X).

Скины – это, конечно, красиво, но, все-таки, не главное. Поэтому, кроме новых схем оформления и возможности добавления к «контакту» анимированных смайликов, уже анонсирован, например, проект чата, полностью основанный на базе данных «Вконтакте» без привлечения дополнительных серверов или ресурсов.

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

Сделай сам

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

С примерами скриптов можно ознакомиться на сайте проекта «Меняем вконтакте» – http://vkontakte.ajachtung.com.

Практический пример: препарируем «Википедию»

В качестве несложного упражнения попробуем заменить логотип wikipedia. Создаем файл wiki.js и размещаем его у себя на сервере (например, на localhost под апачем). Туда же кладем новый логотип (new.png).

Исходник wiki.js

// используем open source фреймворк jQuery

// сюда вставляем содержимое файла jquery-1.2.3.pack.js

// пока страница не изменена, не показывать ее

– функция выполняется после нажатия на любую ссылку

function loading() {

$('iframe').css({width:'0px'});

}

// если содержимое фрейма загружено

function ol() {

// собственно замена логотипа

$('#p-logoa',wiki.document).css(

{background:'url(http://localhost/new.png)

no-repeat'});

// на каждую ссылку вешаем обработчик

$('a',wiki.document).each(function(){

$(this).attr({'href':'javascript:window

.parent.loading();

location.href=\''+$(this).attr('href')+'\''});

});

// как изменили страницу – показываем ее:

$('iframe').css({width:'100%'});

};

// устанавливаем высоту основного документа

// отключаем скролинг мейнпейджа в IE:

$('body, html').css({height:'100%'}).attr

({'SCROLL':'no'});

// и в Internet Explorer 6.0

document.body.scroll = "no";

// удаляем элементы текущей загруженной страницы:

$('body').children().not('script').not

('iframe').remove();

// добавляем сам iframe:

$('body').append('<iframe style="

margin:0;padding:0;width:0px;height:'+(parseInt(

!window.opera?document.documentElement.

clientHeight:document.body.clientHeight)

-2)+'px" src="'+document.location+'?"

name="wiki" id="JAB_wiki" frameBorder="0"

style="visibility:hidden"></iframe>');

// вешаем обработчик на смену страниц

$('iframe').load(function() {ol()});

Затем создаем букмарклет следующего содержания:

javascript:(function(){h='http://localhost/';

with(j1=(d=document).createElement(s='script'))

{type='text/'+(language='java'+s);src=h+'wiki.js'}

d.body.appendChild(j1);})()

Идем на ru.wikipedia.org, нажимаем на букмарклет и наблюдаем результат. Заметим, что при переходе по ссылкам измененный логотип сохраняется (JABFrame в действии).

DVD

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

INFO

Букмарклет (от англ. Bookmarklets: bookmarks – «закладки» и applet – «Апплет») – маленькая JavaScript-программа, оформленная как javascript и сохраняемая как браузерная закладка. Щелчок по закладке пользователем приводит к запуску скрипта.