Скрытая передача данных из форм
Обмен данными в Web-технологии подробно рассматривается в другой главе — "CGI и формы". Программирование элементов форм обсуждается в разделе "Программируем формы". В этом разделе мы рассмотрим вопрос о возможности передачи скрытых от пользователя данных.
Рассмотрим следующий пример. Нажмите на кнопку "Подписка" и посмотрите на строку location своего браузера. Вы обнаружите там два поля, которых нет в заполняемой вами форме: h1 и h2. Это уже неприятно, хотя сама информация в них отнюдь не криминальная (location.href и document.referer). Это означает, что в тексте страницы есть вызов функции со строками типа:
<SCRIPT>
document.f.h1.value = window.location.href;
document.f.h2.value = window.document.referer;
</SCRIPT>
Теперь посмотрим другой пример. Если начать вводить данные в левом фрейме окна примера, то, как только вы переходите от поля к полю, в правом фрейме заполняются соответствующие поля. Cкрипт из правого фрейма читает данные из полей левого фрейма. В кодах это будет выглядеть примерно так:
function ask()
{
document.forms[0].elements[0].value=
window.top.frames[0].document.forms[0].elements[0].value;
document.forms[0].elements[1].value=
window.top.frames[0].document.forms[0].elements[1].value;
document.forms[0].elements[2].value=
window.top.frames[0].document.forms[0].elements[2].value;
document.forms[0].elements[3].value=
window.top.frames[0].document.forms[0].elements[3].value;
setTimeout("ask();",100);
}
...
<BODY onLoad="ask();" BGCOLOR=lightyellow TEXT=navy>
Это означает, что данные из одного окна могут быть считаны программой из другого окна. Вопрос только в том, хотите ли вы, чтобы это происходило. Как решаются эти вопросы, рассказано в разделе "Модель безопасности".
Еще один пример — отправка данных по событию без наличия какой-либо формы в документе вообще.
<FORM NAME=hf ACTION="javascript:window.alert('Готово');void(0);"
METHOD=post>
<INPUT NAME=hfi TYPE=hidden>
</FORM>
<SCRIPT>
document.hf.hfi.value = location.href;
</SCRIPT>
<A HREF="javascript:window.alert('Внимание');void(0);"
onClick="document.hf.submit();">
Нажми на ссылку
</A>
Результат исполнения:
Нажми на ссылку
Согласно примеру при нажатии на гипертекстовую ссылку произойдет не только выдача сообщения, которое в этой ссылке указано, но и событие Submit для формы. В итоге вы получите два окна предупреждения. Но второе окно вы не заказывали!
Конечно, бесконтрольной передачи данных на сервер можно избежать, введя режим подтверждения отправки. Но, во-первых, многие пользователи его отключают, а во-вторых, можно использовать не формы, а, например, графику. И эту возможность мы рассматриваем в разделе "Невидимый код".
Невидимый код
Вопрос доступности JavaScript-кода рассматривается с двух точек зрения: идентификация, как следствие — необходимость сокрытия кода, и безопасность пользователя, следовательно — доступность кода.
Приемы программирования со скрытым кодом позволяют решить еще несколько задач, которые не связаны с безопасностью.
Мы будем рассматривать возможность использования скрытого кода без выдачи вердиктов о преимуществе того или иного подхода. Рассмотрим несколько вариантов:
- невидимый фрейм;
- код во внешнем файле;
- обмен данными посредством встроенной графики.
Строго говоря, первый и последний варианты не скрывают код полностью. Они рассчитаны либо на неопытных пользователей, либо на нелюбопытных. Так или иначе, не каждый же раз вы будете смотреть исходный текст страницы.
Невидимый фрейм
Технология программирования в невидимом фрейме основана на том, что при описании фреймовой структуры можно задать конфигурацию типа:
<FRAMESET COLS="100%,*">
<FRAME NAME=left SRC=hcfl.htm>
<FRAME NAME=right SRC=hcfl.htm>
</FRAMESET>
При таком размещении страниц по фреймам и фреймов в рабочей области окна левый фрейм займет весь объем рабочей области окна, а содержание правого будет скрыто. Именно в этом невидимом фрейме мы и разместим код программы.
При нажатии на кнопку "Пример невидимого фрейма" откроется новое окно. Если присмотреться внимательно, то кроме картинки с правой стороны окна можно увидеть вертикальную границу. Это граница фрейма. Ее можно двигать. В правый невидимый фрейм мы поместили функцию подкачки картинок. Этот прием позволяет загружать картинки с сервера тогда, когда содержание левого фрейма уже отображено. Если функцию разместить в главном окне, то время отображения будет зависеть от многих факторов, например картинки, размещенные в заголовке документа, браузер начнет перекачивать раньше картинок в теле документа. При последовательном обмене это будет означать увеличение времени загрузки отображаемой части страницы.
Код во внешнем файле
Попав на данную страницу, вы уже использовали программу из внешнего файла. Чтобы убедиться в этом, достаточно посмотреть на HTML-разметку данной страницы:
<HTML>
<HEAD>
...
<SCRIPT LANGUAGE=JavaScript SRC="../css/jsc.pgm">
</SCRIPT>
...
</HEAD>
<BODY onLoad="jump();">
...
</BODY>
</HTML>
Контейнер SCRIPT определяет внешний файл размещения скриптов. Функция jump() расположена именно в этом файле. Она анализирует ссылку на данный документ, и если в ней есть компонент hash(#), то она продергивает файл до якоря, указанного в hash. Чтобы в этом убедиться, перейдите по любой внутренней ссылке, например, из меню разбивки раздела на подразделы, а после этого перезагрузите документ по Ctrl+R. Сначала документ будет загружен, а потом прокручен до указанного якоря.
Обмен данными посредством встроенной графики
Данный прием основан на двух идеях: возможности подкачки графического образа без перезагрузки страницы и возможности подкачки этого графического образа не через указание URL графического файла, а через CGI-скрипт, который возвращает Content-type: image/... или осуществляет перенаправление.
При этом следует учитывать, что использовать метод, отличный от GET, можно только в формах, а мы хотим просто менять значение свойства src:
...
function change_image(x)
{
s = "http://intuit.ru/cgi-bin/image_script?"+document.cookie;
document.x.src= s;
...
&a HREF="javascript:change_image(i);void(0);">
<IMG NAME=i SRC=image1.gif>
</A>
Эта безобидная последовательность операторов JavaScript позволит нам узнать получил ли клиент cookie. "Волшебные ключики" могут не поддерживаться по разным причинам. В данном случае программа передает на сервер выставленные им "ключики" в качестве параметра скрипта под видом изменения картинки.
Модель безопасности
При программировании на JavaScript потенциально существует возможность доступа из программы к персональной информации пользователя. Такая проблема возникает всегда, когда нечто, запускаемое на компьютере, имеет возможность самостоятельно организовать обмен данными по сети с удаленным сервером.
От версии к версии управление защитой таких данных постоянно совершенствуется, но всегда нужно иметь в виду, что множество "следопытов" исследует эту проблему и постоянно открывает все новые и новые возможности обхода механизмов защиты.
Объясним только основные моменты в принципах защиты информации в JavaScript, а поиск потенциально слабых мест оставим в качестве домашнего задания для наиболее пытливых читателей.
По умолчанию к защищенным в JavaScript данным относятся:
Объект |
Свойства |
Document |
cookie, domain, forms[], lastModified, links[], location, referer, title, URL |
Form |
action |
document.forms [].elements[] |
checked, defaultChecked, defaultValue, name, selectedIndex, toString, value |
History |
current, next, previous, toString(), all array elements |
Location, Link, Area |
hash, host, hostname, href, pathname, port, protocol, search, toString() |
Option |
defaultSelected, selected, text, value |
Window |
defaultStatus, status |
Защищенными эти данные являются с той точки зрения, что программа не может получить значения соответствующих атрибутов. Главным образом речь здесь идет о программе, которая пытается получить доступ к данным, которые определены на другой странице (не на той, в рамках которой данная программа исполняется). Например, к данным из другого окна.
В настоящее время известны три модели защиты: запрет на доступ (Navigator 2.0), taint model (Navigator 3.0), защита через Java (Navigator 4.0). Применение моделей и соответствующие приемы программирования — это отдельный сложный вопрос, требующий знаний и навыков программирования на языке Java, поэтому в рамках данного курса мы его рассматривать не будем.
Отметим только, что к большинству свойств объектов текущей страницы и окна программист имеет доступ. Они становятся защищенными только в том случае, если относятся к документу в другом окне и загруженному из другого Web-узла. Поэтому ограничения, накладываемые системой безопасности JavaScript, достаточно гибкие и не очень сильно мешают разработке страниц с применением этого языка программирования.
|