Блог начинающего фронтендера

Как настроить HTTPS на localhost?

Столкнулся с необходимостью настроить защищенное соединение на локальном компьютере в MacOS. Пришлось немного покопаться в англоязычных статьях. Способ работает на день написание статьи. На правильность и истину в последней инстанции не претендую, поэтому буду благодарен за комментарии или советы.

Работаю со стеком MERN. В корневой папке проекта создал папку security, а в ней файл req.cnf

mkdir security
touch req.cnf

В файл добавляем строки:

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = RU
ST = State
L = Location
O = Organization Name
OU = Organizational Unit 
CN = www.localhost.com
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = www.localhost.com
DNS.2 = localhost.com
DNS.3 = localhost

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

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout cert.key -out cert.pem -config req.cnf -sha256

В папке security появляются файлы cert.key и cert.pem

В файле сервера server.js добавляем строчки:

app.get('/', (req, res) => {
  res.send("IT'S WORKING!")
})

const httpsOptions = {
  key: fs.readFileSync('./security/cert.key'),
  cert: fs.readFileSync('./security/cert.pem')
}
const server = https.createServer(httpsOptions, app)
  .listen(port, () => {
    console.log('secured server running at ' + port)
  })

В файле сервера package.json (это package сервера) добавляем строчки чтобы сервер запускался через HTTPS:

"client": "HTTPS=true npm start --prefix client"

В файле сервера client/package.json (а это уже package клиента) добавляем строчки в необходимых местах чтобы клиент смотрел на HTTPS версиюи запускался правильно:

"proxy": "https://localhost:5000"
...
"start": "set HTTPS=true&&react-scripts start"

Мой сервер крутится на 5000 порту, поэтому идем по ссылке https://localhost:5000 в брузере, видим ошибку, скачиваем неправильный сертификат и подтверждаем то, что он правильный.

Клиент крутится на 3000 порту, поэтому идем по ссылке https://localhost:3000 в брузере, тоже видим ошибку, открываем инструменты разработчка Google Chrome, переходим в вкладку Security и скачиваем сертификат (см скриншот, я не сразу смог понять как это сделать) и тоже подтверждаем что он правильный (см скриншот).

Настраиваем ssl на localhost

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

Настраиваем ssl на localhost

Поделиться
Отправить
Отправить