使用 HTTPS 进行本地开发

Maud Nalpas

在大多数情况下，http://localhost 的行为与 HTTPS 类似，用于开发目的。不过，在某些特殊情况下， 例如自定义主机名或跨浏览器使用安全 Cookie，您需要 明确将开发网站设置为与 HTTPS 类似的行为，以准确 表示您的网站在生产环境中的运作方式。（如果您的生产网站不使用 HTTPS，请优先切换到 HTTPS）。

本页面介绍了如何在本地运行使用 HTTPS 的网站。

注意： 在本文中，有关 localhost 的声明也适用于 127.0.0.1 和 [::1]，因为它们都描述了本地计算机地址（也 称为 环回地址）。为简单起见，这些说明未指定端口号。因此，当您看到 http://localhost 时，请将其解读为 http://localhost:{PORT} 或 http://127.0.0.1:{PORT}.

如需简要说明，请参阅 mkcert 快速参考。**

使用 mkcert 在本地运行使用 HTTPS 的网站（推荐）

如需将 HTTPS 与本地开发网站搭配使用并访问 https://localhost 或 https://mysite.example（自定义主机名），您需要一个 TLS 证书 由设备和浏览器信任的实体（称为受信任的 证书授权机构 (CA)）签名的。 浏览器会在创建 HTTPS 连接之前检查开发服务器的证书是否由受信任的 CA 签名。

我们建议您使用 mkcert（一个 跨平台 CA）来创建和签署证书。如需了解其他实用 选项，请参阅在本地运行使用 HTTPS 的网站：其他选项。

许多操作系统都包含用于创建证书的库，例如 openssl。不过，它们比 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
   

2. 将 mkcert 添加到本地根 CA。

   在终端中，运行以下命令：

   mkcert -install
   

   这会生成本地证书授权机构 (CA)。 mkcert 生成的本地 CA 仅在您的设备上本地 受信任。

3. 为您的网站生成一个由 mkcert 签名的证书。

   在终端中，导航到您网站的根目录或您希望将证书保留在其中的任何目录。

   然后，运行以下命令：

   mkcert localhost
   

   如果您使用的是自定义主机名（例如 mysite.example），请运行以下命令：

   mkcert mysite.example
   

   此命令会执行两项操作：

   • 为您指定的主机名生成证书。
   • 让 mkcert 为证书签名。

   您的证书现已准备就绪，并由浏览器在本地信任的证书授权机构签名。

4. 将服务器配置为使用您刚刚创建的 TLS 证书来使用 HTTPS。

   具体操作方法取决于您的服务器。以下是一些示例：

   👩🏻‍💻 使用节点：

   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

5. 在浏览器中打开 https://localhost 或 https://mysite.example，以仔细检查您是否在本地运行使用 HTTPS 的网站。您不会看到任何浏览器警告，因为您的浏览器信任 mkcert 作为本地证书授权机构。

mkcert 快速参考

mkcert 快速参考

如需在本地运行使用 HTTPS 的开发网站，请执行以下操作：

1. 设置 mkcert。

   如果您尚未安装 mkcert，请先安装，例如在 macOS 上：

   brew install mkcert
   
   
   

   请查看安装 mkcert ，了解 Windows 和 Linux 说明。

   然后，创建本地证书授权机构：

   mkcert -install

2. 创建受信任的证书。

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

   这会创建一个有效证书，mkcert 会自动为其签名。

3. 将开发服务器配置为使用 HTTPS 和您在第 2 步中创建的证书。

您现在可以在浏览器中访问 https://{YOUR HOSTNAME}，而不会收到警告

注意： 此操作仅用于开发目的 ，并且切勿导出或共享文件 rootCA-key.pem。如果您需要知道此文件的位置以确保其安全，请运行 mkcert -CAROOT。

</div>

在本地运行使用 HTTPS 的网站：其他选项

以下是设置证书的其他方法。这些方法通常比使用 mkcert 更复杂或风险更高。

自签名证书

您还可以选择不使用 mkcert 等本地证书授权机构，而是自行签署证书 。这种方法存在一些缺点：

• 浏览器不信任您作为证书授权机构，因此会显示您需要手动绕过的警告。在 Chrome 中，您可以使用标志 #allow-insecure-localhost 在 localhost 上自动绕过此警告。
• 如果您在不安全的网络中工作，则此方法不安全。
• 它不一定比使用 mkcert 等本地 CA 更简单或更快。
• 自签名证书的行为与受信任的证书并不完全相同。
• 如果您未在浏览器上下文中使用此技术，则需要为服务器停用证书验证。忘记在生产环境中重新启用它会导致安全问题。

浏览器在使用自签名证书时显示的警告。

如果您未指定证书，React 和 Vue 的开发服务器 HTTPS 选项会在后台创建自签名证书。这很快，但会带来与自签名证书相同的浏览器警告和其他缺点。幸运的是，您可以使用前端框架的内置 HTTPS 选项，并指定使用 mkcert 或类似工具创建的本地受信任证书。如需了解详情，请参阅 mkcert with React 示例。

为什么浏览器不信任自签名证书？

如果您使用 HTTPS 在浏览器中打开本地运行的网站，您的浏览器会检查本地开发服务器的证书。当浏览器看到您自行签署了证书时，会检查您是否已注册为受信任的证书授权机构。由于您未注册，因此浏览器无法信任该证书，并会显示一条警告 告知您连接不安全。如果您继续操作，浏览器仍会创建 HTTPS 连接，但您需要自行承担风险。

为什么浏览器不信任自签名证书。

由常规证书授权机构签名的证书

您还可以使用由官方 CA 签名的证书。这会带来以下复杂性：

• 与使用 mkcert 等本地证书授权机构 (CA) 技术相比，您需要完成更多设置工作。
• 您需要使用您控制的有效域名。这意味着您无法将官方 CA 用于以下用途：
  • localhost 和其他 保留 域名，例如 example 或 test。
  • 您不控制的任何域名。
  • 无效的顶级域名。如需了解详情，请参阅有效顶级域名列表。

反向代理

访问本地运行的使用 HTTPS 的网站的另一种方法是使用 反向代理（例如 ngrok）。这会带来以下风险：

• 与您共享反向代理网址的任何人都可以访问您的本地开发网站。这有助于向客户演示您的项目，但也可能让未经授权的人员共享敏感信息。
• 某些反向代理服务会收取使用费，因此价格可能是您选择服务时的一个考虑因素。
• 浏览器中的新安全措施可能会影响这些工具的 运作方式。

标志（不推荐）

如果您在 Chrome 中使用自定义主机名（例如 mysite.example），则可以使用标志强制浏览器将 mysite.example 视为安全。出于以下原因，请避免这样做 ：

• 您需要 100% 确定 mysite.example 始终解析为本地地址。否则，您可能会泄露生产凭据。
• 此标志仅适用于 Chrome，因此您无法跨浏览器进行调试。

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

主打图片背景由 @anandu 在 Unsplash 上提供，经过编辑。