作者:Maud Nalpas 原文链接:How to use HTTPS for local development 译者:Yodonicc 有时,您需要使用 HTTPS 运行本地开发网站。本文介绍了安全快速地执行此操作的工具和技巧。 小心 在大多数情况下,
http://localhost
就可以满足您的需求:在浏览器中,它的行为与 HTTPS 🔒 非常类似。因此,部分无法在部署的 HTTP 网站上运行的 API 可以在 http://localhost
上运行。 这意味着您只需要在特殊情况下才需要在本地使用 HTTPS(请参阅Localhost何时要用HTTPS?),例如自定义主机名或跨浏览器的安全 cookie。如果您有这种需求,请继续阅读!
在这篇文章中,关于localhost
的说法对127.0.0.1
和[::1]
也是有效的,因为它们都描述了本地计算机地址,也叫 "回环地址"。另外,为了使事情简单,不指定端口号。因此,当你看到http://localhost
时,请将其理解为http://localhost:{PORT}
或 http://127.0.0.1:{PORT}
。
如果您在生产网站使用了 HTTPS,并希望本地开发网站的行为可以接近 HTTPS 网站(如果您的生产网站还没有使用 HTTPS,请优先切换到 HTTPS )。在大多数情况下,您可以认为 http://localhost
的行为类似于 HTTPS 网站。但在某些情况下,您需要使用 HTTPS 在本地运行网站。现在来看看如何做到这一点。
要为本地开发网站开启 HTTPS 并访问 https://localhost
或 https://mysite.example
(自定义主机名),您需要 TLS 证书。但并非任何证书都会被浏览器接受:证书需要由您的浏览器信任的实体签名,这些实体称之为可信证书颁发机构 (CA) 。
您需要创建一个证书,并使用受您的设备和浏览器本地信任的 CA对其进行签名。 您可以使用工具 mkcert 通过几个命令来实现这个目的。下面介绍了它的工作原理:
mkcert 工作原理图
mkcert(和类似工具)具备下列几种优势:
我们推荐使用 mkcert 为本地开发创建 TLS 证书。
许多操作系统可能会提供用于生成证书的库,例如 openssl 。与 mkcert 和类似工具不同,此类库可能无法始终生成正确的证书,或可能需要运行复杂的命令,并且不一定能够跨平台使用。
小心运行
mkcert -install
时,切勿导出或分享由 mkcert 自动创建的rootCA-key.pem
。获得此文件的攻击者可以对您可能正在访问的任何网站进行路径攻击。他们可以拦截从您的电脑到任何网站(银行、医保供应商或社交网络)的安全请求。如果您需要知道rootCA-key.pem
的位置以确保其安全,请运行mkcert -CAROOT
。 - 仅将 mkcert 用于开发目的,并且永远不要要求最终用户运行 mkcert 命令。 - 开发团队:所有团队成员都应该单独安装和运行 mkcert(而不是存储和共享 CA 和证书)。
按照操作说明在操作系统上安装 mkcert。例如,在 macOS 上:
brew install mkcert
brew install nss # if you use Firefox
在终端运行以下命令:
mkcert -install
这会生成本地证书颁发机构 (CA)。mkcert 生成的本地 CA 仅在您的设备上本地受信。
在终端中,导航到网站的根目录或用来保存证书的任何目录。
然后运行:
mkcert localhost
如果您的自定义主机名是 mysite.example
,请运行:
mkcert mysite.example
上面的命令执行了两个操作:
现在证书已准备就绪,并且已由您的浏览器在本地信任的证书颁发机构签名。大部分步骤已经完成,但您的服务器现在还不了解这个证书!
您现在需要告诉服务器使用 HTTPS(因为默认情况下开发服务器倾向使用 HTTP)并使用您刚刚创建的 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"
👩🏻💻 其他例子:
https://localhost
或https://mysite.example
:这时就在使用 HTTPS 在本地运行您的网站。您不会看到任何浏览器警告,因为浏览器已将 mkcert 认作是本地证书颁发机构。服务器可以使用不同的 HTTPS 端口。
要使用 HTTPS 运行本地开发网站:
如果您还没有安装 mkcert,例如在 macOS 上:
brew install mkcert
查看 Windows 和 Linux 上的 mkcert 安装说明。
然后,创建本地证书颁发机构:
mkcert -install
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
此命令会创建一个有效的证书(由 mkcert
自动签名)。
https://{YOUR HOSTNAME}
,并且不会收到任何警告了小心 请仅用于开发目的,切勿导出或分享
rootCA-key.pem
文件(如果您需要知道此文件的位置以确保其安全,请运行mkcert -CAROOT
)。
您也可以不使用 mkcert 这样的本地证书颁发机构,而是自己签署证书。
请注意这种方法的一些缺点:
#allow-insecure-localhost
localhost
自动绕过此警告。这确实有些麻烦。<center> 使用自签名证书时浏览器显示的警告
如果您没有指定任何证书,那么 React 和 Vue 的开发服务器 HTTPS 选项会在后台创建一个自签名证书。这样虽然很快捷,但您会收到浏览器警告,并遇到与上面列出的与自签名证书相关的其他问题。幸运的是,您可以使用前端框架的内置 HTTPS 选项并指定由 mkcert 或类似工具创建的本地可信证书。请前往React 与 mkcert 示例查看如何执行此操作。
如果您使用 HTTPS 在浏览器中打开本地运行的网站,浏览器将检查本地开发服务器的证书。当它看到证书由您签名时,它会检查您是否已注册为受信任的证书颁发机构。因为您不是,所以浏览器不能信任此证书;它会警告您的连接不安全。您可以自行承担风险。如果选择这样,那么将创建 HTTPS 连接。
您还可以找到基于由实际证书颁发机构(而不是本地机构)签署证书的技术。
如果您在考虑使用这些技术,请记住以下几点:
无法
用于:
使用 HTTPS 访问本地运行网站的另一种方法是使用反向代理,例如 ngrok 。
需要考虑的几点:
如果您使用了 mysite.example
这样的自定义主机名,那么可以在 Chrome 中使用标志来强制将 mysite.example
认作是安全的。请避免使用这种方法,因为:
mysite.example
始终解析为本地地址,否则可能会泄露生产凭据。非常感谢所有审阅者和贡献者的贡献和反馈,特别感谢 Ryan Sleevi、Filippo Valsorda、Milica Mihajlija 和 Rowan Merewood。 🙌
文中照片来源:@ananduon 在 Unsplash
注:特别感谢技术指导dazhao(赵达)对本文翻译的审阅指正。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有