何时使用 HTTPS 进行本地开发

大多数情况下，使用 http://localhost 进行本地开发是可以的，但某些特殊情况除外。本文介绍何时需要使用 HTTPS 运行本地开发网站。

Maud Nalpas
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 Worker、Web Authentication API 等等。 但在以下情况下，您需要使用 HTTPS 进行本地开发：

  • 以一致的方式跨浏览器设置安全 Cookie
  • 调试混合内容问题
  • 使用 HTTP/2 及更高版本
  • 使用需要 HTTPS 的第三方库或 API

  • 使用自定义主机名

    需要使用 HTTPS 进行本地开发的情况列表。
    何时使用 HTTPS 进行本地开发。

✨ 这是你唯一需要了解的。如果您想了解更多详情，请继续阅读！

开发网站为何应安全运行

为了避免遇到意外问题，您应该让本地开发网站尽可能像生产网站一样运行。因此，如果您的生产网站使用 HTTPS，则您希望本地开发网站的行为像 HTTPS 网站一样。

默认使用 http://localhost

浏览器会以特殊方式处理 http://localhost：尽管它是 HTTP，但它大多表现得像 HTTPS 网站。

http://localhost 支持 Service Worker、Sensor API、Authentication API、Payment 以及需要特定安全保证的其他功能，其行为方式与 HTTPS 网站上的完全相同。

何时使用 HTTPS 进行本地开发

您可能会遇到以下特殊情况：http://localhost 的行为方式与 HTTPS 网站不同，或者您可能只是想使用不是 http://localhost 的自定义网站名称。

在以下情况下，您需要使用 HTTPS 进行本地开发：

  • 您需要在本地设置 Cookie，即 Secure、SameSite:none 或带有 __Host 前缀的 Cookie。Secure Cookie 仅在 HTTPS 上设置，而非在所有浏览器上都在 http://localhost 上设置。此外，由于 SameSite:none 和 __Host 还要求将 Cookie 设为 Secure，因此在本地开发网站上设置此类 Cookie 也需要使用 HTTPS。

  • 您需要在本地对仅出现在 HTTPS 网站上（而不出现在 HTTP 网站上，甚至不出现在 http://localhost）上的问题进行本地调试，例如混合内容问题。

  • 您需要在本地测试或重现 HTTP/2 或更高版本特有的行为。例如，如果您需要在 HTTP/2 或更高版本上测试加载性能。不支持不安全的 HTTP/2 或更高版本，即使在 localhost 上也是如此。

  • 您需要在本地测试需要使用 HTTPS 的第三方库或 API（例如 OAuth）。

  • 您使用的不是 localhost，而是用于本地开发的自定义主机名，例如 mysite.example。通常，这意味着您替换了本地 hosts 文件：

    修改 hosts 文件的终端的屏幕截图
    修改 hosts 文件以添加自定义主机名。

    在这种情况下，默认情况下，Chrome、Edge、Safari 和 Firefox 不会将 mysite.example 视为安全网站，即使它是本地网站也是如此。因此，其行为方式与 HTTPS 网站不同。

  • 其他情况！此列表并不详尽，但如果您遇到未在此处列出的情况，就会了解：http://localhost 中的内容将会中断，或者与正式版网站的行为方式不完全一样。🙃

在所有这些情况下，您都需要使用 HTTPS 进行本地开发。

如何使用 HTTPS 进行本地开发

如果您需要使用 HTTPS 进行本地开发，请参阅如何使用 HTTPS 进行本地开发。

有关使用自定义主机名的提示

如果您使用的是自定义主机名（例如，要修改 hosts 文件），请执行以下操作：

  • 请勿使用像 mysite 这样的裸主机名，因为如果存在恰好使用同一名称 (mysite) 的顶级域名 (TLD)，那么您会遇到问题。也不太可能：2020 年，顶级域名有超过 1,500 个，并且名单还在不断增加。coffee、museum、travel 以及许多大型公司名称（甚至可能是您所在的公司！）都是顶级域名。点击此处可查看完整列表。
  • 请仅使用您自己的或预留用于此用途的域名。如果您没有自己的网域，则可以使用 test 或 localhost (mysite.localhost)。test 在浏览器中不会受到特殊处理，但 localhost 却有特殊处理：Chrome 和 Edge 开箱就支持 http://<name>.localhost，当 localhost 支持时，它会安全地运行。不妨试试看：在本地主机上运行任何网站，然后在 Chrome 或 Edge 中访问 http://<whatever name you like>.localhost:<your port>。我们可能很快也会在 Firefox 和 Safari 中使用此功能。您可以执行此操作（具有类似 mysite.localhost 的子网域）是因为 localhost 不仅仅是主机名：它也是一个完整的 TLD（例如 com）。

了解详情

非常感谢所有审核者的贡献和反馈，尤其是 Ryan Sleevi、Filippo Valsorda、Milica Mihajlija、Rowan Merewood 和 Jake Archibald。🙌

主打图片，作者：@moses_lee 在 Unsplash 网站，已编辑过。