Достигший высокой степени просветления гуру веб-мастеринга может заслуженно почивать на лаврах, занимаясь исключительно архитектурными вопросами проектирования сайтов, и, может быть, иногда давать консультации за очень большие деньги. Но для того чтобы стать таким гуру, требуются годы духовного совершенствования. И кто знает, что сложнее для неофита – постичь, как звучит хлопок одной ладони, или разобраться в особенностях функционирования объекта StyleSheet в объектной модели JavaScript...

Акт первый. Форма и содержание
Как известно, каскадные таблицы стилей CSS являются одним из наиболее прогрессивных изобретений человечества (после анальгина). Полезность их заключается в том, что теперь нет необходимости встраивать различные оформительские ухищрения непосредственно в HTML-код, засоряя таким образом природное изящество его конструкций разномастными атрибутами цвета, размера и месторасположения. Есть способ лучше – свести все описание стиля в одну таблицу стилей и подключать ее по мере необходимости. Напомним, что делается это помещением в заголовок HTML-документа строки приблизительно следующего содержания:

<link rel="stylesheet" type="text/css" id="css1"
title="Default" href="/css/default.css">

Поскольку веб-мастера – это существа, страдающие хроническим избытком оптимизма, они часто полагают, что стилевая разметка, указанная в файле default.css, в состоянии удовлетворить всех посетителей их замечательного сайта. Однако мир куда более жесток, чем предполагает человек любой профессии, хоть как-то связанной с творчеством. Не проходит и одной тысячи посещений, как в почтовый ящик веб-мастера начинают сваливаться многочисленные просьбы «чуть-чуть изменить дизайн». Когда вежливые, а когда и чрезмерно злобные и с угрозами физической расправы. Причем любые изменения в дизайне не только не исправят, но даже ухудшат положение, потому как всегда найдутся люди, которым раньше нравилось больше.

Что же делать? Многие последуют совету упоминавшихся в начале статьи гуру и эти просьбы проигнорируют. Но, не постигнув Тень, нельзя увидеть Света – и мы покажем, как все-таки дать пользователю возможность легким движением мышки получить устраивающий его дизайн.

Итак, предположим, что вы, как и автор этой статьи, предпочитаете видеть черный текст на белом фоне. И, соответственно, прописываете в default.css следующее определение:

body {background-color: white; color: black}

Но пару дней назад к вам поступила гневная нота от посетителя сайта В.В. Пупкина, который желает видеть на сайте белый текст на черном фоне. Поскольку Пупкин – человек известный и уважаемый, вы не можете отказать ему в этой маленькой просьбе, для чего создаете альтернативную таблицу стилей pupkin.css:

body {background-color: black; color: white}

Теперь осталось сделать так, чтобы Пупкин и его сторонники видели сайт таким, как нравится им, а прочие посетители – таким, как нравится вам. Для этого необходимо реализовать JavaScript-функцию динамической замены таблицы стилей:

<script language="javascript">
function changeCSS(name) {
// обратите внимание – идентификатор коллекции
// "styleSheets" чувствителен к регистру:
document.styleSheets[‘css1’].href = ’/css/’ + name +
’.css’;
}
</script>

Осталось добавить в код страницы элементы управления, которые будут позволять менять таблицу стилей. Допустим, это будут кнопки «Стандартная версия» и «Версия для В. Пупкина»:

<button onclick="changeCSS(‘default’)">
Стандартная версия
<button onclick="changeCSS(‘pupkin’)">
Версия для В. Пупкина

Наслаждайтесь.

Акт второй. Тайное и явное

Усильем посторонним
не помочь
[До времени] раскрыться
нежному
Бутону хризантемы.
Из сборника неизвестного самурая

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

Во-первых, запретим пользователю выделять текст (как и что-либо другое). Это достаточно тривиальная задача, которая решается одним небольшим фрагментом JavaScript-кода в секции HEAD:

<script language="javascript">
<!--
// устанавливаем периодический вызов функции
// dropSelection с интервалом 5 мс
window.setInterval("dropSelection()",5);
function dropSelection() {
// сбрасываем выделение любой части документа
document.selection.empty();
}
// -->
</script>

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

<script language="javascript">
<!--
function right(e) {
// если нажата правая или средняя кнопка мышки
if (event.button == 2 || event.button == 3) {
alert("Правая кнопка мышки отключена!");
return false;
}
return true;
}
// устанавливаем функцию right() в качестве обработчика
// события нажатия кнопки мышки
document.onmousedown=right;
document.onmouseup=right;
// -->
</script>

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

Разобьем каждый статический документ, содержащийся на сайте, на две части. Первая их них будет являться шаблоном документа (например, index.html), заключая в себе заголовки, элементы оформления и прочую бесполезную информацию, даваемую пользователю в нагрузку. Шаблон может выглядеть примерно следующим образом:

<html>
<head>
<title>Домашняя страница В. В. Пупкина </title>
</head>
<body>
<h1>Домашняя страница В. В. Пупкина</h1>
<script language="javascript" src="index.js">
</body>
</html>

Обратите внимание на выделенную строку. Да, вы совершенно правы – содержание скрипта в данном случае загружается из внешнего источника, и в нем может быть все, что угодно. В данном случае в скрипте содержится та самая полезная информация, которую означенный В. В. Пупкин не хочет просто так отдавать простым пользователям для копирования и плагиата. Выводится в браузер она самым простым способом: с помощью метода document.write(). Вот пример файла index.js:

document.write(’<p>В этом абзаце содержится информация,’ +
’защищенная <i>строжайшим копирайтом</i>, ’ +
’и требующая тщательного осмысления.</p>’); А теперь внимание, вопрос: что увидит пользователь, выбравший в меню своего любимого браузера пункт View Source? Абсолютно верно – только содержимое файла шаблона index.html! Все, что находится в index.js, останется за пределами его внимания. Разумеется, никто не помешает пользователю набрать в строке браузера что-то вроде www.pupkin.com/index.js, но это довольно ненадежный способ – «никогда не знаешь, как отреагируют пчелы». Кроме того, чтобы еще больше затруднить пользователю жизнь, имеет смысл внедрить в скрипт функцию какого-нибудь примитивного шифрования (в общем, хватит даже не шифрования, а, к примеру, реверсирования, чтобы невозможно было скопировать фрагменты текста в буфер). Выглядеть это будет приблизительно так:

copyrightedText =
">p/<мотйарипок мишйажортс нещищаз тскет тотЭ>p<";

function reverse(text) {
resultText = new String;
for(i = 0; i < text.length; i++) {
resultText = resultText +
text.charAt(text.length – i);
}
return resultText;
}

document.write(reverse(copyrightedText));

Этот фрагмент кода выдаст в браузер текст «<p>Этот текст защищен строжайшим копирайтом</p>». Для того чтобы восстановить текст, пользователю придется написать специальную программу, то есть затратить примерно столько же усилий, сколько и веб-мастеру. И если пользователь не страдает излишним мазохизмом, он просто пойдет искать эту информацию в другом месте.

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

К сожалению или к счастью, трюки с запретом выделять текст и использовать правую кнопку мышки не работают в браузерах, основанных на Mozilla (в том числе и в Netscape 6). Поиск решений для них оставим в качестве домашнего задания. Впрочем, если время не терпит и сроки поджимают, автора можно призвать к ответу по адресу, указанному в подписи.

И помните, истинные гуру веб-мастеринга не пользуются этими приемами. Потому что им нечего скрывать, и «светел их лик». А если кто и умудрится по невежеству воспользоваться плодами трудов их в корыстных целях, то будет им всемерное общественное порицание. И адреса их ресурсов навечно будут занесены в позорные списки гуру (в качестве таковых на своих сайтах они часто заводят раздел «Клоны»).

Александр Темерев, temerev@piter.com