大多数情况下,出于开发目的,http://localhost
的行为类似于 HTTPS。不过,在一些特殊情况(例如自定义主机名或跨浏览器使用安全 Cookie)下,您需要明确设置开发网站的行为方式,使其类似于 HTTPS,以准确表示网站在生产环境中的运行。(如果您的生产网站不使用 HTTPS,请优先考虑改用 HTTPS)。
本页介绍了如何使用 HTTPS 在本地运行您的网站。
如需简要说明,请参阅 mkcert 快速参考。**
使用 mkcert 通过 HTTPS 在本地运行您的网站(推荐)
如需在本地开发网站上使用 HTTPS 并访问 https://localhost
或 https://mysite.example
(自定义主机名),您需要一个由您的设备和浏览器信任的实体(称为可信证书授权机构 (CA))签名的 TLS 证书。在创建 HTTPS 连接之前,浏览器会检查开发服务器的证书是否由可信 CA 签名。
我们建议您使用跨平台 CA mkcert 来创建证书并为其签名。如需了解其他实用选项,请参阅使用 HTTPS 在本地运行您的网站:其他选项。
许多操作系统都包含用于创建证书的库,例如 openssl。但是,它们比 mkcert 更复杂、更可靠,且不一定是跨平台的,因此较大规模的开发者团队不容易使用它们。
初始设置
安装 mkcert(仅一次)。
请按照相关instructions在您的操作系统上安装 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 对证书进行签名。
您的证书现已准备就绪,并由浏览器在本地信任的证书授权机构签名。
将服务器配置为使用您刚创建的 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
设置密钥。◼ noopener 带 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"
🥂? 🚌? 其他示例:
在浏览器中打开
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}
,且系统不会显示警告
</div>
使用 HTTPS 在本地运行您的网站:其他选项
以下是设置证书的其他方法。这通常比使用 mkcert 更复杂或风险更大。
自签名证书
您还可以决定不使用 mkcert 等本地证书授权机构,而是自行为证书签名。这种方法存在一些缺陷:
- 浏览器不会信任您作为证书授权机构,因此会显示您需要手动绕过的警告。在 Chrome 中,您可以使用
#allow-insecure-localhost
标志在localhost
时自动绕过此警告。 - 如果您使用不安全的网络,此项操作不安全。
- 这未必比使用 mkcert 等本地 CA 更简单或更快。
- 自签名证书的行为方式与可信证书不同。
- 如果您未在浏览器环境中使用此方法,则需要为服务器停用证书验证。忘记在生产环境中重新启用它会导致安全问题。
![使用自签名证书时,浏览器会显示警告的屏幕截图。](https://web.developers.google.cn/static/articles/how-to-use-local-https/image/screenshots-the-warnings-953f06ad1aebc.jpg?authuser=5&hl=sv)
如果您未指定证书,React 的和 Vue 的开发服务器 HTTPS 选项会在后台创建自签名证书。此过程很快,但会带来同样的浏览器警告和自签名证书的其他隐患。幸运的是,您可以使用前端框架的内置 HTTPS 选项,并指定使用 mkcert 或类似方式创建的本地受信证书。如需了解详情,请参阅结合使用 mkcert 和 React 示例。
如果您使用 HTTPS 在浏览器中打开本地运行的网站,则浏览器会检查本地开发服务器的证书。当它看到您已自行签署证书时,就会检查您是否已注册为受信任的证书授权机构。由于您不是,因此您的浏览器无法信任该证书,并且会显示一条警告,告知您连接不安全。如果您继续操作,它仍会创建 HTTPS 连接,但风险需自担。
![浏览器为何不信任自签名证书:一个图表。](https://web.developers.google.cn/static/articles/how-to-use-local-https/image/why-browsers-dont-trust-9aa014d2da64b.jpg?authuser=5&hl=sv)
由常规证书授权机构签名的证书
您也可以使用由官方 CA 签名的证书。这会带来以下复杂问题:
- 与使用 mkcert 等本地 CA 技术时相比,您需要完成更多设置工作。
- 您需要使用由您控制的有效域名。这意味着您不能将官方 CA 用于以下情况:
反向代理
使用 HTTPS 访问本地运行的网站的另一种方法是使用反向代理,例如 ngrok。这带来了以下风险:
- 您与之共享反向代理网址的任何人都可以访问您的本地开发网站。这有助于向客户演示您的项目,但也可让未经授权的人员分享敏感信息。
- 某些反向代理服务按使用量收费,因此价格可能是您选择服务的一个因素。
- 浏览器中新的安全措施可能会影响这些工具的工作方式。
标志(不推荐)
如果您在 Chrome 中使用诸如 mysite.example
之类的自定义主机名,可以使用标志来强制浏览器认为 mysite.example
是安全的。请避免这样做,原因如下:
- 您需要完全确定
mysite.example
始终解析为本地地址。否则,您可能会泄露生产凭据。 - 此标志仅适用于 Chrome,因此无法跨浏览器进行调试。
非常感谢所有审核者和贡献者(尤其是 Ryan Sleev、Filippo Valsorda、Milica Mihajlija 和 Rowan Merewood)做出的贡献和提供反馈。🙌