Опубликовано: пятница, 23 декабря 2022 г. в 10:59

Использование mkcert для включения https на локальных сайтах

Источник: «Using the magic of mkcert to enable valid https on local dev sites»

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

Хотите пропустить эту статью и сразу приступить к делу? Зайдите в репозиторий FiloSottile/mkcert и следуйте инструкции в README.

Локальный https ужасен

Если вы веб-разработчик, вполне вероятно, что вы используете локальные сайты для разработки отладки своих приложений. Что-то вроде example.test или mycoolsite.devlocal, верно? Когда я раскручиваю сайт с базовым контентом, я действительно не обращаю внимания на то, чтобы обернуть его в https. Однако когда вы начинаете копаться в более сложных приложениях, особенно в тех, которые требуют регистрации и входа в систему, https полезен, а иногда и просто необходим.

Google Chrome (и большинство современных браузеров) заняли жёсткую позицию в отношении незашифрованных http-сайтов. Сюда включены сайты разработчиков и те, которые используют TLD такие, как .test и .devlocal. Обычно вы видите небольшой восклицательный знак или другой уведомление в левом углу адресной строки, но всё меняется, когда в игру вступает аутентификация. Вы увидите ещё более крупное уведомление об отправки информации на небезопасном сайте, и вам даже может быть заблокировано выполнение этого действия.

Потенциальное решение Давайте создадим локальные самоподписанные сертификаты, чтобы включить https на нашем сайте. Если мы начнём искать руководство о том, как это сделать, то обнаружим огромное количество вариантов для каждой операционной системы. По общему мнению, если вы делаете что-то подобное из командной строки, используйте такой инструмент как openssl. Затем в файле конфигурации Nginx или Apache включите https, прослушивает порт :443 и ссылайтесь на тот файл, как ваш ssl сертификат.

Это сработало, вроде бы. В моём локально разрабатываемом приложении, всякий раз, когда я переходил к https:// версии, появлялось огромное занимающее всё окно сообщение ЭТОТ САЙТ НЕ БЕЗОПАСЕН. Поначалу это не сильно беспокоило. Я мог бы кликнуть по кнопке Продолжить на небезопасном сайте, мой браузер запомнит выбор, и я смогу продолжить просмотр сайта. Несмотря на большой красный значок небезопасного https в адресной строке, он всё же выполнил свою работу.

Затем возникла проблема с более новыми версиями MacOS, где вы даже не увидите кнопку обхода Продолжить на небезопасном сайте во всплывающем окно Chrome. Что бы она появилась, нужно сохранить сертификат на рабочем столе, открыть его в Keychain Access и вручную установить доверие для него. И даже когда кнопка обхода снова появилась, по-прежнему показывался этот большой красный значок в адресной строке браузера.

Должен быть лучший способ

mkcert

Честно говоря, я не помню, где впервые наткнулся на mkcert. Это могло быть в посте на Reddit, ветке Twitter или случайном ответе StackOverflow, но я так рад, что сделал это.

Итак, что это такое? mkcert — инструмент командной строки, который делает две вещи:

Создаёт локальный центр сертификации на вашем компьютере.
Создаёт самоподписанные ssl-сертификаты для этого центра.

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

Настройка mkcert

Установка довольно простая и доступная для Windows, MacOS и Linux. Проведу краткий обзор для каждой системы, но рекомендовал б ознакомится с README в официальном репозитории.

Предупреждение: файл rootCA-key.pem, автоматические генерируемый mkcert, даёт возможности для перехвата защищённых запросов с вашего компьютера. Не выкладывайте его в открытый доступ.

Установка mkcert для MacOS

Используя Homebrew:

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

или MacPorts:

sudo port selfupdate
sudo port install mkcert
sudo port install nss # если используете Firefox

Установка mkcert для Windows

Используйте Chocolatey

choco install mkcert

или Scoop

scoop bucket add extras
scoop install mkcert

Или соберите из исходных файлов (требуется Go 1.10+), или используйте готовые бинарные файлы.

Если возникают проблемы с доступом, попробуйте запуска mkcert под Администратором.

Установка mkcert для Linux

На Linux сначала установите certutil

sudo apt install libnss3-tools
    -или-
sudo yum install nss-tools
    -или-
sudo pacman -S nss
    -или-
sudo zypper install mozilla-nss-tools

Затем установите mkcert используя Homebrew для Linux

brew install mkcert

или соберите из исходников (требуется Go 1.13+)

git clone https://github.com/FiloSottile/mkcert && cd mkcert
go build -ldflags "-X main.Version=$(git describe --tags)"

или используйте готовые бинарные файлы:

curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
chmod +x mkcert-v*-linux-amd64
sudo cp mkcert-v*-linux-amd64 /usr/local/bin/mkcert

Для Arch Linux mkcert доступен на официальном репозитории Arch Linux

sudo pacman -Syu mkcert

Теперь у вас есть инструмент, установленный в вашей системе и готовый к использованию в терминале.

Создание и использование сертификата mkcert

Если вы в первый раз используете mkcert, необходимо запустить его с флагом -install. Это нужно сделать только один раз для создания локального центра сертификации, о котором мы говорили ранее.

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

mkcert -install

Вы должны увидеть следующее, если всё прошло успешно:

Created a new local CA at "/Users/andrew/Library/Application Support/mkcert" 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

Теперь мы можем создать сертификат. Рекомендую перейти в каталог вашего проекта, возможно, создать в нём каталог mkcerts или что-то подобное.

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

mkcert example.test

Замените example.test локальным доменом, который вы используете для своего сайта.

Вы можете использовать IP-адреса или поддомены. Включите их в один вызов, если вам нужен один сертификат для нескольких доменов на одном сайте:

mkcert example.test "*.example.test" 127.0.0.1

И если всё пройдёт хорошо, у вас должны появиться два новых файла в каталоге, в котором вы запустили эту команду, example.test.pem и example.test-key.pem. Давайте используем их!

Вам нужно сделать их доступными для конфигурационных файлов Apache или Nginx и использовать их, как если бы мы использовали настоящий сертификат от Let's Encrypt или другой организации.

Файл конфигурации Nginx вместе с подготовленным блоком ssl должен выглядеть примерно так:

server {
    listen  443 ssl;
    server_name  example.test;
    root  /Users/andrew/Sites/example.test/public;
    ssl_certificate     /Users/andrew/Sites/example.test/mkcerts/example.test.pem;
    ssl_certificate_key /Users/andrew/Sites/example.test/mkcerts/example.test-key.pem;
}

И для Apache:

<VirtualHost 127.0.0.1:443>
ServerAdmin webmaster@example.test
DocumentRoot /Users/andrew/Sites/example.test/public
ServerName example.test
SSLEngine on
SSLCertificateFile /Users/andrew/Sites/example.test/mkcerts/example.test.pem
SSLCertificateKeyFile /Users/andrew/Sites/example.test/mkcerts/example.test-key.pem
</VirtualHost>

Всё, что осталось сделать, это перезапустить процесс веб-сервера и перейти на локальный сайт с https:// в браузере. После этого вы должны заметить замечательный зелёный значок безопасного соединения в адресной строке! ✅

Надеюсь, что после почтения этой статьи и использования mkcert вы перешли на более простой способ создания и использования самоподписанных ssl сертификатов для включения https на локально разрабатываемых веб-сайтах.