Source map — это файл (обычно с расширением .map), который сопоставляет ваш минифицированный собранный JavaScript с исходным кодом, который вы на самом деле писали. Когда сборщик превращает сотню читаемых .ts-файлов в один нечитаемый main.abc123.js, source map — это ключ, который разворачивает всё обратно.
Во время отладки это безумно удобно. И это становится проблемой, когда source map открыт в продакшене.
Что такое source map простыми словами
Когда вы запускаете продакшен-сборку, ваш сборщик (webpack, Vite, esbuild, Next.js) делает с кодом несколько вещей: убирает пробелы, сокращает имена переменных, склеивает файлы и вырезает комментарии. Результат маленький и быстрый, но абсолютно нечитаемый.
Source map записывает, как именно прошло это преобразование. Это JSON-файл, содержащий имена ваших исходных файлов, исходный текст и таблицу соответствий, которая связывает каждую позицию в минифицированном выводе с конкретной строкой и столбцом в вашем оригинальном коде.
Обычно внизу бандла есть комментарий, указывающий на него:
//# sourceMappingURL=main.abc123.js.map
Когда DevTools видит эту строку, он подгружает .map-файл и восстанавливает ваш исходный код во вкладке Sources.
Зачем сборщики их создают
Отлаживать минифицированный код невозможно — стектрейс, указывающий на main.js:1:48211, не говорит вам ничего. Source maps существуют, чтобы ошибки, точки останова и вкладка Sources в DevTools показывали ваши оригинальные файлы. Это удобство для разработки, и большинство сборщиков создают их по умолчанию.
Чем они опасны в продакшене
Source map содержит ваш исходный код — не намёк на него, а целиком. Если .map-файл доступен публично, любой может:
- Прочитать весь исходник вашего фронтенда в DevTools: имена компонентов, комментарии, бизнес-логику.
- Гораздо быстрее находить захардкоженные секреты — потому что он читает нормальный код, а не минифицированную кашу.
- Понять структуру приложения и найти слабые места для атаки.
Минификацию часто путают с защитой. Это не защита — а открытый source map убирает даже этот тонкий слой, возвращая оригинал.
Как понять, открыты ли ваши source maps
Откройте задеплоенный сайт, затем DevTools → Sources. Если вы видите оригинальные .ts / .tsx-файлы вместо минифицированного кода — ваши source maps публичны.
Или проверьте напрямую:
curl -I https://yoursite.com/_next/static/chunks/main.js.map
# HTTP 200 = открыты. HTTP 404 = безопасно.
Source maps — это всегда плохо?
Нет — сами по себе source maps нормальны и полезны. Проблема именно в их публикации в открытый доступ. Есть безопасная золотая середина, которой пользуется большинство продакшен-команд: генерировать source maps при сборке, загружать их в систему отслеживания ошибок (Sentry, Datadog), чтобы по-прежнему получать читаемые стектрейсы, но не отдавать их в открытый веб. Вы получаете отладку без раскрытия кода.
Как их отключить
Фикс зависит от вашего фреймворка — обычно это изменение одной строки в конфиге. Полная пошаговая инструкция для Next.js, Vite, CRA, Astro, Nuxt, Angular и WordPress здесь:
→ Как правильно отключить source maps в продакшене
После изменения конфига и редеплоя просканируйте свой URL через vibeblame, чтобы убедиться, что .map-файлов больше нет.