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

Иногда может потребоваться использовать протокол HTTPS для локального сайта разработки. Средства и советы, позволяющие сделать это быстро и безопасно.

Jan 25, 2021

Available in: English, Español, Português, 中文, 日本語, and 한국어

Appears in: Безопасность и надежность

Maud Nalpas

TwitterGitHub

*Все, что говорится в этой публикации об узле localhost справедливо и для узлов 127.0.0.1 и [::1], так как последние означают адрес локального компьютера, также называемый петлевым адресом. Кроме того, для простоты мы не будем указывать номера портов.*Поэтому текст http://localhost следует читать как http://localhost:{ПОРТ} или http://127.0.0.1:{ПОРТ}.

Если на вашем рабочем веб-сайте используется протокол HTTPS, вам, возможно, потребуется, чтобы локальный сайт разработки вел себя как HTTPS-сайт (если на вашем рабочем веб-сайте не используется протокол HTTPS, включите переход на протокол HTTPS в список своих приоритетных задач). В большинстве случаев вы можете быть уверены, что узел http://localhost будет вести себя как HTTPS-сайт. Тем не менее в некоторых случаях может потребоваться, чтобы ваш сайт работал в локальной среде с использованием протокола HTTPS. Давайте посмотрим, как это сделать.

⏩ Вам нужны краткие инструкции или вы уже были здесь раньше? Перейти к шпаргалке.

Запуск сайта в локальной среде с поддержкой протокола HTTPS с помощью mkcert (рекомендуемый способ) #

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

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

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

Средство mkcert (и аналогичные инструменты) дает несколько указанных ниже преимуществ.

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

Мы рекомендуем создавать сертификаты TLS для локальной разработки с помощью средства mkcert. Но вы можете изучить и другие способы.

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

Предупреждение #

Настройка #

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

   Следуйте инструкциям по установке средства mkcert в используемой вами операционной системе. Пример для macOS:

   brew install mkcert
   brew install nss # если вы используете Firefox

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

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

   mkcert -install

   В результате будет создан локальный центр сертификации (ЦС). Локальный ЦС, созданный средством mkcert, будет доверенным только локально на вашем устройстве.

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

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

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

   mkcert localhost

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

   mkcert mysite.example

   Приведенная выше команда выполняет две функции:

   • создает сертификат для указанного вами имени хоста;
   • позволяет средству mkcert (которое вы добавили в качестве локального центра сертификации в действии 2) подписать этот сертификат.

   Теперь сертификат готов и подписан центром сертификации, которому ваш браузер доверяет в локальной среде. Почти все сделано, но у вашего сервера еще нет информации об этом сертификате.

4. Настройте сервер.

   Теперь нужно сообщить серверу, что следует использовать протокол HTTPS (так как по умолчанию серверы разработки обычно используют протокол HTTP) и только что созданный сертификат TLS.

   То, как сделать это, зависит от вашего сервера. Ниже приведено несколько примеров.

   👩🏻‍💻 С использованием узла

   server.js (замените выражения {ПУТЬ/К/ФАЙЛУ...} и {ПОРТ} нужными значениями):

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem'),
     cert: fs.readFileSync('{ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // код сервера
     })
     .listen({ПОРТ});

   👩🏻‍💻 С использованием HTTP-сервера

   Запустите сервер следующим образом (замените выражение {ПУТЬ/К/ФАЙЛУ...} нужным значением):

   http-server -S -C {ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem -K {ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem

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

   👩🏻‍💻 С использованием сервера разработки React

   Отредактируйте файл package.json следующим образом (заменив выражение {ПУТЬ/К/ФАЙЛУ...} нужным значением):

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem SSL_KEY_FILE={ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.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"

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

   • Сервер разработки Angular
   • Python

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

Использование средства mkcert: шпаргалка #

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

Самозаверяющий сертификат #

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

При таком подходе имеется ряд указанных ниже «подводных камней».

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

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

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

Сертификат, подписанный обычным центром сертификации #

Вы также можете найти методы, при использовании которого сертификат будет подписан реальным (а не локальным) центром сертификации.

Если вы планируете использовать эти методы, следует помнить о нескольких указанных ниже моментах.

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

Обратный прокси-сервер #

Еще один способ доступа к сайту, работающему в локальной среде, с помощью протокола HTTPS — использовать обратный прокси-сервер, например ngrok.

Ниже указано несколько моментов, которые следует учитывать.

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

Использование флагов (нерекомендуемый способ) #

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

• Вы должны быть полностью уверены, что для сайта mysite.example всегда выполняется разрешение в локальный адрес. В противном случае возможна утечка учетных данных рабочей среды.
• Используя эту хитрость, вы не сможете выполнять отладку в разных браузерах 🙀.

Выражаю огромную благодарность за вклад и отзывы всем рецензентам и участникам, особенно Райану Сливи (Ryan Sleevi), Филиппо Валсорде (Filippo Valsorda), Милице Михайлии (Milica Mihajlija) и Роуэну Меревуду (Rowan Merewood). 🙌

Фоновое изображение Hero от пользователя @anandu с Unsplash, отредактированное.