автор：Maud Nalpas Исходная ссылка：How to use HTTPS for local development переводчик：Yodonicc Иногда вам нужно использовать HTTPS Запустите локальный веб-сайт разработки. В этой статье объясняются инструменты и методы, позволяющие сделать это безопасно и быстро. осторожный существоватьбольшую часть времени,http://localhost сделает то, что вам нужно: в браузере он ведет себя так же, как HTTPS 🔒 Очень похоже. Поэтому некоторые из них не могут быть развернуты в HTTP работаю на сайте API Можно найти в http://localhost беги дальше. 这意味着您只需хотетьсуществоватьособенныйТолько тогда, когда существование необходимоместныйиспользовать HTTPS（ВидетьLocКогда Alhost следует использовать HTTPS? ),примерНапример, пользовательское имя хостаили Кроссбраузерная безопасность печенье. Если это то, что вам нужно, продолжайте читать!

существуют В этой статье,оlocalhostУтверждение верное127.0.0.1и[::1]также действителен,Потому что все они описывают локальный адрес компьютера.,Также называется «обратным адресом». кроме того,чтобы все было просто,Номер порта не указан. поэтому,когда ты видишьhttp://localhostчас,пожалуйста Воля Это понимается какhttp://localhost:{PORT}или http://127.0.0.1:{PORT}。

Если вы используете HTTPS,инадеятьсяместныйразвиватьвеб-сайтповедениеМожет обращаться к сайтам HTTPS（Если ваше производствовеб-сайтеще нетиспользовать HTTPS,пожалуйстаОтдайте приоритет переходу на HTTPS ). В большинстве случаев можно подумать http://localhost поведениеПохоже на: HTTPS-сайт。носуществуют в некоторых случаях,тебе нужноиспользовать HTTPS Запустите сайт локально. Теперь давайте посмотрим, как это сделать.

Используйте mkcert, чтобы включить HTTPS для локальных веб-сайтов (рекомендуется).

Включение локальных сайтов разработки HTTPS и доступ https://localhost или https://mysite.example（Пользовательское имя хоста）,тебе нужно TLS-сертификат。ноине любой Сертификатбудет принят браузером：Сертификат Требуется объект, которому доверяет ваш браузер.знак,Эти сущности называютсяДоверенный центр сертификации (CA) 。

тебе нужно Создать сертификат,ииспользоватьв зависимости от вашего устройстваи БраузерЛокально доверенный центр сертификациисделай этознак。 Вы можете использовать инструменты mkcert Это достигается с помощью нескольких команд. Вот как это работает:

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

post10image1.jpeg

Принципиальная схема работы mkcert

mkcert (и подобные инструменты) предлагают несколько преимуществ:

• mkcert посвященный созданиюБраузер считает действительным и совместимым Сертификат。оно будет обновляться,Для удовлетворения потребностей и лучших практик. Таким образом, вам не нужно запускать команду mkcert для получения сертификата со сложными параметрами конфигурации!
• mkcert Это кроссплатформенный инструмент. Любой член команды может использовать.

Мы рекомендуем использовать mkcert для создания сертификатов TLS для локальной разработки.

Многие операционные системы могут предоставлять библиотеки для генерации сертификатов, например. openssl . и mkcert и В отличие от аналогичных инструментов, такие библиотеки могут могущий始终生成正确из Сертификат,или Возможно, потребуется выполнить сложные команды,И это может быть не кроссплатформенное использование.

вопрос Что нас интересует в этой статье mkcert даэтот,而不даэтот。

предупреждать

осторожныйбегатьmkcert -installчас,Никогда не экспортируйте и не делитесь Зависит от mkcert автоматически создано rootCA-key.pem 。Злоумышленник, получивший этот файл, может провести атаку на любой веб-сайт, к которому вы имеете доступ.。他们可以拦截从您из电脑到任何веб-сайт（банк、Медицинская организацияилисоциальная сеть）из安全пожалуйста求。еслитебе нужно知道 rootCA-key.pem место, чтобы убедиться, что оно безопасно, бегите mkcert -CAROOT 。 - только mkcert 用于цель развития,и且永远不хотетьхотеть求最终用户бегать mkcert Заказ. - развивать团队：Все члены команды должныодинУстановитьибегать mkcert (вместо сохранения и обмена CA и сертификат).

настраивать

1. Установите mkcert (только один раз).

按照Инструкция по эксплуатациисуществоватьв операционной системе Установить mkcert. Например, в macOS начальство:

   brew install mkcert

   brew install nss # if you use Firefox

1. Воля mkcert Добавить в местный корень CA。

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

   mkcert -install

Это создает локальный центр сертификации. (CA)。mkcert созданный локальный CA толькосуществовать您из设备上местныйприем。

1. Создайте веб-сайт для веб-сайта с помощью mkcert знакиз Сертификат.

В существующем терминале перейдите в корневой каталог веб-сайта и любой каталог, используемый для сохранения Сертификата.

Затем запустите:

   mkcert localhost

Если ваше собственное имя хоста mysite.example,Пожалуйста, запустите:

   mkcert mysite.example

Приведенная выше команда выполняет две операции:

• Создайте сертификат для указанного вами имени хоста.
• позволять mkcert (ваши шаги существования 2 Добавлен как местный в CA) подписывает этот сертификат.

Сертификат теперь готов и подписан центром сертификации, которому локально доверяет ваш браузер. Большинство шагов выполнено, но ваш сервер еще не знает о сертификате!

1. Настройте сервер.

Теперь вам нужно указать серверу использовать HTTPS (поскольку серверы разработки предпочитают HTTP по умолчанию) и использовать только что созданный сертификат TLS.

Точные действия зависят от вашего сервера. Ниже приведены несколько примеров:

👩🏻‍💻 Используйте узлы:

server.js （заменять{PATH/TO/CERTIFICATE...}и{PORT} ）：

const https = require('https');
const fs = require('fs');
const options = {
   key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
   cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
};
https.createServer(options, function (req, res) {
// server code
   })
 .listen({PORT});

👩🏻‍💻 использовать http-server：

Запустите сервер следующим образом（заменять{PATH/TO/CERTIFICATE...} ）：

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem

-S буду использовать HTTPS бегать服务器,-C используется длянастраивать Сертификат,-K Используется для настройки ключа.

👩🏻‍💻 использовать React Сервер разработки:

Отредактируйте следующим образом package.json ,изаменять{PATH/TO/CERTIFICATE...} ：

   "scripts": {

   "start": "HTTPS=true SSL\_CRT\_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL\_KEY\_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.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"

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

• Сервер разработки Angular
• Python
• ✨Все готово! существуют Открыть в браузере https://localhost илиhttps://mysite.example ：这час就существоватьиспользовать HTTPS существующий местный запуск вашего веб-сайта. Вы не увидите никаких предупреждений браузера, потому что в браузере есть Воля. mkcert Признан органом, выдающим местный Сертификат.

Серверы могут иметь разные порты HTTPS.

сводка mkcert

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

1. настраивать mkcert。

Если вы еще не установили его mkcert, например в macOS начальство:

   brew install mkcert

Проверять Windows и Linux на установка mkcertиллюстрировать。

Затем создайте локальный центр сертификации:

   mkcert -install

1. Создайте доверенный сертификат.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

Эта команда создает действительный сертификат (предоставленный mkcert автоматическая подпись).

1. Настроить сервер разработки Приходитьиспользовать HTTPS исуществовать шаги 2 сертификат, созданный в формате .
2. ✨Все готово! Вы сейчас существуете Можно найти в Доступ в браузере https://{YOUR HOSTNAME},И вы больше не будете получать никаких предупреждений

осторожный пожалуйстатолько用于цель развития,Никогда не экспортируйте и не делитесьrootCA-key.pem Файл (если тебе нужно знать об этом файлеместо, чтобы убедиться, что оно безопасно, бегитеmkcert -CAROOT ）。

Включить HTTPS на локальном сайте: другие способы

Таможенный сертификат

Также можно обойтись без использования mkcert Такой местный Сертификаторган, выдавший документ,而даПодпишите сертификат самостоятельно。

Обратите внимание на некоторые недостатки этого подхода:

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

post10image2.jpeg

<center> сипользовать от знака Сертификат предупреждать, отображаемый браузером

Если вы не указали какой-либо Сертификат, Так React и Vue сервер разработки HTTPS Эта опция создаст собственный знак Сертификата в фоновом режиме. Несмотря на то, что это быстро, вы получите предупреждение браузера и столкнетесь с другими вопросами, связанными с указанным выше собственным знаком Сертификата. К счастью, вы можете использовать встроенную внешнюю среду. HTTPS Параметрыи指定Зависит от mkcert или Подобные инструменты создают локальный заслуживающий доверия сертификат. Перейдите на React. и mkcert Пример Проверять, как это сделать.

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

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

post10image3.jpeg

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

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

Если вы существуете, рассматривая эти методы, имейте в виду следующее:

• и mkcert Такой местный CA По сравнению с технологиями, ты нужно провести больше работы по настройке.
• тебе нужноиспользовать Доменное имя, которое действительно и контролируется само по себе. Это указывает на фактический орган, выдавший сертификат.

Не могущий

Используется для:

• localhost идругойбронироватьдоменное имя,Например example или test 。
• Любое доменное имя, которое вы не контролируете.
• 无效из顶级域。Видетьдействительный домен верхнего уровняиз列表。

обратный прокси

использовать HTTPS доступместныйбегатьвеб-сайтиз另一种方法даиспользоватьобратный прокси,Например ngrok 。

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

• Как только вы и любой пользователь поделились, используйте обратный Создано прокси URL,Все они имеют доступ к вашему местномуDevelopвеб-сайту. Это существование пригодится при демонстрации ваших проектов клиентам! Но если ваш проект чувствителен,Это может быть недостатком.
• Возможно, вы захотите рассмотреть вопрос о ценах.
• Браузер新引入измеры безопасности可能会影响这些工具из表现。

логотип (не рекомендуется)

Если вы используете了 mysite.example Пользовательское имя хоста, подобное этому, Так Можно найти в Chrome использовать знак, чтобы заставить Волю mysite.example 认作да安全из。Пожалуйста, избегайте этого метода,потому что:

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

Большое спасибо всем рецензентам и участникам за их вклад и отзывы, особая благодарность Райану Сливи, Филиппо Вальсорде, Милице Михайлии и Роуэну Меревуду. 🙌

文中照片Приходить源：@ananduon существовать Unsplash

Примечание：Особая благодарность техническому директору Дажао (Zhao Da) за проверку и исправление перевода этой статьи.。