Fiddler что это такое
Fiddler — помощник в отладке JavaScript
На Хабре уже упоминалась данная тулза, но как-то в контексте других тем.
Fiddler is freeware and can debug traffic from virtually any application that supports a proxy, including Internet Explorer, Google Chrome, Apple Safari, Mozilla Firefox, Opera, and thousands more. You can also debug traffic from popular devices like Windows Phone, iPod/iPad, and others.
Итак Fiddler — прокси, который работает с трафиком между вашим компьютером и удаленным сервером, и позволяет просматривать и менять его.
— применение первое:
Собственно раз уж это прокси — то мы можем увидеть все запросы их заголовки, cookie, параметры передаваемые на сервер.
Когда-то, мне довольно часто задавали вопрос back-end разработчики — чем можно посмотреть параметры передаваемые на сервер при отправке формы. Тогда я через консоль firebug довешивал onsubmit на форму, делал serialize и посылал при необходимости форму аяксом. Теперь зная про фидлер — можно не городить костыли.
Кроме того нажав F11 можем отлаживать запросы — добавляя нужные параметры перед посылкой на сервер и подставляя другие ответы от сервера. 
— замена расширения для FF:
Есть замечательное расширение в ФФ для тестирования сайта на медленном соединении (название которого я всегда забываю). Кроме того «у него» есть маленький недостаток — я не могу проверить сайт в других браузерах кроме ФФ.
На помощь спешит: 
— autoResponder+ firebug
То чем я пользуюсь чаще всего и то чем хотелось поделиться больше всего.
Ситуация — у вас есть ссылка на живой сайт в котором нужно дописать/исправить/отлаживать скрипт.
— Знакомая ситуация?
Что делать? Шеф все пропало, я не могу работать в таких условиях!
Спокойно!
Делай раз: 
Сохраняем скрипт у себя на машине. И открываем в редакторе.
Делай два: приводим код к читабельному виду, к примеру с помощью этого сервиса, и сохраняем полученное заменяя обфусцированный код.
Делай три:
— создаем правило в AutoResponder. Теперь если мы обновим в браузере нашу страницу, при этом скрипт который мы отлаживали будет иметь удобоваримый вид — 
Теперь каждый раз когда вы обновляете страницу пока вам будет подменяться и отдаваться ваш локальный файл. Нет необходимости сохранять страницу на машину чтобы добавить или отладить функциональность.
Fiddler = удобный сниффер + прокси сервер
Привет. В данной статье расскажу как и зачем можно изменять HTTP пакеты при отправке на сервер и при получении ответов от сервера.
В статье много практических примеров.
Пример 1. Анализ трафика.
Пользователи вашей сети пользуются вашим прокси-сервером. Вы можете увидеть на какие сайты заходят пользователи, запрещать дальнейшие переходы на эти сайты.
Пример 2. Сбор данных.
Ваши пользователи пользуются через вас некоторыми веб-ресурсами. Например, они вводят vin-номер своего автомобиля на сайте дилера авто и получают в ответ данные этого автомобиля. Вы можете сохранять эти данные в свою базу данных.
Пример 3. Подмена HTTP-пакетов.
Вам нужно изменить для ваших пользователей внешний вид сайта. Вы можете изменить стили сайта, скрывать любые элементы, добавить свои элементы, вырезать определенные слова или заменить их на другие слова, изменить картинку сайта на любую свою.
Пример 4. Подмена POST-данных.
Вам нужно подправить данные передаваемые на веб-сервер через POST-запрос. Существует множество информации передаваемой в POST-запросах. Пример: отправка логина/пароля на сервер в процессе авторизации. Или онлайн тест отправляет на сервер результаты вашего теста.
Установка Fiddler
Установка простая и быстрая.
Настройка Fiddler
В меню File есть опция «Capture Traffic«. По умолчанию опция включена. Это означает что Fiddler прописывает в реестре Windows себя в качестве прокси-сервера. Браузеры Internet Explorer, Edge, Chrome используют данную настройку, а значит HTTP-пакеты от этих браузеров пойдут через Fiddler.
Опция «Keep: All sessions«.
В данном режиме Fiddler не очищает журнал собранных HTTP-пакетов. Если требуется продолжительная работа Fiddler, то при большой нагрузке этих пакетов будет очень много и Fiddler скушает всю доступную оперативную память компьютера. Чтобы этого не случилось переключите в режим «Keep: 100 sessions».
Опция «Decode«.
По умолчанию выключена. В процессе анализа собранных пакетов рекомендуется включить чтобы пакеты автоматически декодировались. Либо можно выделить собранные пакеты через Ctrl+A, вызвать меню нажатием правой кнопки мыши по выделенным пакетам и нажать «Decode Selected Sessions».
Основные настройки
Вкладка «HTTPS».
После установки Fiddler не собирает HTTPS-трафик, это необходимо включить. Ставим галочку в опции «Decrypt HTTPS traffic«. После этого Fiddler сгенерирует самоподписанный сертификат и спросит хотите ли установить данный сертификат. Отвечаем да.
Вкладка «Connections».
Здесь устанавливаем на каком порту Fiddler работает как прокси-сервер. Порт по умолчанию «8888».
После изменения данных настроек необходимо перезапустить программу чтобы настройки вступили в силу.
Вкладка «Gateway».
Здесь устанавливаем куда Fiddler отправляет входящие пакеты, какой прокси использует.
После изменения данных настроек необходимо перезапустить программу чтобы настройки вступили в силу.
Установка сертификатов на Windows устройствах
После того как сгенерированный сертификат скопирован на рабочий стол этот сертификат необходимо установить на каждое устройство которое будет использовать данный Fiddler в качестве прокси-сервера.
Для установки сертификата используем консоль управления MMC: в коммандной строке вводим команду «mmc».
В меню файл выбираем «Добавить или удалить оснастку«. Из доступных оснасток выбираем «Сертификаты» и с помощью кнопки «Добавить» выбираем данную оснастку. Нажимаем «Ок» и выбираем «учетной записи компьютера«. Это нужно чтобы открыть сертификаты которые установлены для всего компьютера, а затем установить сертификат Fiddler именно в это хранилище. Если открыть сертификаты «моей учетной записи пользователя«, то после установки сертификата Fiddler в это хранилище другие пользователи данного компьютера не смогут подключиться к Fiddler.
Установку сертификата производим в «Доверенные корневые центры сертификации».
Если ваши компьютеры находятся в домене, то используйте инструменты домена для установки сертификата каждому пользователю или на каждый компьютер сети.
Анализ трафика
В процессе работы Fiddler сниффит все HTTP-запросы и их обычно много. Для поиска необходимых запросов можно использовать фильтры. Правой кнопкой мыши выбираем лишний запрос, выбираем «Filter Now» и «Hide ‘. ‘» чтобы скрыть запросы к данному домену. Можно удалять вручную выделенные запросы используя кнопку «Delete«.
Кроме использования фильтров можно искать отдельный текст в теле запросов/ответов: «Ctrl+F» для открытия меню поиска. Найденные запросы подсвечиваются по умолчанию желтым цветом.
Изменение данных запросов
В редакторе скриптов есть два основных метода: «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 и нужно эти размеры изменить.
Задача 8: Скрыть элементы по className меняя css-файлы
В данном примере скрываем элементы зная их className в css-файле добавляя свойство «visibility: hidden;«
Задача 9: Заставить страницу открываться в текущем окне
Пример: существует JavaScript, который открывает ссылку в новом окне. Нужно сделать чтобы ссылка открывалась в текущем окне.
Задача 10: Выполнение скриптов для определенных IP
В данном примере меняем текст «Иванов» на «Петров» только для IP = «192.168.0.100«
Задача 11: Меняем css-стили портала
Css-файлы веб-портала можно сохранить на локальном диске, отредактировать и настроить скрипт отдавать стили с локального диска, а не с портала.
Задача 12: Запрет PUT-команды и аналогичных
Запрет команды по ее типу: «PUT«, «DELETE«, etc.
Задача 13: Изменение тела POST-запроса
Изменить тело POST-запроса для заданного портала. При авторизации на данном портале вне зависимости от введенных пользователем данных на веб-портал отправятся данные из скрипта.
Задача 14: Меняем заголовки HTTP-пакета
Заголовки пакетов можно легко редактировать: удалять, добавлять, изменять.
Задача 15: Меняем Cookie
Работа с Cookie: добавление, удаление, редактирование
Управление трафиком с использованием Fiddler
Автор: Ольга Еременко, QA Engineer
При тестировании сайтов или мобильных приложений иногда возникает необходимость не только отловить трафик между клиентом и сервером, но и модифицировать его, чтобы посмотреть, как это обработает бэкенд и что поменяется на UI.
В таких случаях можно использовать прокси-сервер Fiddler — промежуточное звено между клиентом (браузер, мобильное приложение и т. д.) и целевым сервером. Скорее всего, этот инструмент вам известен, но обычно говорят о нем вскользь. Мы по шагам разберем, как проверить с помощью Fiddler, что отобразится на UI при изменении запроса к серверу или возвращаемого ответа.
Предположим, есть сайт dataart.ru. На его главной странице выводится блок с будущими ивентами. Если никаких событий нет, то и секция, соответственно, не должна отображаться вместе с заголовком и вспомогательными иконками.
Но что делать, если контент есть, а проверить кейс с отсутствием будущих ивентов нужно? Один из вариантов — использовать Fiddler.
Итак, моделируем случай, когда на главной странице нет будущих ивентов:
1. Запускаем Fiddler. Чистим Web Sessions list слева.
2. Включаем Capturing в левом нижнем углу, чтобы отлавливать трафик.
3. Обновляем страницу dataart.ru в браузере и видим отправленные запросы в левой части окна Fiddler. Нас интересует запрос GET “/Umbraco/Api/Events/GetEventsForHomePage?tags=8”, который возвращает будущие события для нашей страницы. Если в ответе ничего не приходит, то блок с ивентами, заголовком и вспомогательными иконками не отображаются.
4. В этом случае можно модифицировать либо запрос перед отправкой на сервер, либо ответ на этот запрос перед тем, как его получит клиент.
В Fiddler это можно реализовать с помощью breakpoints. Вручную breakpoints могут задаваться через QuickExec консоль следующим образом:
bpu https://dataart.ru/Umbraco/Api/Events/GetEventsForHomePage?tags=8 — создаем breakpoint перед отправкой нужного запроса на сервер.
bpа https://dataart.ru/Umbraco/Api/Events/GetEventsForHomePage?tags=8 — создаем breakpoint перед возвращением ответа клиенту.
Давайте рассмотрим каждый вариант отдельно.
5. Чтобы изменить запрос перед отправкой на сервер, выполняем команду в QuickExec консоли:
bpu https://dataart.ru/Umbraco/Api/Events/GetEventsForHomePage?tags=8
Обновляем в браузере страницу dataart.ru (в это время Capturing должен быть включен для Fiddler) и видим, что выполнение нужного нам запроса приостановлено. На это указывают иконка красного цвета напротив запроса в интерфейсе Fiddler и отсутствие блока с ивентами на самой веб-странице.
Что можно сделать на этом этапе? Изменить/добавить/удалить заголовки, куки, параметры запроса и т. д. Чтобы в ответе ничего не пришло, нам достаточно, например, во вкладке WebForms указать такое значение параметра tags, которое не должно вернуть никаких результатов.
После необходимых изменений запроса все, что остается сделать — кликнуть на Run to Completion и посмотреть на результат в браузере.
Важный момент: чтобы отключить breakpoints, нужно ввести в QuickExec консоль команды “bpu “ или “bpa“ без аргумента. Перед тем как перейти к рассмотрению следующего варианта, желательно убрать созданный breakpoint для запроса через “bpu “ соответственно.
6. Чтобы изменить ответ на запрос перед возвращением его клиенту, выполняем команду в QuickExec консоли:
bpa https://dataart.ru/Umbraco/Api/Events/GetEventsForHomePage?tags=8
Обновляем в браузере страницу dataart.ru (в это время Capturing должен быть включен для Fiddler) и видим, что отправка клиенту нужного нам ответа приостановлена. На это указывают иконка красного цвета напротив запроса в интерфейсе Fiddler и отсутствие блока с ивентами на самой веб-странице.
Для нашей цели достаточно подменить тело ответа. Переходим во вкладку TextView и вместо всего содержимого вставляем ответ, который приходит в тех случаях, когда нет результатов — <«items»:[],«total»:0>. Но не забываем, что изменять можно разные данные (статус код, заголовки и т. д.).
Теперь все, что остается сделать — кликнуть на Run to Completion и посмотреть на результат в браузере.
Существуют и другие способы подключения breakpoints, об этом можно прочитать в небольшой статье Эрика Лоуренса, создателя Fiddler.
Первые шаги с Fiddler Classic
Привет! После знакомства с Charles Proxy большинство из читателей захотело узнать больше про инструменты мониторинга и анализа HTTP/HTTPS трафика. Расскажем про популярный у многих тестировщиков Fiddler. Описать все возможности Fiddler в одной статье вряд ли получится, поэтому давайте рассмотрим базовые возможности, которыми мы пользуемся каждый день.
Fiddler это:
Кроссплатформенное приложение прокси-сервера для отладки HTTP. Он позволяет пользователю просматривать HTTP, HTTPS и активированный трафик TCP-порта, доступ к которому осуществляется с локального компьютера, на него или через него. Сюда входят запросы и ответы, включая HTTP-заголовки и метаданные (например, файлы cookie, кэширование и кодирование информации), с функциями, предназначенными для помощи разработчикам и тестировщикам в анализе соединений и обмене сообщениями.
Первые шаги
1. Установка и запуск
Для начала необходимо загрузить и установить приложение.
Если у вас операционная система MAC или Linux, то для этого Вам необходимо будет перейти в соответствующий раздел для загрузки специальной версии Fiddler Everywhere. В данной статье мы будем рассматривать работу с Fiddler Classic для ОС Windows.
2. Выбор браузера для сниффинга
3. Начинаем сниффить трафик
В открывшемся диалоговом окне нам необходимо выбрать вкладку HTTPS.
Далее необходимо выбрать чекбокс «Decrypt HTTPS traffic». Далее разрешить установку сертификата.
После того, как мы установили сертификат, давайте в браузере откроем, например, сайт Юлы. В разделе слева мы видим все запросы к хосту api.youla.io и не только. Среди запросов выберем нужный нам запрос, например на выдачу всех товаров: https://api.youla.io/api/v1/products
Для того, чтобы декодировать ответ, необходимо нажать на «Response body is incoded. Click to decode.».
4. Настройка прокси на Android
Далее необходимо выбрать чекбокс «Allow remote computers to connect» и «Capture FTP requests». Fiddler теперь прослушивает порт 8888 (это порт по умолчанию, вы можете изменить его из приведенной выше настройки). Для применения настроек, нажимаем «ОК» и перезапускаем Fiddler.
Теперь нам необходимо настроить наше Android устройство. Возьмите в руки телефон, откройте Свойства сети → Название сети WiFi → Прокси-сервер → Вручную → Имя хоста: *ваш IP* / Порт: *8888* → Сохраните измененные свойства сети (указывается IP адрес вашего ПК, на котором установлен Fiddler).
Перейдем по ссылке http://ipv4.fiddler:8888 и скачаем FiddlerRoot certificate, далее начнется автоматическая загрузка сертификата. Откройте его, задайте имя сертификата, и теперь у вас есть доступ к трафику Android-приложения.
5. Настройка прокси на iOS
Возьмите в руки iPhone, откройте Свойства сети → Название сети WiFi → Прокси-сервер → Вручную → Имя хоста: *Наш IP* / Порт: *8888* → Сохраните измененные свойства сети.
Далее перейдите в Настройки → Профиль загружен → Установить.
Затем перейдите в Настройки → Основные → Об этом устройстве → Доверие сертификатам → найдите установленный сертификат и сделайте его «Доверенным».
Операции над запросами
Справа, в окне, где находятся request и response, располагаются дополнительные инструменты:
Statistics — позволяет получать различные статистики как по одному запросу, так и по пачке выделенных;
Inspectors — дает возможность просматривать в различном виде заголовки и данные запроса;
Filters — позволяет следить за конкретными запросами;
Timeline — визуальное представление выполненных запросов на временной шкале.
Подмена данных в Fiddler Classic
Представим, что нам надо протестировать на клиенте верстку. Нужно проверить, как будет отображаться большое количество бонусов у пользователя. Один из вариантов, который многие предложат: изменить в БД количество бонусов и проверить на клиенте. Да, вы будете правы! Однако на сервере может быть кэш, и необходимо подождать какое-то время, пока количество бонусов не обновится, либо просто подключиться к самой базе и выполнить запрос — это занимает определенное время. Есть вариант проще: изменить ответ от сервера! В Fiddler Classic есть несколько вариантов подмены данных, рассмотрим некоторые из них:
1.1 Automatic Breakpoints
Выполним запрос на пользователя https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8 и после выполнения запроса с клиента, в нашем случае это android приложение Юла, request запроса отображается справа. Мы его можем отредактировать.
У нас имеется приложение и профиль пользователя, у которого сейчас 45 бонусов на счету:
Запрос, в котором приходит это количество бонусов: https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8
В левой части экрана мы видим ответ от сервера.
Найдите нужный параметр — «bonus_cnt»:45. Далее измените значение параметра bonus_cnt, например, на 1 000 000 бонусов, и нажмите «Run to Completion».
На клиенте отобразится новое количество бонусов. Мы богаты!
1.2 AutoResponder
AutoResponder — это некая точка остановки запроса. Когда обнаруживается запрос из заданного списка, он отображается справа и с ним можно взаимодействовать.
Выберем необходимый нам запрос и перетащим его в правую часть.
После перетаскивания будет выглядеть так:
Далее нам надо изменить правило, для этого изменим:
METHOD:PUT EXACT:https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8?adv_id=99d548bc-0ca0-434e-b016-24611313d9de&app_id=android%2F10777&uid=85c9a921c27fb0e8&usr_latitude=55.9332685&usr_longitude=37.5032966×tamp=1607977265
На:
REGEX:.+/user/5e6222bbbedcc5975d2375f8*
Нам не важна часть до «/user/5e6222bbbedcc5975d2375f8» и после, сохраним, нажав Save. Далее правой клавишей мыши по запросу –> Edit Response.
В открывшемся окне идем в RAW, изменяем ответ:
Изменим значение с «45» на «1000000» бонусов:
Сохраним измененный ответ, нажав «Save» и перезапрашиваем экран «Профиль пользователя». Мы богаты:
Моделирование скорости
if (m_SimulateModem) <
// Задержка отправки на 300 мсек на каждый загруженный КБ.
oSession [«просачивание-задержка»] = «300»;
// Задержка приема 150 мс на загруженный КБ.
oSession [«задержка-отклик»] = «150»;
>
Конструирование запросов
Представим, что нам нужно самостоятельно отправить запрос и посмотреть ответ. Для данной задачи есть инструмент Request Builder. С помощью данного инструмента можно самостоятельно конструировать HTTP-запросы. В качестве примера давайте запросим товары с экрана «Главная» в сервисе Юла.
Сначала выберем нужный нам метод, в нашем случае это GET запрос. Далее составим сам запрос: http://api.youla.io/api/v1/products
Следующим шагом — выполним наш запрос, нажав Execute. В левой части мы видим выполненный запрос на товары. Выберем данный запрос и через инструмент Inspectors посмотрим запрос и ответ: