Использование протокола HTTPS при разработке в локальной среде
Иногда может потребоваться использовать протокол HTTPS для локального сайта разработки. Средства и советы, позволяющие сделать это быстро и безопасно.
*Все, что говорится в этой публикации об узле 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 и аналогичных средств такие библиотеки не всегда могут создавать правильные сертификаты. Для их использования, возможно, потребуется выполнять сложные команды, а сами они не всегда кроссплатформенные.
Предупреждение #
Настройка #
Установите средство mkcert (это нужно сделать только один раз).
Следуйте инструкциям по установке средства mkcert в используемой вами операционной системе. Пример для macOS:
brew install mkcert
brew install nss # если вы используете FirefoxДобавьте средство mkcert в список локальных корневых центров сертификации.
В терминале выполните следующую команду:
mkcert -install
В результате будет создан локальный центр сертификации (ЦС). Локальный ЦС, созданный средством mkcert, будет доверенным только локально на вашем устройстве.
Создайте сертификат, подписанный средством mkcert, для своего сайта.
В терминале перейдите в корневой каталог сайта или в любой другой каталог, в котором нужно разместить сертификаты.
Затем выполните следующую команду:
mkcert localhost
Если вы применяете пользовательское имя хоста, например
mysite.example
, выполните следующую команду:mkcert mysite.example
Приведенная выше команда выполняет две функции:
- создает сертификат для указанного вами имени хоста;
- позволяет средству mkcert (которое вы добавили в качестве локального центра сертификации в действии 2) подписать этот сертификат.
Теперь сертификат готов и подписан центром сертификации, которому ваш браузер доверяет в локальной среде. Почти все сделано, но у вашего сервера еще нет информации об этом сертификате.
Настройте сервер.
Теперь нужно сообщить серверу, что следует использовать протокол 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"👩🏻💻 Другие примеры
✨ Готово! Перейдите на узел
https://localhost
илиhttps://mysite.example
в браузере: ваш сайт работает в локальной среде с использованием протокола HTTPS. В браузере не будут отображаться никакие предупреждения, потому что он доверяет средству mkcert как локальному центру сертификации.
Использование средства mkcert: шпаргалка #
Кратко о средстве mkcert
Чтобы запустить локальный сайт разработки с использованием протокола HTTPS, выполните указанные ниже действия.
Настройте средство mkcert.
Установите средство mkcert, если вы еще не сделали этого. Пример для macOS:
brew install mkcert
Ознакомьтесь с инструкциями по установке средства mkcert для ОС Windows и Linux.
Затем создайте локальный центр сертификации:
mkcert -install
Создайте доверенный сертификат.
mkcert {ИМЯ ВАШЕГО УЗЛА, например localhost или mysite.example}
В результате будет создан действующий сертификат (который будет автоматически подписан средством
mkcert
).Настройте сервер разработки для использования протокола HTTPS и сертификата, созданного в действии 2.
✨ Готово! Теперь вы можете открыть сайт
https://{ИМЯ ВАШЕГО УЗЛА}
в браузере и при этом не будут отображаться никакие предупреждения.
Запуск сайта в локальной среде с использованием протокола 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, отредактированное.