Что может быть худшим кошмаром для разработчика, чем раскрытие исходного кода приложения? Если вы являетесь фронтенд-разработчиком, вы должны быть более обеспокоены, поскольку существуют различные способы раскрытия исходного кода вашего приложения, и одним из наиболее часто упускаемых из виду способов является «сопоставление исходного кода».

Что такое исходная карта?

Исходная карта — это файл, который сопоставляет исходный код файла (например, файл JavaScript) с его сгенерированной версией (например, кодом, который был скомпилирован и минимизирован).

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

Веб-разработчики используют сопоставление исходного кода для перевода, сокращения и связывания кода JavaScript, чтобы веб-сайты работали быстрее, но это усложняет поиск ошибок. Сопоставление исходного кода может помочь в отладке и создании CSS, графики и других программ.

Нужна ли исходная карта?

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

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

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

Исходная карта и последствия для безопасности

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

  1. Информация, включенная в исходный код файла, такая как пароли или другие секреты, может быть раскрыта, если для чтения файла будет использоваться исходная карта.
  2. Злоумышленнику, ищущему уязвимости, могут быть полезны исходные карты, поскольку они показывают структуру и организацию программного обеспечения.
  3. Неправильно настроенная исходная карта может открыть исходный код для злоумышленников или вредоносных третьих лиц.
  4. Когда злоумышленник получает исходную карту, он может использовать ее для реконструкции исходных программ, что может привести к обнаружению недостатков безопасности или других личных деталей.
  5. С помощью исходных карт злоумышленники могут вставлять вредоносный код в легитимные файлы, потенциально предоставляя им привилегии выполнения на компьютере жертвы.

Как не генерировать исходную карту в продакшене?

Процесс предотвращения создания исходной карты во время сборки и компиляции вашего кода зависит от используемого вами инструмента или инфраструктуры. Некоторые примеры следующие:

// 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?

  1. Установите «GENERATE SOURCEMAP=false» в файле .env в корне каталога вашего проекта.

2. Изменить команду сценариев React

// package.json
"build": "GENERATE_SOURCEMAP=false react-scripts build"

3. Вы можете использовать конфигурацию веб-пакета, как обсуждалось выше.

Есть ли способ безопасного сохранения исходных карт и доступа к ним?

Исходные карты могут быть защищены от несанкционированного доступа и раскрытия важных данных путем хранения во внешних файлах, защищенных паролем.

Следование этим инструкциям позволит вам безопасно хранить исходные карты во внешних файлах:

  1. Воспользуйтесь преимуществами инструмента сборки, который дает вам контроль над тем, куда записывается файл исходной карты. Например, опция dev tool в webpack позволяет указать, куда записывается исходный файл карты.
  2. Защитите исходный файл карты, загрузив его на файлообменник, который предлагает шифрование. Права исходного файла карты, например, могут быть ограничены с помощью AWS S3, чтобы только определенные люди могли получить к нему доступ.
  3. Используйте инструмент авторизации, чтобы ограничить доступ к исходному файлу карты, например JSON Web Tokens (JWT).
  4. Используйте политику безопасности содержимого (CSP): CSP — это функция безопасности, которая помогает обнаруживать и смягчать определенные атаки, такие как межсайтовый скриптинг (XSS) и атаки с внедрением данных. Его можно использовать для ограничения доступа к исходному файлу карты, указав, какие источники имеют право загружать содержимое в браузере.

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

Как отлаживать свой код без исходной карты?

  1. Напечатайте код красиво. Некоторые минификаторы и транспиляторы включают пробелы и комментарии, чтобы сделать код более разборчивым. Это упрощает понимание кода и отладку.
  2. Установка точек останова и выполнение кода с помощью отладчика. Многие современные браузеры имеют встроенные инструменты разработчика. Отладчик может помочь вам понять поток кода и найти ошибки, даже если он не так читаем, как исходный код.
  3. Используйте декомпилятор. Декомпилятор может превратить скомпилированный код в удобочитаемый код. Полученный код может быть проще для понимания и устранения неполадок.
  4. Знание структуры кода может помочь вам понять его без исходной карты. Даже если код минимизирован, вы можете обнаружить и отладить метод, который обрабатывает функцию.
  5. Ведение журнала. Используйте команды console.log для вывода значений переменных, чтобы понять поток кода и обнаружить ошибки.

Спасибо за прочтение. Следите за советами и контентом.

Подключаемся по LinkedIn и Twitter.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.