Что может быть худшим кошмаром для разработчика, чем раскрытие исходного кода приложения? Если вы являетесь фронтенд-разработчиком, вы должны быть более обеспокоены, поскольку существуют различные способы раскрытия исходного кода вашего приложения, и одним из наиболее часто упускаемых из виду способов является «сопоставление исходного кода».
Что такое исходная карта?
Исходная карта — это файл, который сопоставляет исходный код файла (например, файл JavaScript) с его сгенерированной версией (например, кодом, который был скомпилирован и минимизирован).
Файл исходной карты имеет имена файлов, номера строк и карту кода, который был скомпилирован из исходного исходного кода. Отображая оригинальный исходный код, исходная карта помогает разработчикам устранять неполадки в построенных программах.
Веб-разработчики используют сопоставление исходного кода для перевода, сокращения и связывания кода JavaScript, чтобы веб-сайты работали быстрее, но это усложняет поиск ошибок. Сопоставление исходного кода может помочь в отладке и создании CSS, графики и других программ.
Нужна ли исходная карта?
Карты исходного кода важны, потому что они позволяют разработчикам устранять неполадки в исходном коде, работая со сгенерированной версией. Это облегчает чтение и понимание кода.
Карты исходного кода позволяют соединить исходный исходный код с созданным кодом, что решает проблему. Когда разработчик отлаживает скомпилированный код, он может использовать исходную карту для просмотра исходного кода, что упрощает выявление и устранение ошибок.
Карты исходного кода также позволяют разработчикам отлаживать код на работающем веб-сайте или в приложении. Они могут использовать инструменты разработчика браузера для просмотра исходного кода и установки точек останова точно так же, как при локальной разработке.
Исходная карта и последствия для безопасности
Исходная карта, безусловно, полезна для отладки, но также вызывает проблемы с безопасностью. Он может раскрывать исходный код программы или веб-сайта, что может раскрывать такие вещи, как пароли или личные данные.
- Информация, включенная в исходный код файла, такая как пароли или другие секреты, может быть раскрыта, если для чтения файла будет использоваться исходная карта.
- Злоумышленнику, ищущему уязвимости, могут быть полезны исходные карты, поскольку они показывают структуру и организацию программного обеспечения.
- Неправильно настроенная исходная карта может открыть исходный код для злоумышленников или вредоносных третьих лиц.
- Когда злоумышленник получает исходную карту, он может использовать ее для реконструкции исходных программ, что может привести к обнаружению недостатков безопасности или других личных деталей.
- С помощью исходных карт злоумышленники могут вставлять вредоносный код в легитимные файлы, потенциально предоставляя им привилегии выполнения на компьютере жертвы.
Как не генерировать исходную карту в продакшене?
Процесс предотвращения создания исходной карты во время сборки и компиляции вашего кода зависит от используемого вами инструмента или инфраструктуры. Некоторые примеры следующие:
// Webpack module.exports = { devtool: 'none', // ... }; // Babel babel --sourceMaps false script.js //typescript { "compilerOptions": { "sourceMap": false, //... }, //... } //Rollup export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'cjs', sourcemap: false } };
Как не генерировать исходную карту для приложения React?
- Установите «GENERATE SOURCEMAP=false» в файле .env в корне каталога вашего проекта.
2. Изменить команду сценариев React
// package.json "build": "GENERATE_SOURCEMAP=false react-scripts build"
3. Вы можете использовать конфигурацию веб-пакета, как обсуждалось выше.
Есть ли способ безопасного сохранения исходных карт и доступа к ним?
Исходные карты могут быть защищены от несанкционированного доступа и раскрытия важных данных путем хранения во внешних файлах, защищенных паролем.
Следование этим инструкциям позволит вам безопасно хранить исходные карты во внешних файлах:
- Воспользуйтесь преимуществами инструмента сборки, который дает вам контроль над тем, куда записывается файл исходной карты. Например, опция dev tool в webpack позволяет указать, куда записывается исходный файл карты.
- Защитите исходный файл карты, загрузив его на файлообменник, который предлагает шифрование. Права исходного файла карты, например, могут быть ограничены с помощью AWS S3, чтобы только определенные люди могли получить к нему доступ.
- Используйте инструмент авторизации, чтобы ограничить доступ к исходному файлу карты, например JSON Web Tokens (JWT).
- Используйте политику безопасности содержимого (CSP): CSP — это функция безопасности, которая помогает обнаруживать и смягчать определенные атаки, такие как межсайтовый скриптинг (XSS) и атаки с внедрением данных. Его можно использовать для ограничения доступа к исходному файлу карты, указав, какие источники имеют право загружать содержимое в браузере.
Стоит отметить, что эти меры могут помочь в защите исходного файла карты, но не могут обеспечить полную безопасность исходного кода. Рекомендуется просмотреть кодовую базу и удалить личные данные.
Как отлаживать свой код без исходной карты?
- Напечатайте код красиво. Некоторые минификаторы и транспиляторы включают пробелы и комментарии, чтобы сделать код более разборчивым. Это упрощает понимание кода и отладку.
- Установка точек останова и выполнение кода с помощью отладчика. Многие современные браузеры имеют встроенные инструменты разработчика. Отладчик может помочь вам понять поток кода и найти ошибки, даже если он не так читаем, как исходный код.
- Используйте декомпилятор. Декомпилятор может превратить скомпилированный код в удобочитаемый код. Полученный код может быть проще для понимания и устранения неполадок.
- Знание структуры кода может помочь вам понять его без исходной карты. Даже если код минимизирован, вы можете обнаружить и отладить метод, который обрабатывает функцию.
- Ведение журнала. Используйте команды console.log для вывода значений переменных, чтобы понять поток кода и обнаружить ошибки.
Спасибо за прочтение. Следите за советами и контентом.
Подключаемся по LinkedIn и Twitter.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.