В современном веб-разработке распространена практика минификации JavaScript и TypeScript кода. Это помогает снизить размер файлов, ускорить загрузку страниц и повысить производительность сайтов. Однако при этом исходный код становится трудночитаемым и практически непригодным для анализа или отладки. Для решения этой проблемы используют так называемые sourcemap файлы, которые сопоставляют минифицированный код с оригинальным исходником. Sourcemap – это своего рода карта, благодаря которой можно быстро увидеть читаемый исходный код прямо в браузере при отладке.
Несмотря на удобство просмотра таких карт в инструментах разработчика современных браузеров, скачивание целого проекта с восстановленным исходным кодом сразу на локальный компьютер обычно затруднительно. Это связано с тем, что браузеры обычно позволяют просматривать исходник по отдельным файлам, но не предоставляют возможности скачать весь набор исходников одномоментно. Особенно актуальна эта проблема для крупных сайтов с сотнями JavaScript файлов и сотнями sourcemap-ов. Попытки обойти ограничения с помощью расширений браузера, таких как ResourcesSaverExt для Google Chrome, зачастую оказываются неэффективными, особенно с учетом популярных сборщиков типа Webpack. Кроме того, технические ограничения браузеров ограничивают функции подобных расширений.
В связи с этим разработчики и исследователи начали искать альтернативные методы для массового перехвата и скачивания исходников через sourcemaps. Одним из наиболее эффективных решений стала комбинация использования Mitmproxy и Sourcemapper. Mitmproxy – это прокси-сервер с открытым исходным кодом, позволяющий перехватывать и анализировать сетевой трафик. С его помощью можно зарегистрировать все запросы браузера, включая те, которые ведут к sourcemap файлам (.js.
map). Скачанные URL можно затем обработать с помощью Sourcemapper – инструмента, который автоматически загружает sourcemaps и реконструирует оригинальный исходный код. Такой подход отлично подходит для комплексного скачивания больших массивов исходников, восстанавливаемых из sourcemap-ов. Для начала работы требуется установить Mitmproxy. Это бесплатная и мощная среда, которая работает через терминал и может обрабатывать все сетевые запросы, направляемые через прокси.
Настроив свой компьютер или браузер на использование этого прокси, вы сможете наблюдать весь исходящий и входящий трафик в режиме реального времени. Когда вы открываете целевой сайт, Mitmproxy фиксирует все адреса и запросы, в том числе и ссылки на sourcemap файлы, если они доступны публично на сервере. После успешного захвата трафика полезно очистить текущие сессии в Mitmproxy и повторно открыть интересующий вас сайт. При этом важно открыть вкладку с исходным кодом в браузере (Sources в Chrome или Debugger в Firefox), чтобы действительно активировалась загрузка sourcemap-ов. Тогда в списке потоков запросов вы увидите множество новых файлов с расширением .
js.map. Следующим шагом необходимо сохранить эти данные – Mitmproxy позволяет сохранить потоки трафика в отдельный dump файл, который затем можно анализировать более подробно. Чтобы извлечь из сохранённого дампа только нужные URL-адреса sourcemap файлов, существует способ написания небольшого Python-скрипта. Он фильтрует запросы по нужному домену и по окончанию URL на «.
map», так как стандартные sourcemap файлы имеют именно это расширение. Запуск mitmdump с указанным скриптом и ссылкой на dump-файл выведет список всех файлов sourcemap, связанных с вашим целевым сайтом. Этот метод позволяет аккуратно и быстро получить список доступных для скачивания исходников без лишнего мусора из других запросов. Далее наступает самый важный этап – передача списка URL в приложении Sourcemapper. Этот инструмент загружает каждый sourcemap файл, а затем автоматически реконструирует оригинальные JavaScript или TypeScript файлы, которые разработчики изначально писали.
Вы можете указывать, куда сохранить восстановленные исходники, что удобно для дальнейшего анализа или разработки. При работе с большим числом sourcemap ссылок процесс можно автоматизировать через терминал, используя конвейер команд, где список URL напрямую передается Sourcemapper для обработки всех ссылок подряд. Стоит отметить, что при восстановлении исходников структура папок, созданная Sourcemapper, может немного отличаться от той, что вы видите через браузерные инструменты разработчика. Неструктурированность и разница в вложенности файлов – распространенный вопрос при использовании подобных инструментов. В большинстве случаев это не мешает пониманию и просмотру исходного кода, но если необходима точная консистентность с исходной структурой проекта, стоит рассмотреть дополнительные настройки и скрипты для постобработки.
Важно понимать, что публичное размещение sourcemap файлов означает риск раскрытия вашего оригинального исходного кода. Это может быть нежелательно с точки зрения безопасности и защиты интеллектуальной собственности. Поэтому многие современные инструменты сборки и деплоя предоставляют опции для исключения sourcemaps из общего доступа либо их хранения в недоступных публично местах. Если вы разрабатываете собственные проекты и желаете защитить код от легко доступного анализа, рассмотрите отключение генерации публичных sourcemap файлов или ограничьте доступ к ним. Некоторые разработчики и энтузиасты даже рассматривали вариант модификации исходного кода браузеров для автоматического сохранения sourcemap файлов локально при их загрузке.
Это могло бы обеспечить наиболее точное и удобное получение исходников без необходимости работы со сторонними прокси и утилитами. Но подобные подходы требуют глубоких знаний и значительных усилий, так как процесс сборки и отладки браузеров сложен и ресурсоемок. В целом, описанная комбинация утилит Mitmproxy и Sourcemapper представляет собой мощный и гибкий метод для разработчиков, исследователей и специалистов по безопасности, которым необходимо систематически загружать и анализировать исходный код веб-приложений из минифицированных сборок. Это упрощает процесс аудита, поиска ошибок и понимания архитектуры сложных сайтов и приложений. Учитывая развитие технологий, будущие версии браузеров и инструментов разработки могут предоставить расширенные возможности работы с sourcemap файлами, включая пакетное скачивание и интегрированные средства для экспорта исходного кода.
Пока что описанная методика является одной из лучших практик для решения поставленной задачи. Таким образом, знание и умение работать с sourcemap файлами – важный навык в современном веб-разработке и безопасности. Это открывает доступ к качественному исходному коду, помогая лучше понимать поведение и устройство сложных приложений. Использование Mitmproxy и Sourcemapper помогает автоматизировать и упростить этот процесс, делая его доступным каждому, кто заинтересован в эффективном анализе и восстановлении оригинального JavaScript и TypeScript кода.
