在Web安全领域，HTTPS证书是保障数据传输安全的核心。但作为前端开发者，你是否遇到过需要用JavaScript获取HTTPS证书信息的需求？比如检测用户访问的网站是否用了过期证书，或者分析第三方服务的CA机构是否可信？本文将通过3种实战方法，用通俗易懂的案例带你掌握这一技能。

一、为什么需要JS获取HTTPS证书？

HTTPS证书就像网站的“身份证”，包含域名、有效期、颁发机构（CA）等关键信息。通过JS获取这些信息，可以实现：

- 安全监控：检查当前页面的证书是否过期（比如银行网站如果证书过期，可能提示用户谨慎操作）。

- 第三方验证：嵌入的iframe或API服务是否使用了合法证书（防止中间人攻击）。

- 调试辅助：快速查看CDN或代理层返回的证书链。

二、方法1：通过浏览器API直接读取（现代浏览器）

最新版的Chrome和Firefox支持通过`Certificate Transparency` API获取证书基础信息：

```javascript

// 示例：获取当前页面的证书颁发者

if ('getCertificate' in window.crypto) {

const certificate = await window.crypto.getCertificate();

console.log('颁发者:', certificate.issuerName);

} else {

console.log('您的浏览器不支持此API');

}

```

适用场景：

快速检查当前页面证书的颁发者（比如区分Let's Encrypt和DigiCert）。

局限性：

1. 仅限当前页面域名（受同源策略限制）。

2. 无法读取完整证书链。

三、方法2：通过后端代理中转（通用方案）

如果想获取任意网站的HTTPS证书（比如https://example.com），可通过后端发起请求并返回结果：

// 前端请求

fetch('/api/get-certificate?url=https://example.com')

.then(response => response.json())

.then(data => console.log(data));

后端Node.js示例（使用`https`模块）：

const https = require('https');

app.get('/api/get-certificate', (req, res) => {

const targetUrl = new URL(req.query.url);

const options = { host: targetUrl.hostname, port: 443 };

https.get(options, (response) => {

const cert = response.socket.getPeerCertificate();

res.json({

issuer: cert.issuer,

validFrom: cert.valid_from,

validTo: cert.valid_to

});

});

});

关键点解释：

- `response.socket.getPeerCertificate()`能拿到完整的X.509证书对象。

- 安全性建议：后端需做好域名白名单校验，避免被滥用为网络扫描工具。

四、方法3：解析TLS握手数据（高级技巧）

对于本地工具或浏览器扩展，可以通过拦截TLS握手过程获取原始证书：

// Chrome扩展示例（需manifest权限）

chrome.webRequest.onHeadersReceived.addListener(

details => {

const certInfo = details.securityInfo?.certificate;

console.log('SAN列表:', certInfo.subjectAlternativeNames);

},

{ urls: [''] },

['blocking', 'responseHeaders']

);

实际案例：

某金融公司用此方法开发内部插件，自动检测所有子域名的证书到期时间，提前7天邮件告警。

五、安全风险与避坑指南

1. 隐私问题：

- CA机构可能包含敏感信息（如企业名称），未经用户同意收集可能违反GDPR。

2. 性能影响：

- 频繁请求证书会触发服务器的TLS握手开销（解决方法：缓存结果）。

3. 常见错误：

```javascript

// ? HTTPS混用时可能报错

fetch('http://mixed-content-site.com'); // Blocked by browser

```

六、表格对比各方案

| 方法 | 优点 | 缺点 | 适用场景 |

||--|--||

| Browser API | 纯前端实现 | 兼容性差 | Chrome/Firefox环境快速检测 |

| Backend Proxy | 支持任意域名 | 需维护服务器 | SaaS服务监控 |

| TLS Handshake Parsing??|?完整原始数据????????????????|?需浏览器扩展权限????????????|?企业内部工具开发??????????|

掌握这些技术后，你可以轻松实现诸如「自动巡检子公司网站HTTPS配置」或「嵌入内容安全审计」等功能。如果对具体代码有疑问，欢迎在评论区交流！

TAG:js获取https证书,js读取浏览器证书,js获取当前网址参数,javascript证书