category
大多数时候，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"
👩🏻💻 其他示例：
打开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。🙌
- 登录 发表评论