何时使用 HTTPS 进行本地开发

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

Maud Nalpas
Maud Nalpas

另请参阅:如何使用 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,即 SecureSameSite: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 个,并且名单还在不断增加。coffeemuseumtravel 以及许多大型公司名称(甚至可能是您所在的公司!)都是顶级域名。点击此处可查看完整列表
  • 请仅使用您自己的或预留用于此用途的域名。如果您没有自己的网域,则可以使用 testlocalhost (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_leeUnsplash 网站,已编辑过。