LIMB
Вход Регистрация

тема

Почему ты никогда не использовал devtools при тестировании сайтов?

YmbMember · · 2 ответов · 315 просмотров

Не удалось прогрузить медиа

Вступление
Эйо! С вами YmbMember. Сидел я, и думал про что же написать статью на форум. И понял, что можно было бы ее посвятить такому мощному инструменту как devtools. Я очень удивился, когда в интернете не нашёл нормального обзора на него глазами веб пентестера. И тут я понял, что это надо исправить. В этой статье я покажу как я использую девтулз и поделюсь своим опытом тестированием с ним. Начнем

Elements
Будем идти по очереди. Основное предназначение вкладки elements нужно для просмотра и редактирования HTML страницы и CSS стилей. Это особенно полезно для веб дизайнеров и фронтенд разработчиков. Однако она имеет еще пару фишек, какие достаточно полезны под наши цели
Не удалось прогрузить медиа

Разберем по порядку

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

Вы встречали ситуацию, когда, например, на том самом сайте когда вы его открываете с телефона меньше функционала чем на ПК? Бывает и наоборот, иногда какой-то функционал прячут специально под телефоны. Часто веб пентестерыы забывают про это и теряют интересные места для тестирования

А иногда разработчики вообще дают доступ к запрошенному ресурсу, базируясь на User Agent’e. Вот тут уже и появляются проблемы
Возьмем пример реального функционала, какой базируется на юзер агенте. Это скачка виндового iso образа с сайта майкрософт:

Не удалось прогрузить медиа


То Есть мы можем скачать оригинальный исошник без какого-то installation media только с не ПКшного юзер агента. Не знаю почему они так сделали, ну да ладно …

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

Это значит, что на сайте как минимум есть потенциальная XSS’ка, и скорее всего, букет других уязвимостей.

Так же мы можем ставить брейк поинты. Лично я никогда во вкладке elements ими не пользовался, но вдруг вам пригодится
Не удалось прогрузить медиа


Console
Консоль используется для выполнения своего javascript кода и в консольке нам показываются какие-то сообщения, какие оставили нам разработчики. В основном, это сообщения об ошибках. Но иногда такие сообщения нам могут дать понимание, как устроен тот или иной функционал и не только.

Мы можем выполнять любой произвольный js код. Например, пингбекнуть через fetch какой-то эндпоинт чтобы проверить на реакцию CORS’а. Но этой функцией я пользуюсь очень редко. В консольку я захожу только чтобы глянуть на наличие сообщений/ошибок ну и если использую xss пейлоады с console.log глянуть отстук

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

Не удалось прогрузить медиа

Бывали логи и поинтереснее, но я уже не помню где конкретно. Суть вы уловили. Просто запомните как аксиому “Всегда смотреть консольку, возможно разработчики оставили нам какое-то сообщение”

Network
Через нее можно увидеть все HTTP/HTTPS-запросы, какие делает страница или браузер. Я ней часто пользуюсь, даже когда под рукой запущен burp suite. Например, чтобы посмотреть кэшируются ли статичные файлы

Не удалось прогрузить медиа


Ну, думаю, тут все понятно. Советую включить Preserve log, чтобы при следующем запросе логи не стирались. Вы также можете скачать все логи в .har и посмотреть через https://jam.dev/utilities/har-file-viewer. Тут интерфейс намного удобнее

Не удалось прогрузить медиа


Также очень удобно, что тут можно копировать запросы сразу в curl команду. Этой фичей я пользуюсь стабильно
Не удалось прогрузить медиа

У вас возможно возникнет вопрос “А возможно ли произвольно отправлять свои HTTP запросы через devtools?” Разочарую вас, но полноценно нет. Максимум через fetch в консольке. Но это очень не практично и не удобно

Sources
С этой вкладкой, вы частично знакомы, если читаете мои статьи. В статье где мы смотрели на .js.map файлы (https://forum.LIMB.cc/threads/1520/), мы использовали ее, но напрямую не знакомились. Давайте сделаем это
Не удалось прогрузить медиа

В этой вкладке собраны инструменты для просмотра, отладки и управления исходным кодом. У вас может возникнуть вопрос “А как хром делает карту страницы, если нету исходного кода фронт енда?” Дело в том, что он просто собирает ее сам. Хоть и код минифицирован, все равно это может дать какую-то информацию

Еще одна важная фича – брейк поинты. Если пробовать дебажить даже минифицированный js файл – можно понять примерную логику, пусть и тускловато
Не удалось прогрузить медиа

Application

Вы наверное могли заметить, что я пропустил вкладки Performance и Memory. Они нужны для анализа производительности страницы, что для наших целей не нужно от слова совсем.

Вкладка Application отвечает за все данные, которые сохраняются сайтом в браузере
Не удалось прогрузить медиа

Что нас тут может заинтересовать – вкладка Cookies и Local Storage, Session storage

Раздел куки позволяет играть с куками. Я довольно часто использую эту вкладку а расширениями по типу edit this cookie пользуюсь очень редко. Как по мне, конфигурировать куки через девтулз намного удобнее и приятнее

Local Storage/session storage

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

Угнать данные с локал сторедж намного проще чем куки. В наше время даже самые мелкие сайты ставят флаг onlyhttp=true, что делает кражу куков через ХСС практически невозможной. Но у ЛС такого нету

Не удалось прогрузить медиа


Code:
<script>alert(JSON.stringify(Object.fromEntries(Object.entries(localStorage))))</script>

Иногда там хранятся чувствительные данные, кража каких поднимет импакт. Так же local storage часто хранят параметры по типу userid на стороне клиента для получения данных без должной проверки на сервере. И такое встречается не редко.

Через бурп сьют локал сторедж не посмотреть, поэтому вы возможно упустили много багов

Кроме этого я больше ничего в этой вкладке не использовал, так как все остальное не несет никакой пользы под наши цели
👍29 ❤️8 💯6
ОтветYmbMember

от пример из недавно тестируемого мною веб приложения

И что тут интересного, можете прояснить чайникам?

ОтветYmbMember

Бывали логи и поинтереснее, но я уже не помню где конкретно. Суть вы уловили. Просто запомните как аксиому “Всегда смотреть консольку, возможно разработчики оставили нам какое-то сообщение”

А надо было найти и показать примеры... Какие сообщения, чем помогут.


ОтветYmbMember

Например, чтобы посмотреть кэшируются ли статичные файлы

Цель? Перегрузить сервер стрессером или что это даст, если статика не кэшируется?


ОтветYmbMember

Также очень удобно, что тут можно копировать запросы сразу в curl команду. Этой фичей я пользуюсь стабильно

Например? Случаи будут практические?


ОтветYmbMember

Угнать данные с локал сторедж намного проще чем куки.

Почему?


ОтветYmbMember

Через бурп сьют локал сторедж не посмотреть, поэтому вы возможно упустили много багов

Каких именно багов, есть примеры?
👍2
nice share thank you

Гостевой просмотр. Чтобы отвечать и ставить реакции, войдите или зарегистрируйтесь.