使用 HTTPS 进行本地开发

Maud Nalpas
Maud Nalpas

大多数情况下,http://localhost 在开发中的行为类似于 HTTPS 目的。不过,也有一些特殊情况, 例如自定义主机名或跨浏览器使用安全 Cookie,而您需要 明确地将开发网站设置为像 HTTPS 一样运行, 代表您的网站在生产环境中的运行情况。(如果您的生产网站 请使用 HTTPS,请优先改用 HTTPS)。

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

如需查看简要说明,请参阅 mkcert 快速参考。**

使用 mkcert 在本地通过 HTTPS 运行网站(推荐)

在本地开发网站中使用 HTTPS 并访问 https://localhosthttps://mysite.example(自定义主机名),您需要 TLS 证书 由您的设备和浏览器信任的实体(称为“可信”)进行签名 证书授权机构 (CA)。 浏览器会检查开发服务器的证书是否由 受信任的 CA。

我们建议使用 mkcert, 跨平台 CA 来创建和签署证书。对于其他有用的 选项,请参阅使用 HTTPS 在本地运行您的网站:其他选项

许多操作系统都包含用于创建证书的库,如 openssl.不过,它们更复杂, 比 mkcert 更可靠,也不一定跨平台,因此它们 大型开发团队的访问难度也会降低。

设置

  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"
    

    🥰? 💻? 其他示例

  5. 在浏览器中打开 https://localhosthttps://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} 了,且不会出现警告

</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和其他预留 域名(例如 exampletest)。
    • 不受您控制的任何域名。
    • 顶级域名无效。如需了解详情,请参阅有效顶级域名列表

反向代理

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

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

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

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

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

主打图片背景:@ananduUnsplash 网站,已经过修改。