Подмена post запроса в браузере

Обновлено: 04.07.2024

Этичный хакинг и тестирование на проникновение, информационная безопасность

Современные веб-сайты становятся всё сложнее, используют всё больше библиотек и веб технологий. Для целей отладки разработчиками сложных веб-сайтов и веб-приложений потребовались новые инструменты. Ими стали «Инструменты разработчика» интегрированные в сами веб-браузеры:

Chrome DevTools
Firefox Developer Tools

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

В предыдущих статьях я уже рассматривал несколько практических примеров использования инструментов DevTools в браузере:

Эта небольшая заметка посвящена анализу POST запросов. Мы научимся просматривать отправленные методом POST данные прямо в самом веб-браузере. Научимся получать их в исходном («сыром») виде, а также в виде значений переменных.

По фрагменту исходного кода страницы видно, что данные из формы передаются методом POST, причём используется конструкция onChange="this.form.submit();":

Как увидеть данные, переданные методом POST, в Google Chrome

Итак, открываем (или обновляем, если она уже открыта) страницу, от которой мы хотим узнать передаваемые POST данные. Теперь открываем инструменты разработчика (в предыдущих статьях я писал, как это делать разными способами, например, я просто нажимаю F12):

Теперь отправляем данные с помощью формы.

Переходим во вкладку «Network» (сеть), кликаем на иконку «Filter» (фильтр) и в качестве значения фильтра введите method:POST:

Как видно на предыдущем скриншоте, был сделан один запрос методом POST, кликаем на него:

Header — заголовки (именно здесь содержаться отправленные данные)
Preview — просмотр того, что мы получили после рендеренга (это же самое показано на странице сайта)
Response — ответ (то, что сайт прислал в ответ на наш запрос)
Cookies — кукиз
Timing — сколько времени занял запрос и ответ

Поскольку нам нужно увидеть отправленные методом POST данные, то нас интересует столбец Header.

Там есть разные полезные данные, например:

Request URL — адрес, куда отправлена информация из формы
Form Data — отправленные значения

Пролистываем до Form Data:

Там мы видим пять отправленных переменных и из значения.

Если нажать «view source», то отправленные данные будут показаны в виде строки:

Вид «view parsed» - это вид по умолчанию, в котором нам в удобном для восприятия человеком виде показаны переданные переменные и их значения.

Как увидеть данные, переданные методом POST, в Firefox

В Firefox всё происходит очень похожим образом.

Открываем или обновляем нужную нам страницу.

Открываем Developer Tools (F12).

Отправляем данные из формы.

Переходим во вкладку «Сеть» и в качестве фильтра вставляем method:POST:

Кликните на интересующий вас запрос и в правой части появится окно с дополнительной информацией о нём:

Переданные в форме значения вы увидите если откроете вкладку «Параметры»:

Другие фильтры инструментов разработчика

Для Chrome кроме уже рассмотренного method:POST доступны следующие фильтры:

Зачем это делать ?

Пример 1. Анализ трафика.
Пользователи вашей сети пользуются вашим прокси-сервером. Вы можете увидеть на какие сайты заходят пользователи, запрещать дальнейшие переходы на эти сайты.

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

Установка Fiddler

Установка простая и быстрая.

Настройка Fiddler

Если опция "File -> Capture Traffic" выключена, то Fiddler перестает работать как системный прокси-сервер и перехватывает только те пакеты, которые идут непосредственно на адрес Fiddler. Это может быть когда вы настроили ваше приложение или браузер сами для работы через ip/port Fiddler. По умолчанию Fiddler слушает на порту 127.0.0.1:8888

Опция "Keep: All sessions".
В данном режиме Fiddler не очищает журнал собранных HTTP-пакетов. Если требуется продолжительная работа Fiddler, то при большой нагрузке этих пакетов будет очень много и Fiddler скушает всю доступную оперативную память компьютера. Чтобы этого не случилось переключите в режим "Keep: 100 sessions".

Опция "Decode".
По умолчанию выключена. В процессе анализа собранных пакетов рекомендуется включить чтобы пакеты автоматически декодировались. Либо можно выделить собранные пакеты через Ctrl+A, вызвать меню нажатием правой кнопки мыши по выделенным пакетам и нажать "Decode Selected Sessions".

Основные настройки

Переходим в "Tools -> Options. ".

Вкладка "HTTPS".
После установки Fiddler не собирает HTTPS-трафик, это необходимо включить. Ставим галочку в опции "Decrypt HTTPS traffic". После этого Fiddler сгенерирует самоподписанный сертификат и спросит хотите ли установить данный сертификат. Отвечаем да.

Опция "Ignore server certificate errors (unsafe)" - сразу можно не включать. На некоторых порталах бывают ошибки сертификатов, но это редко. Как увидите так включите )
Настройка протоколов. По умолчанию стоит значение "<client>;ssl3;tls1.0". Советую сразу установить значение на "<client>;ssl3;tls1.0;tls1.1;tls1.2". После изменения настроек необходимо перезапустить программу чтобы настройки вступили в силу.

"Trust Root Certificate" - если сгенерированный Fiddler сертификат вы не установили после включения опции "Decrypt HTTPS traffic", то можно это сделать здесь.

"Export Root Certificate to Desktop" - если вы планируете использовать Fiddler как прокси-сервер локальной сети, то на каждом устройстве пользователя необходимо установить сгенерированный выше сертификат. С помощью этой опции сохраняете сертификат на ваш рабочий стол.

"Reset All Certificates" - в некоторых случаях необходимо сгенерировать новый сертификат взамен старого. В этом случае сбрасываем все Fiddler-сертификаты и генерируем новый сертификат.

Вкладка "Connections".
Здесь устанавливаем на каком порту Fiddler работает как прокси-сервер. Порт по умолчанию "8888".

"Allow remote computers to connect" - включаем опцию чтобы Fiddler начал принимать подключения от других компьютеров.

"Act as system proxy on startup" - по умолчанию опция включена. Если включена, то при запуске опция "File -> Capture Traffic" включена.

После изменения данных настроек необходимо перезапустить программу чтобы настройки вступили в силу.

Вкладка "Gateway".
Здесь устанавливаем куда Fiddler отправляет входящие пакеты, какой прокси использует.

"Use System Proxy (recommended)" - использование системного прокси из реестра текущего пользователя.

"Manual Proxy Configuration" - возможность задать вручную прокси-сервер.

"No proxy" - задаем что выход в Интернет напрямую, без использования прокси.

После изменения данных настроек необходимо перезапустить программу чтобы настройки вступили в силу.

Установка сертификатов на Windows устройствах

После того как сгенерированный сертификат скопирован на рабочий стол этот сертификат необходимо установить на каждое устройство которое будет использовать данный Fiddler в качестве прокси-сервера.

Для установки сертификата используем консоль управления MMC: в коммандной строке вводим команду "mmc".

В меню файл выбираем "Добавить или удалить оснастку". Из доступных оснасток выбираем "Сертификаты" и с помощью кнопки "Добавить" выбираем данную оснастку. Нажимаем "Ок" и выбираем "учетной записи компьютера". Это нужно чтобы открыть сертификаты которые установлены для всего компьютера, а затем установить сертификат Fiddler именно в это хранилище. Если открыть сертификаты "моей учетной записи пользователя", то после установки сертификата Fiddler в это хранилище другие пользователи данного компьютера не смогут подключиться к Fiddler.

Установку сертификата производим в "Доверенные корневые центры сертификации".

Если ваши компьютеры находятся в домене, то используйте инструменты домена для установки сертификата каждому пользователю или на каждый компьютер сети.

Анализ трафика

В процессе работы Fiddler сниффит все HTTP-запросы и их обычно много. Для поиска необходимых запросов можно использовать фильтры. Правой кнопкой мыши выбираем лишний запрос, выбираем "Filter Now" и "Hide '. '" чтобы скрыть запросы к данному домену. Можно удалять вручную выделенные запросы используя кнопку "Delete".

Изменение данных запросов

В Fiddler существует инструмент "Fiddler ScriptEditor" (Редактор скриптов) для создания правил модификации трафика. Запуск редактора скриптов через "Ctrl+R" или выбора пункта меню "Rules -> Customize Rules. ".

В редакторе скриптов есть два основных метода: "OnBeforeRequest" и "OnBeforeResponse":

"OnBeforeRequest" - выполнение скриптов в этом методе происходит перед отправкой пакетов на веб-сервер.

"OnBeforeResponse" - выполнение скриптов в этом методе происходит после получения ответа от веб-сервера.

Ниже приведены примеры скриптов с указанием в каком методе их расположить.

Задача 1: Запрет сайта

Запрещаем переход на адрес сайта содержащий строку.

Задача 2: Запрет загрузки ресурса

Запрещаем загрузку ".svg" файлов для заданного адреса сайта.

Задача 3: Переадресация запроса

Переадресация запроса на адрес сайта содержащий строку.

Задача 4: Сбор данных

Пользователи подключаются через данный прокси-сервер и делают в браузерах некоторые запросы вида "https://myhost.ru?key=abcd&vin=VF38BLFXE81078232&lang=ru". Задача записать в базу данных событие поиска и передать значение vin-номера. Данный скрипт создает файлы с названием включающем vin-номер. Кроме скрипта необходимо создать утилиту/службу, которая раз в заданный интервал читает каталог "C:\vinsearch\" и записывает данные в базу данных.

Задача 5: Изменить текст в ответе

В данном примере меняем текст "Иванов" на "Петров".

Задача 6: Заменить ресурс веб-портала на локальный ресурс

Заменим картинку веб-портала на картинку расположенною на локальном диске.

Задача 7: Изменение свойств HTML-объектов

Например, есть картинка с заданными размерами в HTML и нужно эти размеры изменить.

Задача 9: Заставить страницу открываться в текущем окне

Пример: существует JavaScript, который открывает ссылку в новом окне. Нужно сделать чтобы ссылка открывалась в текущем окне.

Задача 10: Выполнение скриптов для определенных IP

В данном примере меняем текст "Иванов" на "Петров" только для IP

Задача 11: Меняем css-стили портала

Css-файлы веб-портала можно сохранить на локальном диске, отредактировать и настроить скрипт отдавать стили с локального диска, а не с портала.

Задача 12: Запрет PUT-команды и аналогичных

Запрет команды по ее типу: "PUT", "DELETE", etc.

Задача 13: Изменение тела POST-запроса

Изменить тело POST-запроса для заданного портала. При авторизации на данном портале вне зависимости от введенных пользователем данных на веб-портал отправятся данные из скрипта.

Заголовки пакетов можно легко редактировать: удалять, добавлять, изменять.

Есть ли какие-то функции в Chrome и / или Firefox, которых мне не хватает?

Я делаю приложение Chrome под названием Postman для подобных вещей. Все остальные расширения казались немного устаревшими, поэтому я сделал свои собственные. Он также имеет множество других функций, которые были полезны для документирования нашего собственного API здесь.

Postman теперь также имеет собственные приложения (т.е. автономные) для Windows, Mac и Linux! Сейчас предпочтительнее использовать собственные приложения, подробнее см. здесь.

CURL УДИВИТЕЛЬНЫЙ, чтобы делать то, что вы хотите! Это простой, но эффективный инструмент командной строки.

Команды тестирования реализации отдыха:

Если вы настаиваете на расширении браузера, то:

Chrome :

Firefox :

С формой, просто установите method на "post"

Т.е. создайте себе очень простую страницу для проверки действий публикации.

Вот расширение Advanced REST Client для Chrome.

У меня он отлично работает - помните, что вы все еще можете использовать с ним отладчик. Панель «Сеть» особенно полезна; он предоставит вам обработанные объекты JSON и страницы ошибок.

Для firefox есть также неплохое расширение RESTClient:

Может не иметь прямого отношения к браузерам, но fiddler - еще одно хорошее программное обеспечение.

Просто чтобы дать свои 2 цента за этот ответ, после повышения уровня Postman появились и другие клиенты, о которых стоит упомянуть здесь:

: с приложением для ПК и плагин Chrome : ранее известная как Postwoman, и с также доступен плагин Chrome. Вы также можете заставить его работать локально с помощью Docker, если хотите подшутить : если вы используете Mac : уже упоминается как Chrome plugin, но стоит отметить, что в нем также есть настольное приложение : написан на java и с большим количеством функций тестирования. : еще один способ тестирования API. Он поставляется с интеграцией SOAP и имеет плагин Chrome доступен

Вы можете отправлять запросы прямо из браузера с помощью ReqBin. Никаких плагинов или настольных приложений не требуется.

Здесь есть хороший простой пример Fetch API здесь

Некоторые из преимуществ команды fetch действительно ценны: она проста, коротка, быстра, доступна и даже в качестве консольной команды она хранится на вашей консоли Chrome и может использоваться позже.

Простота нажатия F12, написания команды на вкладке консоли (или нажатия клавиши «вверх», если вы ее использовали раньше), а затем нажатия клавиши ввода, ожидания и возврата ответа - вот что делает ее действительно полезной для простых тестов на отправку запросов.

Конечно, основным недостатком здесь является то, что, в отличие от Postman, он не передает политику перекрестного происхождения, но все же я считаю его очень полезным для тестирования в локальной среде или других средах, где я могу включить CORS вручную.

Этичный хакинг и тестирование на проникновение, информационная безопасность

Chrome DevTools
Firefox Developer Tools

Как увидеть данные, переданные методом POST, в Google Chrome

Теперь отправляем данные с помощью формы.

Как видно на предыдущем скриншоте, был сделан один запрос методом POST, кликаем на него:

Header — заголовки (именно здесь содержаться отправленные данные)
Preview — просмотр того, что мы получили после рендеренга (это же самое показано на странице сайта)
Response — ответ (то, что сайт прислал в ответ на наш запрос)
Cookies — кукиз
Timing — сколько времени занял запрос и ответ

Поскольку нам нужно увидеть отправленные методом POST данные, то нас интересует столбец Header.

Там есть разные полезные данные, например:

Request URL — адрес, куда отправлена информация из формы
Form Data — отправленные значения

Пролистываем до Form Data:

Там мы видим пять отправленных переменных и из значения.

Если нажать «view source», то отправленные данные будут показаны в виде строки:

Как увидеть данные, переданные методом POST, в Firefox

В Firefox всё происходит очень похожим образом.

Открываем или обновляем нужную нам страницу.

Открываем Developer Tools (F12).

Отправляем данные из формы.

Переходим во вкладку «Сеть» и в качестве фильтра вставляем method:POST:

Кликните на интересующий вас запрос и в правой части появится окно с дополнительной информацией о нём:

Переданные в форме значения вы увидите если откроете вкладку «Параметры»:

Другие фильтры инструментов разработчика

Для Chrome кроме уже рассмотренного method:POST доступны следующие фильтры:

Есть ли расширение или функциональность в Chrome и/или Firefox, которые мне не хватает?

спросил(а) 2020-02-29T19:23:42+03:00 1 год, 8 месяцев назад

Я делаю приложение Chrome под названием Postman для этого типа вещей. Все остальные расширения казались немного устаревшими, поэтому я сделал свой собственный. Он также имеет множество других функций, которые были полезны для документирования нашего собственного API здесь.

Postman теперь также имеет родные приложения (то есть автономно) для Windows, Mac и Linux! Теперь лучше использовать собственные приложения, более подробно здесь.

ответил(а) 2020-02-29T19:39:08.331449+03:00 1 год, 8 месяцев назад

CURL УДИВИТЕЛЬНО делать то, что вы хотите! Это простой, но эффективный инструмент командной строки.

Остальные реализации тестовых команд:

ответил(а) 2020-03-31T23:17:12+03:00 1 год, 7 месяцев назад

Если вы настаиваете на расширении браузера, тогда:

Chrome:

Firefox:

ответил(а) 2020-03-06T20:37:31+03:00 1 год, 8 месяцев назад

Firefox

Откройте панель "Сеть" в "Инструменты разработчика", нажав Ctrl-Shift-Q или перейдя в Firefox → Инструменты разработчика → вкладка "Сеть" (выделена). Затем нажмите на значок маленькой двери сверху справа (в развернутом виде на скриншоте, вы найдете его слева от выделенных Заголовков), вторая строка (если вы не увидите ее, а затем перезагрузите страницу) → Изменить и resend любой запрос, который вы хотите

EDIT: добавлено изображение. К сожалению, я нахожусь в Linux, поэтому нет простого инструмента, чтобы объединить все вокруг, но, надеюсь, основные моменты сделают все ясно. .

ответил(а) 2020-02-29T19:23:42+03:00 1 год, 8 месяцев назад

Будучи очень вдохновленным Postman для Chrome, я решил написать что-то подобное для Firefox.

REST Easy * - это перезагружаемое дополнение Firefox, которое предназначено для обеспечения максимально возможного контроля над запросами. Дополнение все еще находится в экспериментальном состоянии (оно еще не было просмотрено Mozilla) , но развитие идет хорошо.

Читайте также: