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

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

Available in: English, Español, Português, 中文, 日本語 и 한국어
Appears in: Безопасность и надежность
Maud Nalpas
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 предназначено для создания сертификатов, которые браузеры считают допустимыми. Оно постоянно обновляется в соответствии с новыми требованиями и рекомендациями. Поэтому для создания нужных сертификатов вам не придется запускать команды 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"

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

  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 {ИМЯ ВАШЕГО УЗЛА, например localhost или mysite.example}

    В результате будет создан действующий сертификат (который будет автоматически подписан средством mkcert).

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

  4. ✨ Готово! Теперь вы можете открыть сайт https://{ИМЯ ВАШЕГО УЗЛА} в браузере и при этом не будут отображаться никакие предупреждения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Последнее обновление: — Улучшить статью
Return to all articles
Поделиться