如何通过JavaScript在页面内获取Chrome系浏览器的TLS证书验证状态

首先明确：普通前端JavaScript无法直接获取浏览器的TLS证书验证状态。这是浏览器的安全策略决定的——底层的安全凭证信息会被严格隔离，防止网页脚本获取敏感的证书数据或验证结果。

如果要实现页面内展示证书状态的需求，只能通过**浏览器扩展（Chrome Extension）**来实现，因为扩展拥有更高的权限，可以调用浏览器提供的系统级API获取相关信息。以下是具体方案：

1. 开发浏览器扩展获取证书状态 #

Chrome内核的浏览器（包括Brave、Edge）都支持Chrome扩展API，你可以通过以下步骤实现：

步骤1：配置扩展权限 #

在扩展的manifest.json中申请必要的权限：

{
  "manifest_version": 3,
  "name": "证书状态检测",
  "version": "1.0",
  "permissions": ["webRequest", "tabs"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

步骤2：后台脚本监听请求并获取证书信息 #

在background.js中，通过chrome.webRequestAPI监听请求的响应头，获取证书及验证状态：

chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    // 浏览器已经完成证书验证，可通过请求状态判断有效性
    const isCertValid = details.statusCode === 200 && !details.error;
    
    // 将验证状态发送到当前标签页的网页
    chrome.tabs.sendMessage(details.tabId, {
      certValid: isCertValid
    });
  },
  { urls: ["<all_urls>"] },
  ["responseHeaders", "certificate"]
);

步骤3：网页接收扩展消息并展示状态 #

在你的网页中，添加监听扩展消息的代码，拿到状态后更新页面UI：

<div id="cert-status">检测中...</div>

<script>
// 监听来自扩展的证书状态消息
chrome.runtime.onMessage.addListener((message) => {
  const statusEl = document.getElementById('cert-status');
  if (message.certValid) {
    statusEl.textContent = "✅ 服务器证书有效";
    statusEl.style.color = "#2ecc71";
  } else {
    statusEl.textContent = "❌ 服务器证书无效";
    statusEl.style.color = "#e74c3c";
  }
});
</script>

2. 关键说明 #

• 普通网页无法绕过浏览器的安全限制直接获取证书状态，这是为了防止恶意网站窃取敏感的安全凭证信息。
• 扩展方案需要用户安装对应的扩展，且不同Chrome内核浏览器的扩展生态基本兼容，Brave、Edge都可以直接使用基于Chrome API开发的扩展。
• 浏览器地址栏的安全锁标识（如你提供的图片所示）是浏览器原生的状态展示，前端脚本无法直接读取或操控这个标识的内容。

内容的提问来源于stack exchange，提问作者Majoris