前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Localhost如何使用HTTPS?

Localhost如何使用HTTPS?

原创
作者头像
智影Yodonicc
修改于 2022-04-24 07:52:15
修改于 2022-04-24 07:52:15
13.3K01
代码可运行
举报
文章被收录于专栏:智影Yodonicc智影Yodonicc
运行总次数:1
代码可运行

作者: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 在本地运行网站。现在来看看如何做到这一点。

使用 mkcert 为本地网站开启 HTTPS(推荐)

要为本地开发网站开启 HTTPS 并访问 https://localhosthttps://mysite.example(自定义主机名),您需要 TLS 证书。但并非任何证书都会被浏览器接受:证书需要由您的浏览器信任的实体签名,这些实体称之为可信证书颁发机构 (CA)

您需要创建一个证书,并使用受您的设备和浏览器本地信任的 CA对其进行签名。 您可以使用工具 mkcert 通过几个命令来实现这个目的。下面介绍了它的工作原理:

  • 如果您使用 HTTPS 在浏览器中打开本地运行的网站,浏览器将检查本地开发服务器的证书。
  • 在看到证书已由 mkcert 生成的证书颁发机构签名后,浏览器会检查它是否已注册为受信任的证书颁发机构。
  • mkcert 已被列为受信任的颁发机构,所以浏览器会信任该证书并创建 HTTPS 连接。
post10image1.jpeg
post10image1.jpeg

mkcert 工作原理图

mkcert(和类似工具)具备下列几种优势:

  • mkcert 专门用于创建与浏览器认为有效相兼容的证书。它会保持更新,来满足需求和最佳实践。因此您无需运行具备复杂配置或参数的 mkcert 命令,就可以生成正确的证书!
  • mkcert 是跨平台的工具。团队中的任何人都可以使用。

我们推荐使用 mkcert 为本地开发创建 TLS 证书。

许多操作系统可能会提供用于生成证书的库,例如 openssl 。与 mkcert 和类似工具不同,此类库可能无法始终生成正确的证书,或可能需要运行复杂的命令,并且不一定能够跨平台使用。

问题 我们在这篇文章中感兴趣的 mkcert 是这个,而不是这个

警告

小心运行mkcert -install时,切勿导出或分享由 mkcert 自动创建的 rootCA-key.pem获得此文件的攻击者可以对您可能正在访问的任何网站进行路径攻击。他们可以拦截从您的电脑到任何网站(银行、医保供应商或社交网络)的安全请求。如果您需要知道 rootCA-key.pem 的位置以确保其安全,请运行 mkcert -CAROOT 。 - 仅将 mkcert 用于开发目的,并且永远不要要求最终用户运行 mkcert 命令。 - 开发团队:所有团队成员都应该单独安装和运行 mkcert(而不是存储和共享 CA 和证书)。

设置

  1. 安装 mkcert(仅一次)。

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

代码语言:shell
AI代码解释
复制
   brew install mkcert

   brew install nss # if you use Firefox
  1. 将 mkcert 添加到本地根 CA。

在终端运行以下命令:

代码语言:shell
AI代码解释
复制
   mkcert -install

这会生成本地证书颁发机构 (CA)。mkcert 生成的本地 CA 仅在您的设备上本地受信。

  1. 为网站生成一个由 mkcert 签名的证书。

在终端中,导航到网站的根目录或用来保存证书的任何目录。

然后运行:

代码语言:shell
AI代码解释
复制
   mkcert localhost

如果您的自定义主机名是 mysite.example,请运行:

代码语言:shell
AI代码解释
复制
   mkcert mysite.example

上面的命令执行了两个操作:

  • 为您指定的主机名生成证书
  • 让 mkcert(您在步骤 2 中添加为本地 CA)签署此证书。

现在证书已准备就绪,并且已由您的浏览器在本地信任的证书颁发机构签名。大部分步骤已经完成,但您的服务器现在还不了解这个证书!

  1. 配置服务器。

您现在需要告诉服务器使用 HTTPS(因为默认情况下开发服务器倾向使用 HTTP)并使用您刚刚创建的 TLS 证书。

具体的操作取决于您的服务器。下面列出了几个例子:

👩🏻‍💻 使用节点:

server.js (替换{PATH/TO/CERTIFICATE...}{PORT} ):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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...} ):

代码语言:shell
AI代码解释
复制
   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...}

代码语言:json
AI代码解释
复制
   "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 创建了证书:

代码语言:text
AI代码解释
复制
   |-- my-react-app

   |-- package.json

   |-- localhost.pem

   |-- localhost-key.pem

   |--...

那么 start 脚本应该是这样的:

代码语言:json
AI代码解释
复制
   "scripts": {

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

👩🏻‍💻 其他例子:

  • Angular 开发服务器
  • Python
  • ✨全部搞定!在浏览器中打开 https://localhosthttps://mysite.example :这时就在使用 HTTPS 在本地运行您的网站。您不会看到任何浏览器警告,因为浏览器已将 mkcert 认作是本地证书颁发机构。

服务器可以使用不同的 HTTPS 端口。

mkcert 总结

要使用 HTTPS 运行本地开发网站:

  1. 设置 mkcert。

如果您还没有安装 mkcert,例如在 macOS 上:

代码语言:shell
AI代码解释
复制
   brew install mkcert

查看 WindowsLinux 上的 mkcert 安装说明。

然后,创建本地证书颁发机构:

代码语言:shell
AI代码解释
复制
   mkcert -install
  1. 创建受信任的证书。
代码语言:shell
AI代码解释
复制
   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

此命令会创建一个有效的证书(由 mkcert 自动签名)。

  1. 配置开发服务器来使用 HTTPS 和在步骤 2 中创建的证书。
  2. ✨全部搞定!您现在可以在浏览器中访问 https://{YOUR HOSTNAME},并且不会收到任何警告了

小心 请仅用于开发目的切勿导出或分享rootCA-key.pem 文件(如果您需要知道此文件的位置以确保其安全,请运行mkcert -CAROOT )。

在本地网站开启 HTTPS:其他方法

自定义证书

您也可以不使用 mkcert 这样的本地证书颁发机构,而是自己签署证书

请注意这种方法的一些缺点:

  • 浏览器不信任您的证书颁发机构身份,因此会显示警告,您需要手动绕过。在 Chrome 中,您可以使用标志 #allow-insecure-localhost localhost 自动绕过此警告。这确实有些麻烦。
  • 如果您的网络环境不安全,此举会带来潜在风险。
  • 自签名证书的行为方式与受信任证书的行为方式不同。
  • 它不一定比使用 mkcert 这样的本地 CA 更方便或更快捷。
  • 如果您没有在浏览器上下文中使用此技术,则可能需要禁用服务器的证书验证。在生产中忘记重新启用它会带来潜在风险。
post10image2.jpeg
post10image2.jpeg

<center> 使用自签名证书时浏览器显示的警告

如果您没有指定任何证书,那么 ReactVue 的开发服务器 HTTPS 选项会在后台创建一个自签名证书。这样虽然很快捷,但您会收到浏览器警告,并遇到与上面列出的与自签名证书相关的其他问题。幸运的是,您可以使用前端框架的内置 HTTPS 选项指定由 mkcert 或类似工具创建的本地可信证书。请前往React 与 mkcert 示例查看如何执行此操作。

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

如果您使用 HTTPS 在浏览器中打开本地运行的网站,浏览器将检查本地开发服务器的证书。当它看到证书由您签名时,它会检查您是否已注册为受信任的证书颁发机构。因为您不是,所以浏览器不能信任此证书;它会警告您的连接不安全。您可以自行承担风险。如果选择这样,那么将创建 HTTPS 连接。

post10image3.jpeg
post10image3.jpeg

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

您还可以找到基于由实际证书颁发机构(而不是本地机构)签署证书的技术。

如果您在考虑使用这些技术,请记住以下几点:

  • 与 mkcert 这样的本地 CA 技术相比,您需要投入更多的设置工作。
  • 您需要使用由自己控制且有效的域名。这表示实际的证书颁发机构

无法

用于:

  • localhost 和其他保留域名,例如 exampletest
  • 您无法控制的任何域名。
  • 无效的顶级域。请参阅有效顶级域的列表。

反向代理

使用 HTTPS 访问本地运行网站的另一种方法是使用反向代理,例如 ngrok

需要考虑的几点:

  • 一旦您与任何用户分享了使用反向代理创建的 URL,他们都可以访问您的本地开发网站。这在向客户演示您的项目时非常方便!但如果您的项目很敏感,这可能是一个缺点。
  • 您可能需要考虑定价。
  • 浏览器新引入的安全措施可能会影响这些工具的表现。

标志(不推荐)

如果您使用了 mysite.example 这样的自定义主机名,那么可以在 Chrome 中使用标志来强制将 mysite.example 认作是安全的。请避免使用这种方法,因为:

  • 您需要 100% 确定mysite.example始终解析为本地地址,否则可能会泄露生产凭据。
  • 此方法不支持跨浏览器调试 🙀

非常感谢所有审阅者和贡献者的贡献和反馈,特别感谢 Ryan Sleevi、Filippo Valsorda、Milica Mihajlija 和 Rowan Merewood。 🙌

文中照片来源:@ananduon 在 Unsplash

注:特别感谢技术指导dazhao(赵达)对本文翻译的审阅指正

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
50.5k star,本地 SSL 证书生成神器,轻松解决 HTTPS 配置痛点!
mkcert是一款备受欢迎的开源工具,它以其简洁性、易用性和强大的功能而受到开发者的青睐。
民工哥
2024/11/29
5020
50.5k star,本地 SSL 证书生成神器,轻松解决 HTTPS 配置痛点!
利用 mkcert 快速生成自签证书
在某些开发场景下,项目必须使用https才能进行使用,比如音视频,webtrc等需要调用chrome的麦克风和摄像头,浏览器为了安全起见就必须要求是https才允许调用。然而,在本地开发环境中配置 HTTPS 可能会比较麻烦。幸运的是,mkcert 是一个简单易用的工具,可以帮助我们快速生成自签名证书。本文将介绍如何使用 mkcert 生成自签名证书,并在内网环境或者本地开发环境中使用它们。
Lcry
2024/10/30
3990
何时以及如何在你的本地开发环境中使用 HTTPS
翻译:布兰 作者:Maud Nalpas https://web.dev/when-to-use-local-https/ https://web.dev/how-to-use-local-https/
用户4456933
2021/06/01
2.8K0
何时以及如何在你的本地开发环境中使用 HTTPS
使用mkcert工具生成受信任的SSL证书,解决局域网本地https访问问题
输入mkcert-v1.4.3-windows-amd64.exe -install 命令 ,安装mkcert。将CA证书加入本地可信CA,使用此命令,就能帮助我们将mkcert使用的根证书加入了本地可信CA中,以后由该CA签发的证书在本地都是可信的。卸载命令 mkcert-v1.4.3-windows-amd64.exe -install
宝耶需努力
2022/12/13
9.8K0
使用mkcert工具生成受信任的SSL证书,解决局域网本地https访问问题
轻松获取永久有效的SSL证书,HTTP秒变HTTPS
以Windows系统为例,下载链接https://github.com/FiloSottile/mkcert/releases/download/v1.4.4/mkcert-v1.4.4-windows-amd64.exe
用户5921339
2025/05/20
2200
轻松获取永久有效的SSL证书,HTTP秒变HTTPS
教你秒建受信任的本地 SSL 证书,彻底解决开发测试环境的无效证书警告烦恼!
您是否厌倦了在本地开发项目中使用不受信任的 SSL 证书?维护自己的证书颁发机构(CA)是一个痛苦的事情,这过程中需要用到神秘的程序和命令。在本指南中,我将向您展示一种在没有 CA 的情况下在本地开发计算机上使用受信任 SSL 证书的简单方法。
iMike
2019/09/26
8.5K0
本地站点开启https
本文这里要说的是如何在本地环境搭建 https,至于说有什么用,假如你找到这了, 就说明你已经用到了. Chrome NET::ERR_CERT_COMMON_NAME_INVALID
chuchur
2022/10/25
9360
本地站点开启https
choco 安装 和 mkcert 本地https
原文链接:https://blog.spiritling.cn/posts/4cb12659/
SpiritLing
2020/07/20
1.4K0
choco 安装 和 mkcert 本地https
创建本地 LocalHost SSL 证书
程序开发时,避免不了使用https加密通信,可以通过 openssl 工具来生成 ssl 证书,对于不懂的开发来说,openssl 工具是太难使用。有没有一个好用又简单的工具,可以试一试这个用Go语言写的命令行工具:mkcert,非常简单易用。
YP小站
2020/06/04
3.7K0
创建本地 LocalHost SSL 证书
怎么用Node.js创建HTTPS服务器?
HTTPS已经无所不在,作为开发者,我们经常需要访问或者使用HTTPS服务器。本文重要介绍了如何用 Node.js 在本地创建一个HTTPS开发服务器。
用户7261497
2020/05/26
6.8K0
怎么用Node.js创建HTTPS服务器?
Jtti:SSL证书无效的原因及对应解决办法
SSL证书无效通常会导致用户在访问网站时遇到安全警告或错误。SSL证书的无效可能由多种原因引起,以下是一些常见原因及其对应的解决办法:
jtti
2024/08/14
4140
Nodejs进阶:核心模块https 之 如何优雅的访问12306
IMWeb前端团队
2018/01/08
1.7K0
The Things Network LoRaWAN Stack V3 学习笔记 2.1.2 客户端导入自签名 CA 证书
TTN 的开发环境使用了自签名证书,浏览器端在进行OAUTH登录时会弹出警告,当然我们可以无视警告强制跳转。但本地客户端 CLI 也需要进行 SSL 交互,因此本地也需要添加 CA 证书。
twowinter
2020/04/17
1.4K0
如何在Debian 9上安装和配置Nextcloud
Nextcloud是ownCloud的一个分支,它是一个文件共享服务器,允许您将个人内容(如文档和图片)存储在集中位置,就像Dropbox一样。与Nextcloud的不同之处在于它的所有功能都是开源的。它还会将敏感数据的控制权和安全性返回给您,从而无需使用第三方云托管服务。
独钓寒江雪_Ly
2018/11/08
4.8K0
内网自签发https 证书
HTTPS(全称:HyperText Transfer Protocol Secure)是HTTP(超文本传输协议)的安全版本。本质上,HTTPS在HTTP的基础上,通过SSL/TLS协议提供了数据加密、完整性保护和身份验证,以确保网络数据传输的安全性。HTTPS被广泛用于互联网上的安全通信,特别是在线交易和处理敏感信息时,本文以Nginx为例部署自签发https证书。
老K博客
2024/05/20
1.3K0
内网自签发https 证书
【Vite】配置HTTPS&amp;自签名证书
在学习开发 WebRTC 相关的项目的时候是需要使用到 HTTPS 安全协议才能正常工作的,所以我们需要在 Vite 构建的项目中启用 HTTPS 协议并且配置证书文件,在生产环境是需要申请商用版证书(付费)的,我们在本地开发的工程中可以使用自签名的证书来搞定。
前端小鑫同学
2022/12/26
3.2K0
【Vite】配置HTTPS&amp;自签名证书
什么是 HTTPS 的证书信任链?自己给自己发行不行?
互联网应用的网络通信一般都是通过 HTTP,但 HTTP 是明文传输的,容易泄漏信息,所以大多数应用都会升级为 HTTPS。
神说要有光zxg
2022/11/11
1.5K0
什么是 HTTPS 的证书信任链?自己给自己发行不行?
toxssin-XSS 漏洞利用命令行界面和有效负载生成器
toxssin 是一种开源渗透测试工具,可自动执行跨站脚本 (XSS) 漏洞利用过程。它由一个 https 服务器组成,它充当为该工具 (toxin.js) 提供动力的恶意 JavaScript 有效负载生成的流量的解释器。
用户8478399
2022/09/27
9340
toxssin-XSS 漏洞利用命令行界面和有效负载生成器
https通讯基础知识汇总
trustStore是存储可信任的公钥,如6中红色字体中trustStore的生成过程就是把从keyStore导出的公钥证书导入到trustStore中。
全栈程序员站长
2022/08/09
1.3K0
https通讯基础知识汇总
Django 生成 ssl 安全证书,切换 https、wss协议(daphne 、nginx)
Django 普通 http 协议不够安全,无法支持连接本地摄像头(虽然在本地 localhost 上能连),此时需要切换成 https 协议(先提个醒,我这个方法最后失败了,不过对您应该也有帮助)
用户11404404
2025/03/30
1140
Django 生成 ssl 安全证书,切换 https、wss协议(daphne 、nginx)
推荐阅读
相关推荐
50.5k star,本地 SSL 证书生成神器,轻松解决 HTTPS 配置痛点!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验