Сертефикат mkcert не принимает браузер

Question

Я создал сертификат с помощью команды:

mkcert create-cert --key ./.cert/key.pem --cert ./.cert/cert.pem

После этого изменил запуск react приложения:

"start": "cross-env HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start",

Когда я запустил приложение я увидел ошибку доверия браузера:

Answer 1

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

Answer 2

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

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

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

Если вы в первый раз используете 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 [email protected]
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:// в браузере. После этого вы должны заметить замечательный зелёный значок безопасного соединения в адресной строке! ✅

БЛОГ НА HUSL

Сертефикат mkcert не принимает браузер

Ответы (2 шт):