【Web开发】使用HTTPS进行本地开发

大多数时候，http://localhost出于开发目的，其行为类似HTTPS。然而，也有一些特殊情况，例如自定义主机名或跨浏览器使用安全cookie，在这些情况下，您需要明确设置您的开发网站，使其表现得像HTTPS，以准确地表示您的网站在生产中的工作方式。（如果您的生产网站不使用HTTPS，请优先切换到HTTPS）。

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

注意：在本文中，关于localhost的语句也适用于127.0.0.1和[：：1]，因为它们都描述了本地计算机地址（也称为环回地址）。为了简单起见，这些说明没有指定端口号。所以当你看到http://localhost，读作http://localhost:｛PORT｝或http://127.0.0.1:｛端口｝。

有关简要说明，请参阅mkcert快速参考**

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

在本地开发站点和访问中使用HTTPShttps://localhost或https://mysite.example（自定义主机名），您需要由设备和浏览器信任的实体（称为可信证书颁发机构（CA））签名的TLS证书。在创建HTTPS连接之前，浏览器会检查开发服务器的证书是否由受信任的CA签名。

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

许多操作系统包括用于创建证书的库，例如openssl。然而，它们比mkcert更复杂、更不可靠，而且不一定是跨平台的，这使得大型开发团队更难访问它们。

小心

 

• 永远不要导出或共享mkcert在运行mkcert-install时自动创建的rootCA-key.pem文件。攻击者获取此文件后，可以对您可能访问的任何网站进行路径攻击。他们可以拦截从你的机器到任何网站的安全请求——你的银行、医疗保健提供商或社交网络。如果您需要知道rootCA-key.pem的位置以确保其安全，请运行mkcert-CAROOT。
• 仅将mkcert用于开发目的，并且从扩展上讲，永远不要要求最终用户运行mkcert命令。
• 开发团队：团队的所有成员都应该单独安装和运行mkcert（而不是存储和共享CA和证书）。

安装程序

 

• 安装mkcert（仅一次）。

按照说明在操作系统上安装mkcert。例如，在macOS上：

brew install mkcert
brew install nss # if you use Firefox

 

• 将mkcert添加到本地根CA。

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

mkcert -install

这将生成一个本地证书颁发机构（CA）。您的mkcert生成的本地CA仅在您的设备上本地受信任。

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

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

然后，运行：

mkcert localhost

如果您使用的是像mysite.example这样的自定义主机名，请运行：

mkcert mysite.example

此命令执行两件事：

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

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

• 将您的服务器配置为使用HTTPS-您刚刚创建的TLS证书。

如何执行此操作的详细信息取决于您的服务器。以下是一些示例：

With node:

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服务器：

按如下方式启动服务器（替换｛PATH/TO/CERTIFICATE…｝）：

http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem

👩🏻‍💻 使用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
    |--...

那么你的开始脚本应该是这样的：

"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=localhost.pem 
SSL_KEY_FILE=localhost-key.pem react-scripts start"

👩🏻‍💻 其他示例：

• Angular development server
• Python

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

mkcert快速参考

要使用HTTPS运行本地开发站点，请执行以下操作：

• 设置mkcert。

如果您还没有，请安装mkcert，例如在macOS上：

brew install mkcert

检查Windows和Linux的install mkcert说明。

然后，创建一个本地证书颁发机构：

mkcert -install

 

• 创建一个受信任的证书。

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

这将创建mkcert自动签名的有效证书。

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

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

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

</div>

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

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

自签名证书

您也可以决定不使用像mkcert这样的本地证书颁发机构，而是自己签署证书。这种方法有几个陷阱：

• 浏览器不信任您作为证书颁发机构，因此会显示需要手动绕过的警告。在Chrome中，您可以使用#allow unsecurity localhost标志在localhost上自动绕过此警告。
• 如果你在一个不安全的网络中工作，这是不安全的。
• 这并不一定比使用像mkcert这样的本地CA更容易或更快。
• 自签名证书的行为与受信任证书的行为不完全相同。
• 如果您没有在浏览器上下文中使用此技术，则需要禁用服务器的证书验证。忘记在生产中重新启用它会导致安全问题。

警告浏览器的屏幕截图显示何时使用自签名证书。
当使用自签名证书时，浏览器会显示警告。
如果您没有指定证书，React和Vue的开发服务器HTTPS选项会在后台创建一个自签名证书。这很快，但它也带有相同的浏览器警告和自签名证书的其他陷阱。幸运的是，您可以使用前端框架的内置HTTPS选项，并指定使用mkcert或类似方法创建的本地可信证书。有关更多信息，请参阅带有React的mkcert示例。

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

如果您使用HTTPS在浏览器中打开本地运行的网站，浏览器会检查本地开发服务器的证书。当它看到你自己签署了证书时，它会检查你是否注册为受信任的证书颁发机构。因为你不是，所以你的浏览器无法信任该证书，并且它会显示一条警告，告诉你你的连接不安全。如果继续，它仍然会创建HTTPS连接，但这样做的风险自负。

为什么浏览器不信任自签名证书：一个图表。
为什么浏览器不信任自签名证书。

由正规证书颁发机构签署的证书

您也可以使用由官方CA签署的证书。这会带来以下复杂情况：

与使用mkcert这样的本地CA技术相比，您还有更多的设置工作要做。
您需要使用您控制的有效域名。这意味着您不能将官方CA用于以下用途：

• localhost和其他保留域名，如example或test。
• 任何你无法控制的域名。
• 无效的顶级域。有关详细信息，请参阅有效顶级域的列表。

反向代理

使用HTTPS访问本地运行的站点的另一个选项是使用反向代理（如ngrok）。这会带来以下风险：

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

Flag (not recommended)

如果你在Chrome中使用自定义主机名，比如mysite.example，你可以使用一个标志来强制浏览器考虑mysite.exexample的安全性。由于以下原因避免这样做：

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

非常感谢所有评论家和贡献者的贡献和反馈，尤其是Ryan Slevi、Filippo Valsorda、Milica Mihajlija和Rowan Merewood。🙌