Используйте HTTPS для локальной разработки

Мод Налпас

В большинстве случаев http://localhost ведет себя как HTTPS в целях разработки. Однако существуют некоторые особые случаи , такие как пользовательские имена хостов или использование защищенных cookie в разных браузерах, когда вам необходимо явно настроить свой сайт для разработки так, чтобы он работал как HTTPS, чтобы точно отразить работу вашего сайта в рабочей среде. (Если ваш рабочий сайт не использует HTTPS, сделайте приоритетом переход на HTTPS ).

На этой странице объясняется, как запустить свой сайт локально с использованием HTTPS.

Для получения кратких инструкций см. краткое справочное руководство по mkcert .**

Запустите свой сайт локально с использованием HTTPS и mkcert (рекомендуется).

Для использования HTTPS с вашим локальным сайтом разработки и доступа к https://localhost или https://mysite.example (пользовательское имя хоста) вам необходим TLS-сертификат, подписанный организацией, которой доверяют ваше устройство и браузер, называемой доверенным центром сертификации (CA) . Браузер проверяет, подписан ли сертификат вашего сервера разработки доверенным центром сертификации, прежде чем устанавливать HTTPS-соединение.

Мы рекомендуем использовать mkcert , кроссплатформенный центр сертификации, для создания и подписи сертификата. Другие полезные параметры см. в разделе «Запуск сайта локально с HTTPS: другие варианты» .

Многие операционные системы включают библиотеки для создания сертификатов, например, openssl . Однако они сложнее и менее надежны, чем mkcert, и не обязательно являются кроссплатформенными, что делает их менее доступными для больших команд разработчиков.

Настраивать

  1. Установите mkcert (только один раз).

    Следуйте инструкциям по установке mkcert в вашей операционной системе. Например, в macOS:

    brew install mkcert
brew install nss # if you use Firefox

  2. Добавьте mkcert в список локальных корневых центров сертификации.

    В терминале выполните следующую команду:

    mkcert -install

    Это создаёт локальный центр сертификации (ЦС). Ваш локальный ЦС, созданный с помощью mkcert, будет считаться доверенным только локально , на вашем устройстве.

  3. Сгенерируйте сертификат для вашего сайта, подписанный mkcert.

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

    Затем выполните:

    mkcert localhost

    Если вы используете пользовательское имя хоста, например mysite.example , выполните следующую команду:

    mkcert mysite.example

    Эта команда выполняет две вещи:

    • Генерирует сертификат для указанного вами имени хоста.
    • Давайте подпишем сертификат с помощью mkcert.

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

  4. Настройте свой сервер для использования HTTPS с помощью только что созданного TLS-сертификата.

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

    👩🏻‍💻 С помощью узла:

    server.js (замените {PATH/TO/CERTIFICATE...} и {PORT} ):

    const https = require('https');
const fs = require('fs');
const options = {
  key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
  cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
};
https
  .createServer(options, function (req, res) {
    // server code
  })
  .listen({PORT});

    👩🏻‍💻 С помощью http-сервера :

    Запустите сервер следующим образом (замените {PATH/TO/CERTIFICATE...} ):

    http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem

    -S запускает сервер с использованием HTTPS, -C устанавливает сертификат, а -K устанавливает ключ.

    👩🏻‍💻 С сервером разработки React:

    Отредактируйте файл package.json следующим образом, заменив {PATH/TO/CERTIFICATE...} :

    "scripts": {
"start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"

    Например, если вы создали сертификат для localhost в корневом каталоге вашего сайта:

    |-- my-react-app
    |-- package.json
    |-- localhost.pem
    |-- localhost-key.pem
    |--...

    Тогда ваш скрипт start должен выглядеть примерно так:

    "scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"

    👩🏻‍💻 Другие примеры:

  5. Откройте в браузере https://localhost или https://mysite.example , чтобы убедиться, что ваш сайт работает локально по протоколу HTTPS. Вы не увидите никаких предупреждений в браузере, потому что ваш браузер доверяет mkcert как локальному центру сертификации.

краткий справочник mkcert

краткий справочник mkcert

Чтобы запустить локальный сайт разработки с использованием HTTPS:

  1. Настройте mkcert.

    Если вы еще этого не сделали, установите mkcert, например, на macOS: 

    brew install mkcert

    Инструкции по установке mkcert для Windows и Linux см. в соответствующем разделе.

    Затем создайте локальный центр сертификации: 

    mkcert -install

  2. Создайте доверенный сертификат. 

    mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

    Это создаёт действительный сертификат, который mkcert автоматически подписывает.

  3. Настройте свой сервер разработки для использования HTTPS и сертификата, созданного на шаге 2.

Теперь вы можете получить доступ к https://{YOUR HOSTNAME} в своем браузере без предупреждений.

</div>

Запустите свой сайт локально с использованием HTTPS: другие варианты

Ниже описаны другие способы настройки сертификата. Как правило, они сложнее или рискованнее, чем использование mkcert.

Сертификат, подписанный собственноручно

Вы также можете отказаться от использования локального центра сертификации, такого как mkcert, и вместо этого подписать свой сертификат самостоятельно . У такого подхода есть несколько недостатков:

  • Браузеры не доверяют вам как центру сертификации, поэтому они будут показывать предупреждения, которые вам нужно будет обходить вручную. В Chrome вы можете использовать флаг #allow-insecure-localhost чтобы автоматически обходить это предупреждение на localhost .
  • Это небезопасно, если вы работаете в незащищенной сети.
  • Это не обязательно проще или быстрее, чем использование локального центра сертификации, такого как mkcert.
  • Самоподписанные сертификаты будут вести себя не совсем так же, как доверенные сертификаты.
  • Если вы не используете этот метод в контексте браузера, вам необходимо отключить проверку сертификатов для вашего сервера. Забыть включить её повторно в рабочей среде приведёт к проблемам безопасности.
Скриншоты предупреждений, которые браузеры отображают при использовании самоподписанного сертификата.
Предупреждения, которые браузеры отображают при использовании самоподписанного сертификата.

Если вы не укажете сертификат, параметры HTTPS сервера разработки React и Vue создадут самоподписанный сертификат автоматически. Это быстро, но сопряжено с теми же предупреждениями браузера и другими недостатками самоподписанных сертификатов. К счастью, вы можете использовать встроенную в фронтенд-фреймворки опцию HTTPS и указать локально доверенный сертификат, созданный с помощью mkcert или аналогичного инструмента. Для получения дополнительной информации см. пример использования mkcert с React .

Почему браузеры не доверяют самоподписанным сертификатам?

Если вы открываете локально работающий сайт в браузере, используя HTTPS, ваш браузер проверяет сертификат вашего локального сервера разработки. Увидев, что вы сами подписали сертификат, он проверяет, зарегистрированы ли вы в качестве доверенного центра сертификации. Поскольку вы не зарегистрированы, ваш браузер не может доверять сертификату и отображает предупреждение о том, что ваше соединение небезопасно. Если вы продолжите, соединение HTTPS все равно будет установлено, но вы делаете это на свой страх и риск.

Почему браузеры не доверяют самоподписанным сертификатам: диаграмма.
Почему браузеры не доверяют самоподписанным сертификатам.

Сертификат, подписанный официальным центром сертификации.

Также можно использовать сертификат, подписанный официальным центром сертификации. Однако это сопряжено со следующими сложностями:

  • При этом потребуется больше подготовительной работы, чем при использовании локального центра сертификации, например, mkcert.
  • Вам необходимо использовать действительное доменное имя, которое находится под вашим контролем. Это означает, что вы не можете использовать официальные центры сертификации для следующих целей:

Обратный прокси

Ещё один вариант доступа к локально работающему сайту по протоколу HTTPS — использование обратного прокси-сервера, например, ngrok . Однако это сопряжено со следующими рисками:

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

Если вы используете пользовательское имя хоста, например mysite.example в Chrome, вы можете использовать флаг, чтобы заставить браузер считать mysite.example безопасным. Избегайте этого по следующим причинам:

  • Необходимо быть на 100% уверенным, что mysite.example всегда разрешается в локальный адрес. В противном случае существует риск утечки учетных данных для работы в производственной среде.
  • Этот флаг работает только в Chrome, поэтому отладка в других браузерах невозможна.

Выражаю огромную благодарность всем рецензентам и участникам за их вклад и отзывы, особенно Райану Сливи, Филиппо Вальсорде, Милице Михайлови и Роуэну Меревуду. 🙌

Фоновое изображение для главной страницы предоставлено @anandu на Unsplash , отредактировано.