前端如何检测 HTTPS 状态

检测 HTTPS 状态的必要性

HTTPS 是保障网站安全的基础协议，前端检测 HTTPS 状态能防止中间人攻击、数据篡改等风险。通过主动检查协议类型，可确保敏感操作（如支付、登录）仅在安全环境下执行，避免用户信息泄露。

通过 window.location.protocol 检测

最直接的方式是检查当前页面的协议：

if (window.location.protocol !== 'https:') {
  console.warn('当前页面未使用HTTPS');
  // 强制跳转到HTTPS版本
  window.location.href = window.location.href.replace('http:', 'https:');
}

注意事项：

1. 此方法仅在页面加载后生效
2. 混合内容（HTTP iframe/资源）不会触发警告
3. 需配合服务器重定向使用

使用 navigator.userAgent 辅助检测

某些旧版浏览器可能不支持现代API，可通过UA检测增强兼容性：

const isOldAndroid = /Android [2-4]/.test(navigator.userAgent);
if (isOldAndroid && window.location.protocol === 'http:') {
  alert('您的设备可能存在安全风险，请升级系统');
}

通过 SecurityPolicyViolationEvent 监听CSP违规

配置Content-Security-Policy后，可监听安全策略违规事件：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<script>
document.addEventListener('securitypolicyviolation', (e) => {
  console.error(`安全策略违规：${e.blockedURI}`);
});
</script>

检测混合内容（Mixed Content）

浏览器会自动阻止主动混合内容，但被动内容（如图片）仍可能泄露信息：

// 检测页面中的所有资源
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('img, video, audio, iframe').forEach(el => {
    if (el.src.startsWith('http:')) {
      console.warn(`混合内容：${el.src}`);
      el.remove(); // 或替换为HTTPS版本
    }
  });
});

使用 window.isSecureContext 属性

现代浏览器提供该属性判断当前上下文是否安全：

if (!window.isSecureContext) {
  console.warn('当前上下文不安全，部分API将不可用');
  // 例如：Service Worker、Web Crypto API等会受限
}

Service Worker 中的检测

在Service Worker安装时验证请求协议：

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.protocol === 'http:' && !url.hostname.match(/^localhost$|^127\.\d+\.\d+\.\d+$/)) {
    event.respondWith(
      new Response('', { status: 403, statusText: 'Insecure Request' })
    );
  }
});

WebSocket 连接安全验证

建立WebSocket连接时强制使用WSS：

function createSafeWebSocket(url) {
  const wsUrl = url.replace(/^http/, 'ws').replace(/^https/, 'wss');
  return new WebSocket(wsUrl);
}

const socket = createSafeWebSocket(window.location.href);
socket.onerror = () => console.error('WebSocket连接不安全');

性能优化与缓存策略

安全检测可能影响性能，推荐策略：

1. 主域名设置HSTS头
2. 预加载HSTS列表
3. 使用<link rel="preconnect">提前建立安全连接

# 服务器响应头示例
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

特殊场景处理

本地开发环境：

const isLocalhost = ['localhost', '127.0.0.1'].includes(window.location.hostname);
if (!isSecureContext && !isLocalhost) {
  // 生产环境强制跳转
}

浏览器扩展： Chrome扩展可通过chrome.webRequestAPI监控请求：

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (details.url.startsWith('http:')) {
      return { cancel: true };
    }
  },
  { urls: ["<all_urls>"] },
  ["blocking"]
);

移动端特殊处理

某些WebView可能忽略安全策略，需要额外检测：

const isInsecureWebView = /; wv\)/.test(navigator.userAgent) && 
                         !window.location.protocol.includes('https');

if (isInsecureWebView) {
  document.body.innerHTML = '<h1>请使用官方APP访问</h1>';
}

与后端配合的深度验证

前端检测可被绕过，应与后端协同验证：

// 前端发送验证请求
fetch('/api/verify-https', { 
  credentials: 'include' 
}).then(res => {
  if (!res.headers.get('x-secure-context')) {
    throw new Error('后端验证失败');
  }
});

Node.js示例响应头：

res.setHeader('Strict-Transport-Security', 'max-age=31536000');
res.setHeader('X-Secure-Context', 'true');

浏览器兼容性解决方案

针对不支持现代API的浏览器，可采用降级方案：

function isSecure() {
  return 'isSecureContext' in window ? 
    window.isSecureContext : 
    window.location.protocol === 'https:';
}

安全头部的综合应用

推荐组合使用这些HTTP头部：

Content-Security-Policy: upgrade-insecure-requests
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin

可视化反馈方案

给用户明确的视觉提示：

body:not(.secure)::before {
  content: "⚠ 不安全连接";
  position: fixed;
  top: 0;
  background: #c00;
  color: white;
  width: 100%;
  text-align: center;
  z-index: 9999;
}

body.secure::after {
  content: "🔒 安全连接";
  position: fixed;
  bottom: 0;
  background: #090;
  color: white;
  padding: 5px;
}

document.body.classList.toggle('secure', window.isSecureContext);