Как посмотреть что отправляет браузер
Перейти к содержимому

Как посмотреть что отправляет браузер

  • автор:

devtools как посмотреть запросы

Чтобы просмотреть сетевые запросы в DevTools, выполните следующие шаги:

  1. Откройте веб-сайт, для которого вы хотите просмотреть сетевые запросы
  2. Откройте DevTools, нажав на клавишу F12 (Windows) или Option + Command + I (Mac)
  3. Перейдите на вкладку «Network» в DevTools
  4. Обновите страницу, чтобы начать запись сетевых запросов, нажав на кнопку «Refresh» или клавишу F5

После обновления страницы вы увидите список всех сетевых запросов, которые были выполнены при загрузке страницы. Чтобы просмотреть подробную информацию о ресурсах, которые были загружены или выгружены, выберите соответствующую запись из списка запросов. Для удобства можно использовать фильтры в верхней части вкладки «Network» для отображения только определенных типов запросов или запросов, соответствующих определенным критериям.

HackWare.ru

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

Как анализировать POST запросы в веб-браузере

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

  • Chrome DevTools
  • Firefox Developer Tools

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

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

  • Статический анализ исходного кода веб-сайта в браузере
  • Анализ динамически генерируемых с помощью JavaScript сайтов и сайтов с подгружаемым контентом (поиск ссылок на видео, изображения, на подгружаемый контент)

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

Я буду показывать на примере сайта http://spys.one/en/free-proxy-list/ из статьи про прокси. (На самом деле, это простейший пример — в качестве более сложных примеров, попробуйте самостоятельно разобраться, например, в POST GMail при открытии и других действий с письмами).

По фрагменту исходного кода страницы видно, что данные из формы передаются методом 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», то отправленные данные будут показаны в виде строки:

xpp=5&xf1=0&xf2=0&xf4=0&xf5=0

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

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

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

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

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

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

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

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

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

Если вы хотите получить отправленные данные в виде строки, то вернитесь во вкладку «Заголовки» и нажмите кнопку «Изменить и снова отправить», в открывшейся области пролистните до «Тело запроса»:

Как вы уже поняли, здесь не только можно скопировать строку POST, но и отредактировать её и отправить запрос заново.

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

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

Связанные статьи:

  • Анализ динамически генерируемых с помощью JavaScript сайтов и сайтов с подгружаемым контентом (поиск ссылок на видео, изображения, на подгружаемый контент) (88.2%)
  • lulzbuster – инструмент для быстрого поиска скрытых файлов и папок на сайтах (62.3%)
  • Статический анализ исходного кода веб-сайта в браузере (60.3%)
  • Аудит безопасности роутера SKYWORTH GN542VF — взламываем пароль не выходя из веб-браузера! (59.9%)
  • Как использовать User Agent для атак на сайты (57.5%)
  • Что такое файл xmlrpc.php и как он влияет на безопасность сайтов WordPress (RANDOM — 50%)

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

Как определить куда идет запрос?

Не знаю, возможно ли это. Делаю клиент для сайта. В html выведены я вижу ссылку, например site.ru/user/id/5 , а реальная ссылка такая: site.ru/user/index.php?id=5 (наобум узнал). Как можно узнать куда в конце концов приходит запрос? Получится ли это сделать в Chrome?

Отслеживать
задан 18 окт 2017 в 6:12
user194625 user194625

@Flippy, поясните, что вы имеете в виду под «в html выведены», это на веб-странице в браузере или в коде страницы?

18 окт 2017 в 6:21

@Sergey Glazirin, в html коде. Причем там есть «грязные ссылки» непонятной архитектуры типа chat/wi:int:=107:form:msg:IFL:;

– user194625
18 окт 2017 в 7:31

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Это зависит от того, на чем сайт написан. Перенаправление может быть на клиентском уровне (в html или ajax), тогда его возможно отследить, а если перенаправление настроено на серверном уровне (java servlet например), тогда вы никогда не узнаете, куда сервер ваши запросы отправляет, вы сможете увидеть только адрес входа, куда ВЫ их отправляете, и ответ сервера в виде html, json, или еще чего-то. А что происходит внутри сервера — остается внутри сервера.

Отслеживать
ответ дан 18 окт 2017 в 6:57
user236980 user236980

Примерно так это выглядит

В Chrome есть DevTools, который открывается через f12, далее открыть вкладку Network, в ней выбрать раздел xhr или all, далее нажать на вашу ссылку, чтобы прошел запрос, он сразу же должен отобразиться в списке. Выделите его и в появившемся описании выбрать раздел headers. В нем в списке General найти пункт «Request URL»

Отслеживать
ответ дан 18 окт 2017 в 6:30
Sergey Glazirin Sergey Glazirin
5,658 5 5 золотых знаков 20 20 серебряных знаков 36 36 бронзовых знаков

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.5.3.8609

HTTP-запросы в браузере — HTTP API

Проще всего увидеть использование HTTP API прямо в браузере. Для удобства разработки и тестирования браузеры включают в себя панель разработчика — с ее помощью можно полностью проанализировать страницу, процессы, происходящие внутри и HTTP-запросы.

В этом уроке мы обсудим, как работать с этой панелью и узнавать полезную информацию.

Чтобы открыть панель разработчика у себя в браузере, воспользуйтесь статьей . В этом курсе мы будем пользоваться панелью браузера Chrome:

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

Chrome DevTools

Здесь нас интересует вкладка Network. На ней отображаются все запросы, которые выполняет браузер в процессе загрузки страницы. Также здесь показаны картинки, шрифты, файлы стилей, JavaScript и HTML самой страницы:

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

В этой же вкладке появляются запросы к HTTP API, которые выполняются на странице, использующей API.

Чтобы отделить запросы к HTTP API от всего остального, на вкладке Network нужно нажать кнопку Fetch/XHR. Тогда в списке загружаемых ресурсов останутся ресурсы с типом xhr. Это и есть запросы к HTTP API.

Возьмем для примера форму входа. Когда пользователь авторизуется на сайте, то сайт выполняет запрос (или несколько запросов) к API. Можете самостоятельно проверить, как это работает:

  1. Перейдите на сайт https://frontend-chat-ru.hexlet.app/
  2. Откройте панель разработчика, перейдите на вкладку Network и нажмите Fetch/XHR
  3. Введите данные для входа: имя admin и пароль admin

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *