How to analyze POST requests in web browsers
Modern websites are becoming more complex, using more and more libraries and web technologies. For debugging purposes, developers of complex websites and web applications required new tools. They are “Developer Tools” integrated into the web browsers themselves:
- Chrome devtools
- Firefox Developer Tools
They come with browsers by default (Chrome and Firefox) and provide many options for testing and debugging sites for a variety of conditions. For example, you can open a website or launch a web application as if it works on a mobile device, or simulate mobile network lags, or simulate application went offline, you can take a screenshot of the entire site, even for large pages that require scrolling, etc. In fact, Developer Tools require in-depth study in order to truly understand their full power.
In previous articles, I have already considered several practical examples of using DevTools tools in a browser:
- Static analysis of the source code of the website in the browser
- Analysis of sites dynamically generated using JavaScript and sites with loadable content (search for links to video, images, downloadable content)
This small article is devoted to the analysis of POST requests. We will learn to view the data sent by the POST method right in the web browser itself. We will learn how to get them in their source (“raw”) form, as well as in the form of variable values.
I will show the example of the http://spys.one/en/free-proxy-list/ site from the article about proxy. (Actually, this is the simplest example – as more complex examples, try to figure it out yourself, for example, in POST GMail when opening and other actions with emails).
A fragment of the source code of the page shows that the data from the form is sent using the POST method, and the onChange="this.form.submit();" construction is used:
Despite the unusual solution – there is no “Submit” button, and data is sent with any change of the <select> field, this is quite a simple example that can be analyzed by a static code – that is, you can collect the names of all <select>, collect their values string. But I suggest to get acquainted with a much faster way of analysis.
How to see POST data in Google Chrome
So, we open (or refresh if it is already open) the page from which we want to know the data sent by POST. Now open the developer tools (in previous articles I wrote how to do it in different ways, for example, I just press F12):
Now send the data using the form.
Go to the “Network” tab, click on the “Filter” icon and enter method:POST as the filter value:
As can be seen in the previous screenshot, one request was made using the POST method, we click on it:
- Header – all HTTP headers
- Preview of what we received after the rendering (the same is shown on the site page)
- Response – that the site sent in response to our request
- Cookies
- Timing
Since we need to see the data sent by the POST method, we are interested in the Header column.
There are various useful data, for example:
- Request URL – the address where the information from the form is sent
- Form Data – sent values
Scroll to Form Data:
There we see five variables sent and out of value.
If you click on ‘view source’, then the sent data will be shown as a string:
The “view parsed” is the default view, in which the transferred variables and their values are shown to us in a human-readable form.
How to see the data transferred by the POST method in Firefox
In Firefox, everything happens in a very similar way.
Open or refresh the page you need.
Open the Developer Tools (F12).
We send the data from the form.
Go to the ‘Network’ tab and insert method:POST as a filter:
Click on the request you are interested in and in the right part a window will appear with additional information about it:
You will see the values passed in the form if you open the ‘Parameters’ tab:
If you want to receive the sent data as a string, then go back to the “Headers” tab and click the “Change and send again” button, in the opened area, scroll to “Request Body”:
As you already understood, here you can not only copy the POST line, but also edit it and send the request again.
Other Developer Tool Filters
For Chrome, in addition to the method:POST already reviewed, the following filters are available:
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();":
Несмотря на необычность решения — отсутствует кнопка «Отправить», а отправка данных происходит при любом изменении поля <select>, это вполне простой пример, поддающийся анализу статичного кода — то есть можно собрать имена всех <select>'ов, собрать их значения и составить строку. Но я предлагаю познакомиться с намного более быстрым способом анализа.
Как увидеть данные, переданные методом 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:
Кликните на интересующий вас запрос и в правой части появится окно с дополнительной информацией о нём:
Переданные в форме значения вы увидите если откроете вкладку «Параметры»:
Если вы хотите получить отправленные данные в виде строки, то вернитесь во вкладку «Заголовки» и нажмите кнопку «Изменить и снова отправить», в открывшейся области пролистните до «Тело запроса»:
Как вы уже поняли, здесь не только можно скопировать строку POST, но и отредактировать её и отправить запрос заново.
Другие фильтры инструментов разработчика
Для Chrome кроме уже рассмотренного method:POST доступны следующие фильтры:
Как узнать, какой POST запрос отправляется на сервер?
Вопрос, собственно, в названии.
Немного поподробнее: Вроде бы стандартный POST запрос, но почему то через CURL ничего не пашет.
Есть предположения, что отправляются какие-то дополнительные параметры, о которых я не знаю.
Должно по идее отправляться email & password, но почему-то что-то еще требует.
Может, есть какие-нибудь дополнения к барузеру, которые позволяют определить, какие параметры отправляются помимо email & password на определенный сайт?
How can I debug a HTTP POST in Chrome?
I would like to view HTTP POST data that was sent in Chrome.
The data is in memory now, and I have the ability to resubmit the form.
I know that if I resubmit the server will throw an error. Is there anyway I can view the data that is in Chrome’s memory?
8 Answers 8
- Go to Chrome Developer Tools (Chrome Menu -> More Tools -> Developer Tools)
- Choose «Network» tab
- Refresh the page you’re on
- You’ll get list of http queries that happened, while the network console was on. Select one of them in the left
- Choose «Headers» tab
You can filter for HTTP POST requests with the Chrome DevTools. Just do the following:
- Open Chrome DevTools ( Cmd + Opt + I on Mac, Ctrl + Shift + I or F12 on Windows) and click on the «Network» tab
- Click on the «Filter» icon
- Enter your filter method: method:POST
- Select the request you want to debug
- View the details of the request you want to debug
Screenshot
Tested with Chrome Version 53.
You can use Canary version of Chrome to see request payload of POST requests.
Another option that may be useful is a dedicated HTTP debugging tool. There’s a few available, I’d suggest HTTP Toolkit: an open-source project I’ve been working on (yeah, I might be biased) to solve this same problem for myself.
The main difference is usability & power. The Chrome dev tools are good for simple things, and I’d recommend starting there, but if you’re struggling to understand the information there, and you need either more explanation or more power then proper focused tools can be useful!
For this case, it’ll show you the full POST body you’re looking for, with a friendly editor and highlighting (all powered by VS Code) so you can dig around. It’ll give you the request & response headers of course, but with extra info like docs from MDN (the Mozilla Developer Network) for every standard header and status code you can see.