Защита Web-приложений. Учебное пособие
.pdf}
</style>
<script language="JavaScript"> $(function()
{
$("#MoveMe").draggable(); });
</script>
<title>Creating a Draggable Element</title> </head>
<body>
<h1>Creating a Draggable Element</h1> <p id="MoveMe"> Moveable Paragraph</p>
</body>
</html>
В этом случае абзацMoveMe (элемент <p>) является
основой. |
Обратите |
внимание, |
что |
перемещение |
абзаца не |
|||||
влияет |
на |
заголовок(элемент |
<h1>). Все, что вам |
нужно |
||||||
сделать, |
это |
вызвать $ ("# |
MoveMe"). Draggable |
(), когда |
||||||
форма |
загружается, |
чтобы |
|
сделать |
элемент |
абзаца |
||||
подвижным. |
|
|
|
|
|
|
|
|
|
|
|
2.1.2. Предоставление контролируемого выбора |
|
||||||||
Безопасность |
– |
это |
|
осуществление |
|
контроля. |
||||
Приложение должно сохранять контроль над тем, как оно |
||||||||||
взаимодействует с данными. Управление данными без их |
||||||||||
повреждения |
или |
утечки |
данных |
является |
важной |
основой |
||||
для создания безопасного интерфейса. Один из лучших |
||||||||||
способов осуществлять контроль – это использовать методы, |
||||||||||
чтобы |
гарантировать, |
что |
выбор |
пользователя |
ограничен |
|||||
только |
|
теми |
|
вариантами, которые |
вы |
|
ожидаете. |
|||
Использование определенных элементов управления вводом |
||||||||||
ограничивает выбор пользователя, но также делает его более |
||||||||||
эффективным, поскольку |
пользователь |
должен |
меньше |
|||||||
думать о доступных опциях. Вот общие конкретные варианты управления входными данными.
Радиокнопки
Позволяет пользователю выбрать один из нескольких вариантов. Выбор нового варианта всегда отменяет
31
предыдущий выбор. Наиболее распространенная ошибка, которую делают разработчики, это не установка одного из вариантов по умолчанию. Когда данные отправляются на сервер после того, как пользователь не может выбрать опцию,
сервер |
обнаруживает |
|
пустую запись |
данных |
и может |
|
столкнуться с проблемами. |
|
|
|
|
||
Чекбоксы |
|
|
|
|
|
|
Позволяет пользователю выбирать где-либо между ни |
||||||
одним и всеми доступными параметрами, проверяя нужные |
||||||
параметры. Наиболее |
распространенная |
ошибка, |
которую |
|||
делают |
разработчики, |
- |
это допущение |
противоречивого |
||
выбора. |
При работе |
с |
флажками каждый |
из |
вариантов |
|
является взаимоисключающим.
Списки
Взависимости от конфигурации, список может
действовать |
как |
переключатель |
или |
запись. |
-флажок |
|
Преимущество |
списков состоит |
в , томчто |
вы можете |
|||
настроить их, чтобы скрыть выбор, когда пользователь не |
||||||
выбрал элемент |
управления |
списком. В |
дополнение |
к |
||
проблемам, с которыми разработчики часто сталкиваются с переключателями и флажками, списки могут страдать от проблем с заполнением списка вариантов. У пользователя должен быть хотя бы один доступный выбор, чтобы окно списка действовало как элемент управления. Недоступные источники данных могут оказаться фатальными для этого элемента управления.
Меню
В зависимости от конфигурации, меню могут разрешать сложные комбинации переключателя и поведения чекбоксов. Конечно, меню также используются для выбора приложений на стороне клиента. Многие разработчики создают неудачный
продукт, делая |
меню |
слишком |
сложными, так |
как |
пользователь не будет долго искать конкретную опцию. |
|
|||
32
2.1.3. Реализация пользовательского интерфейса |
|||||
При работе с веб-приложениями у вас есть выбор, какой |
|||||
уровень использовать для реализации пользовательского |
|||||
интерфейса. На самом деле большинствоWeb-приложений |
|||||
используют |
разные |
уровни |
управления |
интерфейсом. |
|
Некоторая часть страницы отображается с использованием |
|||||
тегов HTML, другая часть - манипулирование интерфейсом с |
|||||
использованием каскадных таблиц стилей(CSS), а третья |
|||||
часть основана на JavaScript. Важно помнить, что вы можете |
|||||
использовать Java-Script как на клиенте, так и на сервере, |
|||||
поэтому на самом деле существует четыре уровня решений, |
|||||
которые вы можете использовать. |
|
|
|
||
Работа с элементами управления CSS |
|
|
|||
Основной |
целью CSS является |
форматирование |
|||
содержимого страницы таким образом, чтобы оно не зависело |
|
|
|||||||
от конкретного браузера, устройства или платформы. Кроме |
|
|
|||||||
того, форматирование |
не |
влияет |
на |
потребности |
в |
||||
специальных возможностях, поскольку пользователь обычно |
|
|
|||||||
может заменить необычное форматированиеCSS |
более |
|
|
||||||
простым |
форматированием, |
которое |
лучше |
работает |
с |
|
|||
устройствами. Тем не менее, |
можно использовать CSS для |
|
|
||||||
всех |
видов |
других |
задач |
с |
помощью |
|
ме |
||
программирования. |
Одной |
из |
таких задач является |
создание |
|
|
|||
элементов управления различного рода с использованием
комбинации HTML, CSS и JavaScript с |
акцентом наCSS. |
|||
Другими |
словами, вы |
создаете |
фактический |
элемент |
управления с помощью CSS, а не полагаетесь наHTML или |
||||
JavaScript для выполнения задачи. |
|
|
|
|
|||
Одним из мест для поиска необходимых инструментов |
|
||||||
является |
Dynamic |
Drive. Когда вы |
заходите |
на |
сайт, вы |
|
|
видите, |
что |
он |
предоставляет |
доступ |
ко |
всем |
видам |
инструментов, |
в |
том числе в этом конкретном |
примере, |
||||
Button Maker. На рис. 3 показано, как выглядит Button Maker |
|
||||||
при первом доступе к нему. Настройки на этой странице |
|
||||||
используются для создания CSS, необходимого для создания |
|
||||||
микрокнопки. |
Однако вы также |
можете |
легко |
создавать |
|||
33
другие виды элементов управлениспользуя, другие инструменты.
Рис. 3. Инструмент Button Maker
Результатом процесса, для этого примера, является немного CSS и файл формата обмена графическими данными (GIF) с именем MyButton.gif. Пример кода (находится в TestButton.html) является относительно простым, как показано здесь:
<!DOCTYPE html> <html>
<head>
<title>Testing a Micro Button</title> <style type="text/css"> #MicroTest
{
border: none; background-color: transparent;
}
</style>
</head>
<body>
<h1>Testing a Micro Button</h1> <button id="MicroTest"
onclick="alert('Clicked!')"> <img src="MyButton.GIF"> </button>
</body>
</html>
34
Обратите внимание, как код используетHTML и JavaScript для поддержки. Сама кнопка представляет собой GIF-файл. Код CSS выполняет необходимые задачи форматирования. Конечно, форматирование будет более сложным в реальном приложении. Результатом этого эксперимента является кнопка, подобная той, что показана на рис. 4.
|
Рис. 4. Микро-кнопка |
|
|
Основным |
преимуществом |
создания |
элементов |
управления CSS является то, что все генерируется локально.
Работа с элементами управления JavaScript
Когда дело доходит до элементов управления, JavaScript предоставляет опции, которые большинство разработчиков используют для создания сложных приложений. Разработчик также полагается наHTML5 для поддержки размещения и CSS3 для поддержки форматирования, но основные задачи определения интерфейса остаются заJavaScript. У вас есть доступ к двум уровням поддержкиJavaScript при создании интерфейса, и вы можете реализовать оба уровня в одном приложении.
Опираясь на клиентский контроль
Обычно вы не будете создавать элементы управления вручную, но вместо этого будете использовать настройки библиотеки, например, такие как jQuery и jQueryUI. При
35
работе |
с |
установкой |
на |
стороне |
клиента |
приложение |
|||
загружает библиотеки из локального источника |
или с |
||||||||
удаленного |
сервера, |
но |
после |
загрузки библиотек |
все |
||||
происходит локально. Основное преимущество обработки на |
|||||||||
стороне |
клиента |
состоит |
в , чтотом |
вы |
|
получаете |
|||
преимущество в скорости, и во многих случаях приложение |
|||||||||
становится |
более |
надежным, поскольку |
у |
|
вас |
есть |
|||
постоянный доступ ко всему, что требуется для его запуска. |
|
||||||||
JavaScript предлагает |
лучшие |
возможности |
для |
||||||
проверки клиентского контроля. Вы можете |
настроить |
||||||||
проверку так, чтобы она работала именно так, как вы хотите. |
|
||||||||
Проверка |
|
также |
может |
предоставить |
бо |
||||
функциональных возможностей, чем другие виды проверки. |
|||||||||
Однако, поскольку хакер может видеть ваш код, возможно, |
|
||||||||
что он придумает стратегию взлома вашего кода. |
|
|
|
||||||
Существенная |
|
проблема |
безопасности |
п |
|||||
использовании |
|
клиентских |
элементов |
|
|
управлени |
|||
заключается в том, что вы включаете чужой код в свое
приложение. |
Вы |
можете |
посмотреть |
на |
содержимое |
библиотек, таких как jQuery и jQueryUI, но только, если есть |
|||||
достаточно |
времени |
разработчики могут просматривать по |
|||
существу недокументированный код. Средства управления на стороне клиента имеют потенциальные риски, связанные с
ними, которые |
необходимо |
учитывать как |
часть |
вашей |
|
стратегии безопасности для приложения. |
|
|
|||
Элементы |
управления |
на |
стороне |
сервера |
часто |
начинаются с PHP или другого скрипта на сервере. Во многих |
|||||
случаях, вы можете вызвать скрипт |
напрямую, передать ему |
||||
необходимые данные и просмотреть только вывод скрипта в браузере. Обработка всего происходит на сервере. Поскольку сценарий не используется, проще отделить приложение от стороннего кода, что сделает его более безопасным. Однако при использовании элементов управления на стороне сервера возникают проблемы с надежностью и скоростью.
Но |
клиентская |
часть |
опирается JavaScriptна . |
|||
Фактически, |
вы |
можете |
встраивать |
выходные |
данные |
|
серверного элемента управления в страницу и обновлять это
36
содержимое по мере необходимости, используя что-то вроде |
|
|||||||
асинхронного JavaScript и XML (AJAX). При использовании |
|
|||||||
этой |
настройки можно |
ускорить |
приложение, отправляя |
|
||||
только данные на сервер и обновляя только часть страницы, |
||||||||
на которую влияют данные. |
|
|
|
|
|
|
||
Использование проверки между клиентом и сервером |
|
|||||||
Скорость |
приложения |
является |
основной |
проблемой |
||||
при |
создании Web-приложения. |
Время |
на |
вход |
для |
|||
пользователя может колебаться всего лишь от одной до пяти |
||||||||
секунд, чтобы выполнить большую часть проверки. Тем не |
|
|||||||
менее, важно выполнить проверку и получить |
правильный |
|||||||
вид ввода от пользователя. Хотя использование проверки на |
|
|||||||
стороне клиента выглядит с этой стороны предпочтительнее. |
||||||||
Подпрограмма |
JavaScript |
может |
|
быстро |
проверить |
|||
ошибочный ввод и сообщить пользователю об этом до того, |
||||||||
как данные отправятся на сервер. Дело в том, что вы |
||||||||
действительно хотите видеть в качестве проверки на стороне |
||||||||
клиента. |
|
|
|
|
|
|
|
|
Однако проверка на стороне клиента вызывает свои |
||||||||
проблемы. Данные должны покинуть хост-систему в какой-то |
|
|||||||
момент |
и отправиться на |
сервер. В |
промежутке |
времени |
с |
|||
момента отправки данных с браузера до момента получения |
|
|||||
этих данных сервером, хакер получает возможность для |
|
|||||
перехвата данных и их изменения. Чтобы убедиться, что |
|
|||||
данные действительно имеют правильный тип и содержание, |
|
|||||
вам необходимо выполнить |
вторую проверку на сервере. |
|||||
Если никто не изменял данные в процессе передачи, вторая |
|
|||||
проверка пройдет довольно быстро, и пользователь получит |
|
|||||
ответ в течение разумного периода времени. |
|
|
|
|||
Некоторые люди считают, что использование проверок |
|
|||||
на стороне клиента и на стороне сервера является излишним. |
|
|||||
Тем не менее, вам действительно нужны оба. |
Например, при |
|
||||
использовании определенных элементов управленияHTML5 |
|
|||||
вы получаете автоматическую проверку. На самом деле |
|
|||||
проверка не |
всегда |
самая |
точная |
или |
, полнаяно она |
|
обеспечивает |
определенный |
уровень |
безопасности |
для |
||
пользователя. |
Всегда |
помните, |
что проверка |
на стороне |
|
|
37
клиента предназначена для защиты пользователя, но и сделает пользовательский интерфейс более удобным, также это сократит затраты на поддержку приложений и проблемы
безопасности. Проверки на стороне сервера должны обеспечивать полное покрытие безопасности каждого входа и выхода. Недостаточно проверить данные, когда они приходят от клиента, а затем предположить, что с данными ничего не случится. Хакеры также могут вмешиваться в работу сервера,
потому что сервер позволяет получить доступ к данным множеству пользователей одним вторжением. Следовательно, вам необходимо обеспечить проверку правильности каждого входа для каждой процедуры на , чтобысервере
гарантировать, что приложение и его данные остаются безопасными.
Проблема, с которой вы чаще всего сталкиваетесь при проверках валидации, – это скорость приложения. Проблемы
могут |
возникать |
не |
только |
у |
пользователей, когда |
приложение работает |
медленно, но |
и когда |
увеличивается |
||
нагрузка на сервер. Поэтому вы должны поддерживать баланс между безопасностью и производительностью. Безопасность часто зависит от того, какой риск вы готовы принять для достижения определенных целей. Вы должны поддерживать баланс как часть процесса проектирования и разработки приложений.
Некоторые разработчики также ошибочно полагают, что необходимо использовать дополнительное оборудование для решения проблемы. Но добавление аппаратного обеспечения снижает надежность системы в целом. Снижение надежности также является угрозой безопасности. Если у хакера есть пять серверов для атаки вместо одного, вероятность обнаружения сервера, у которого нет нужных исправлен, илий он перегружен запросами, становится больше. Увеличение количества оборудования, используемого для обслуживания приложения, является частью решения, но вы должны сбалансировать его с увеличением скорости приложения, не оставляя серьезных дыр в безопасности.
38
2.2. Определение ролей надежности и безопасности
Надежность – |
это |
показатель |
того, как |
часто |
приложение выходит |
из строя. |
Это статистическая мера. |
Вы |
|
используете надежность, чтобы ответить на вопрос, какова вероятность того, что приложение может сломаться при определенных обстоятельствах. Надежность также говорит вам, когда среда приложения меняется. Например, если вы добавите персонал, то нагрузка на приложение увеличится, а надежность может снизиться, если вы не разработаете
приложение для хорошего масштабирования. Тем не менее, |
|
|||
даже когда программное обеспечение является совершенным, |
|
|||
аппаратное обеспечение достигает предела, и надежность все |
|
|||
равно снижается. Следовательно, надежность – это системная |
|
|||
мера. Аппаратное |
обеспечение, пользователи |
и |
их |
|
количество, платформа, |
операционная |
система, |
методы |
|
управления и множество других вещей влияют на надежность и вызывает то, что вы видите как ошибки или сбои в работе приложения.
Безопасность - это мера того, сколько усилий требуется для взлома приложения. В отличие от надежности, нет никакого метода, доступного для статистического измерения безопасности. Вместо этого у вас есть потенциальный ущерб,
который можно определить только ущербом нанесенным действиями хакера. Имея дело с безопасностью, вы также должны учитывать последствия мониторинга и способность команды быстро реагировать на нарушения.
Следовательно, нужно рассмотреть два вида проблем с приложением и то, как происходит этот сбой, зависит от приложения и способа его устранения. Ошибки надежности, как правило, приводят к повреждению данных– ошибки безопасности, с другой стороны, имеют тенденцию вызывать нарушения данных или приводить к нарушению целостности системы.
Важно
безопасностью
RangeCheck1.html показан код, защищенный на стороне клиента (вы также проверите данные на стороне сервера):
<!DOCTYPE html> <html>
<head>
<title>Performing a Range Check</title>
<script language="javascript"> function testValue()
{
value = document.getElementById("Data").value; if (value == "")
{
alert("Please type a number!"); return;
}
if ((value < 0) || (value > 5))
{
alert("Value must be between 0 and 5!");
}
else
{
alert("Value = " + value);
}
}
</script>
</head>
<body>
<h1>Performing a Range Check</h1>
<input id="Data" type="number" value="0" min=0 max=5 /><br />
<button id="Test" onclick="testValue()"> Test </button>
</body>
</html>
В этом случае случайный пользователь, который использует стрелки вверх и вниз на теге<input>, никогда не предоставит данные вне диапазона(рис. 5). Однако код JavaScript, найденный в testValue(), также гарантирует, что данные никогда не появятся за пределами диапазона, даже
при |
вводе. Использование типа ввода чисел означает, что |
если |
кто-то вводит значение, такое как «Hello», то, что |
фактически получает testValue (), является пустым значением.
Можно |
также |
проверить |
это |
условие |
и |
предоставить |
пользователю соответствующий ответ. |
|
|
|
|||
40