使用 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)。 浏览器会检查开发服务器的证书是否由 受信任的 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. 将您的服务器配置为使用 HTTPS 您刚刚创建的 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

5. 在浏览器中打开 https://localhost 或 https://mysite.example 以执行以下操作： 请仔细检查您是否使用 HTTPS 在本地运行网站你不会看到 浏览器警告，因为您的浏览器将 mkcert 视为本地证书 授权。

mkcert 快速参考

mkcert 快速参考

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

1. 设置 mkcert。

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

   brew install mkcert
   
   

   勾选 install mkcert 了解适用于 Windows 和 Linux 的说明。

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

   mkcert -install
   

2. 创建受信任的证书。

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

   这将创建一个 mkcert 自动签署的有效证书。

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

您现在可以在浏览器中访问 https://{YOUR HOSTNAME} 了，且不会出现警告

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

</div>

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

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

自签名证书

您也可以决定不使用 mkcert 等本地证书授权机构， 自行签署证书。这种方法存在一些缺陷：

• 浏览器不信任您是证书授权机构，因此会显示警告 您需要手动绕过。在 Chrome 中，您可以使用 #allow-insecure-localhost即可自动绕过此警告 localhost。
• 如果您使用的是不安全的网络，则此设置不安全。
• 这不一定比使用 mkcert 等本地 CA 更简单、更快捷。
• 自签名证书的行为方式与受信任证书的行为方式不同 证书。
• 如果您没有在浏览器上下文中使用此方法，则需要停用 您的服务器的证书验证。以下时间后忘记重新启用： 会导致安全问题。

。 <ph type="x-smartling-placeholder">

</ph>

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

如果您未指定证书，React 的 和 Vue's 开发服务器 HTTPS 选项会在 。这个过程很快， 自签名证书的隐患幸运的是，你可以使用 框架的内置 HTTPS 选项，并指定本地可信证书 使用 mkcert 或类似方法创建。有关详情，请参阅 将 mkcert 与 React 搭配使用示例。

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

如果您使用 HTTPS 在浏览器中打开本地运行的网站， 浏览器检查本地开发服务器的证书。当 检测到您已自行签署证书 您已注册为受信任的证书授权机构。因为您是 否则，您的浏览器无法信任该证书，并且系统显示了一条警告 提示您的连接不安全。它仍会创建 HTTPS 连接，但需自行承担风险。

<ph type="x-smartling-placeholder">

</ph>

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

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

您也可以使用由官方 CA 签署的证书。附带的 以下复杂功能：

• 与使用本地 CA 技术（如 mkcert 代码。
• 您需要使用由您控制的有效域名。这意味着 对于以下情况，请使用官方 CA： <ph type="x-smartling-placeholder">
  </ph>
  • localhost和其他预留 域名（例如 example 或 test）。
  • 不受您控制的任何域名。
  • 顶级域名无效。如需了解详情，请参阅有效顶级域名列表。

反向代理

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

• 您与之共享反向代理网址的任何人都可以访问您的本地开发 网站。这有助于向客户演示您的项目 让未经授权的人员分享敏感信息。
• 某些反向代理服务会对用量收费，因此价格可能会成为 您选择的服务。
• 浏览器中的新安全措施可能会影响 这些工具的工作原理。

标志（不推荐）

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

• 您需要 100% 确保 mysite.example 始终解析为本地 地址。否则，存在泄露正式版凭据的风险。
• 此标志仅适用于 Chrome，因此您无法跨浏览器进行调试。

感谢所有审核者和贡献者，尤其是 Ryan Sleevi 做出的贡献和反馈。 Filippo Valsorda、Miica Mihajlija 和 Rowan Merewood。🙌

主打图片背景：@anandu 于 Unsplash 网站，已经过修改。