让Chrome信任自签名证书

让Chrome信任自签名证书(Unix系列OS)

背景

想在本地测试自己写的基于HTTPS连接的Web应用,跑在3001端口。但使用Chrome浏览器访问https://localhost:3001时显示连接不安全。

解决了但没解决

使用mkcert一键创建证书:

bash 复制代码
mkcert localhost 127.0.0.1

在当前目录下生成两个文件:localhost+1-key.pemlocalhost+1.pem ,这里面+1表示附加1个SAN 条目(127.0.0.1)。

然后将本机mkcert添加到系统信任的根证书颁发机构:

bash 复制代码
mkcert --install

控制台显示

复制代码
Created a new local CA 💥
Sudo password: (因为要修改系统信任,需要sudo权限)
The local CA is now installed in the system trust store! ⚡️

Mac用户可以在~/Library/'Application Support'/mkcert/中找到两个新生成的根证书rootCA-key.pemrootCA.pem ,并且在 钥匙串访问-系统钥匙串-系统 找那个看到一个新的证书mkcert 本机名

【温馨提示】Mac的Finder默认隐藏Library文件夹,可以从 前往-前往文件夹... 中输入~/Library/'Application Support'/mkcert/进入该文件夹。

双击rootCA.pem文件可进入 钥匙串访问 应用。

在服务器端代码中,使用

js 复制代码
const key = await readFile("./certs/localhost+1-key.pem");
const cert = await readFile("./certs/localhost+1.pem");

const httpsServer = createServer({
    key,
    cert
},(req, res)=>{});

根据别人的教程,到这问题就该解决了。但当我再使用Chrome浏览器访问https://localhost:3001时,仍然显示连接不安全。清除浏览器缓存没有用,检查浏览器信任证书也没有问题。

最终解决

再问Grok怎么为localhost生成自签名证书,发现它教我的命令中多了一个::1

bash 复制代码
mkcert localhost 127.0.0.1 ::1

这个::1是IPv6的本地回环地址。该命令执行后生成两个文件localhost+2-key.pemlocalhost+2.pem

在服务器代码中将localhost+1-key.pem, localhost+1.pem替换为localhost+2-key.pem, localhost+2.pem,再从浏览器中访问https://localhost:3001,就不会显示连接不安全了。

溯源

但为什么我的证书中已经签给了localhost,访问的也是localhost,但它非要验证IPv6证书的安全性呢?

打开浏览器的开发者工具,重加载页面,看 网络-请求-远程地址 栏目,发现当我们请求访问localhost的时候,浏览器默认将localhost解析为了IPv6的回环地址。(如果没有 远程地址 栏,可以通过 右键请求-标头选项 添加 远程地址)

主流浏览器(如 Chrome、Firefox、Edge)通常遵循操作系统的地址解析优先级。如果 localhost 解析到 ::1 且系统支持 IPv6,浏览器可能会首先尝试通过 ::1 连接。

相关推荐
小二·8 分钟前
Python Web 开发进阶实战 :AI 原生数字孪生 —— 在 Flask + Three.js 中构建物理世界实时仿真与优化平台
前端·人工智能·python
Amumu121381 小时前
Vue组件化编程
前端·javascript·vue.js
We་ct1 小时前
LeetCode 6. Z 字形变换:两种解法深度解析与优化
前端·算法·leetcode·typescript
小二·2 小时前
Python Web 开发进阶实战(终章):从单体应用到 AI 原生生态 —— 45 篇技术演进全景与未来开发者生存指南
前端·人工智能·python
m0_637256582 小时前
vue-baidu-map添加了类型组件导致非常卡顿的问题
前端·javascript·vue.js
挂机且五杀3 小时前
为什么在React地图组件里,memo 不是优化,而是生存?
前端·react.js·前端框架
RFCEO3 小时前
HTML编程 课程七、:HTML5 新增表单标签与属性
前端·html·html5·搜索框·手机号·邮箱验证·日期选择
刘一说3 小时前
Vue开发中的“v-model陷阱”:为什么它不能用于非表单元素?
前端·javascript·vue.js
利刃大大3 小时前
【Vue】组件生命周期 && 组件生命周期钩子
前端·javascript·vue.js·前端框架
建群新人小猿5 小时前
陀螺匠企业助手—个人简历
android·大数据·开发语言·前端·数据库