在当今的互联网世界中，HTTPS已经成为网站安全的标配。但作为前端开发者，你是否想过：浏览器是如何通过JavaScript（JS）验证HTTPS证书的？如果证书无效，会发生什么？ 本文将通过通俗易懂的例子和实际场景，带你彻底搞懂JS与HTTPS证书验证的关系。

一、HTTPS证书验证的基本流程

当用户访问一个HTTPS网站（比如`https://example.com`）时，浏览器会执行以下步骤：

1. 握手阶段：浏览器与服务器建立连接，服务器返回它的数字证书。

2. 验证证书：浏览器检查证书是否由受信任的机构（如Let's Encrypt、DigiCert）签发，是否在有效期内，域名是否匹配。

3. 加密通信：验证通过后，双方开始加密传输数据。

举例：就像你去银行办业务，柜员会要求你出示身份证（证书）。银行（浏览器）会检查身份证是否由公安局（CA机构）签发、是否过期、照片是否是你本人（域名匹配）。

二、JS如何参与HTTPS证书验证？

严格来说，JavaScript本身不直接参与证书验证——这是浏览器的底层功能。但JS可以通过API感知证书状态，并做出反应：

1. 检测无效证书

如果服务器证书无效（比如自签名或过期），浏览器会直接拦截请求并显示警告页面（如Chrome的`NET::ERR_CERT_INVALID`）。此时JS代码甚至无法执行！

```javascript

// 尝试访问一个无效HTTPS网站的示例

fetch('https://expired.badssl.com')

.then(response => console.log('成功')) // 不会执行

.catch(err => console.error('失败:', err)); // 被浏览器拦截

```

2. 主动获取证书信息

通过`window.crypto`或第三方库（如`forge`），可以解析当前页面的证书信息：

// 获取当前页面的SSL证书有效期（需在HTTPS环境下运行）

const certInfo = await fetch('https://example.com')

.then(res => res.headers.get('strict-transport-security'));

console.log(certInfo); // max-age=63072000; includeSubDomains; preload

三、实际开发中的5个关键点

1. 混合内容警告（Mixed Content）

如果HTTPS页面中通过JS加载了HTTP资源（如图片、脚本），浏览器会阻止这些请求并报错：

```html

解决方法：确保所有资源使用相对路径或完整的HTTPS URL。

2. CORS与证书的关系

即使后端API的HTTPS证书有效，如果未正确配置CORS头，JS仍然无法访问：

fetch('https://api.example.com/data')

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

// 可能报错：No 'Access-Control-Allow-Origin' header is present

3. Service Worker的强制HTTPS要求

注册Service Worker时，脚本必须通过HTTPS加载：

// 在HTTP页面下会失败：

navigator.serviceWorker.register('/sw.js');

// TypeError: Failed to register a ServiceWorker: The URL protocol must be HTTPS.

4. 本地开发时的自签名证书

开发时常用自签名证书（如Webpack的`https: true`配置），此时需要手动信任证书或在代码中忽略错误：

// Node.js中忽略证书错误（仅限开发环境！）

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';

5. 预加载HSTS头

通过响应头告诉浏览器“强制使用HTTPS”，防止降级攻击：

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

四、进阶场景：手动校验第三方API的证书

某些金融/医疗应用需要额外校验后端API的指纹。可通过比较公钥哈希值实现：

// （伪代码）检查API证书的公钥指纹是否符合预期

const expectedFingerprint = 'A1:B2:C3...';

fetch('https://bank-api.com')

.then(res => {

const cert = res.serverCertificate;

if (calculateSHA256(cert) !== expectedFingerprint) {

throw new Error('Certificate mismatch!');

}

return res.json();

});

> ??注意：现代浏览器的Web Crypto API限制较多，此类操作通常需配合后端完成。

五、表格：JS与HTTPS验证的关键行为

| 场景 | 浏览器的行为 | JS能否干预？ |

||--||

| 无效/过期SSL证

TAG:js如何https证书验证,javascript验证,js实现验证码功能,js验证用户名和密码