Когда использовать HTTPS для локальной разработки

Использование http://localhost для локальной разработки в большинстве случаев подходит, за исключением некоторых особых случаев. В этом посте объясняется, когда вам нужно запустить локальный сайт разработки с использованием HTTPS.

Мод Налпас
Maud Nalpas
X GitHub

См. также: Как использовать HTTPS для локальной разработки .

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

Краткое содержание

При локальной разработке по умолчанию используйте http://localhost . Service Workers, API веб-аутентификации и многое другое будут работать. Однако в следующих случаях вам понадобится HTTPS для локальной разработки:

  • Настройка безопасных файлов cookie единообразным образом во всех браузерах
  • Отладка проблем со смешанным контентом
  • Использование HTTP/2 и более поздних версий
  • Использование сторонних библиотек или API, требующих HTTPS.

  • Использование собственного имени хоста

    Список случаев, когда вам необходимо использовать HTTPS для локальной разработки.
    Когда использовать HTTPS для локальной разработки.

✨Это все, что вам нужно знать. Если вам интересна более подробная информация, продолжайте читать!

Почему ваш сайт разработки должен вести себя безопасно

Чтобы избежать неожиданных проблем, вам нужно, чтобы ваш локальный сайт разработки вёл себя как можно более похоже на рабочий сайт. Итак, если ваш рабочий веб-сайт использует HTTPS, вы хотите, чтобы ваш локальный сайт разработки вел себя как сайт HTTPS .

Используйте http://localhost по умолчанию

Браузеры обрабатывают http://localhost особым образом: хотя это HTTP, в основном он ведет себя как HTTPS-сайт .

На http://localhost поддерживаются Service Workers, API датчиков, API аутентификации, платежи и другие функции, требующие определенных гарантий безопасности, которые ведут себя точно так же, как на сайте HTTPS.

Когда использовать HTTPS для локальной разработки

Вы можете столкнуться с особыми случаями, когда http://localhost не ведет себя как сайт HTTPS, или вы можете просто захотеть использовать собственное имя сайта, отличное от http://localhost .

Использовать HTTPS для локальной разработки необходимо в следующих случаях:

  • Вам необходимо локально установить файл cookie Secure или SameSite:none или иметь префикс __Host . Secure файлы cookie устанавливаются только на HTTPS, но не на http://localhost для всех браузеров. А поскольку SameSite:none и __Host также требуют, чтобы файл cookie был Secure , для установки таких файлов cookie на локальном сайте разработки также требуется HTTPS.

  • Вам необходимо локально отладить проблему, которая возникает только на веб-сайте HTTPS, но не на сайте HTTP, даже не на http://localhost , например, проблема со смешанным контентом .

  • Вам необходимо локально протестировать или воспроизвести поведение, специфичное для HTTP/2 или новее. Например, если вам нужно протестировать производительность загрузки по протоколу HTTP/2 или новее. Небезопасный HTTP/2 или новее не поддерживается, даже на localhost .

  • Вам необходимо локально протестировать сторонние библиотеки или API, требующие HTTPS (например, OAuth).

  • Вы используете не localhost , а собственное имя хоста для локальной разработки, например mysite.example . Обычно это означает, что вы переопределили локальный файл хостов:

    Скриншот терминала, редактирующего файл хостов
    Редактирование файла хостов для добавления собственного имени хоста.

    В этом случае Chrome, Edge, Safari и Firefox по умолчанию не считают mysite.example безопасным, даже если это локальный сайт. Поэтому он не будет вести себя как сайт HTTPS.

  • Другие случаи! Это не исчерпывающий список, но если вы столкнетесь со случаем, которого здесь нет, вы будете знать: на http://localhost что-то сломается или он будет вести себя не совсем так, как ваш рабочий сайт. 🙃

Во всех этих случаях вам необходимо использовать HTTPS для локальной разработки.

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

Если вам нужно использовать HTTPS для локальной разработки, перейдите к разделу «Как использовать HTTPS для локальной разработки» .

Советы, если вы используете собственное имя хоста

Если вы используете собственное имя хоста, например, редактируя файл хостов:

  • Не используйте чистое имя хоста, например mysite , потому что если существует домен верхнего уровня (TLD) с таким же именем ( mysite ), вы столкнетесь с проблемами. И это не так уж и маловероятно: в 2020 году будет более 1500 TLD, и этот список будет расти. coffee , museum , travel и названия многих крупных компаний (возможно, даже компании, в которой вы работаете!) являются доменами верхнего уровня. Полный список смотрите здесь .
  • Используйте только домены, которые принадлежат вам или зарезервированы для этой цели. Если у вас нет собственного домена, вы можете использовать test или localhost ( mysite.localhost ). test не имеет специальной обработки в браузерах, но localhost имеет: Chrome и Edge поддерживают http://<name>.localhost из коробки», и он будет вести себя безопасно, когда localhost поддерживает. Попробуйте: запустите любой сайт на локальном хосте и откройте http://<whatever name you like>.localhost:<your port> в Chrome или Edge. Вскоре это может стать возможным и в Firefox и Safari . Причина, по которой вы можете это сделать (иметь поддомены, такие как mysite.localhost ), заключается в том, что localhost — это не просто имя хоста: это также полный TLD, например com .

Узнать больше

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

Изображение героя @moses_lee на Unsplash , отредактировано.