HTTPS页面上可以使用WS协议的websocket吗

Posted on Views:

不能直接在 HTTPS 页面上使用 WS,原因：混合内容（Mixed Content）安全策略。当你的网页通过 https:// 加载时，浏览器认为这是一个安全上下文。此时如果页面内的 JavaScript 尝试建立 ws:// 连接，浏览器会直接阻止，并在控制台报错：

Mixed Content: The page at 'https://example.com' was loaded over HTTPS,
but attempted to establish a WebSocket connection to 'ws://example.com'.
This is insecure and has been blocked.

什么浏览器要阻止

  1. HTTPS 承诺了安全，但 WS 是明文传输，相当于安全页面上开了一个不安全通道。
  2. 攻击者可以在网络中间位置窃听或篡改 WS 数据，破坏 HTTPS 提供的安全保障。
  3. 这属于”混合内容”中的active mixed content（主动混合内容），浏览器会严格拦截。

解决方案

唯一正确的做法是将 WebSocket 也升级为加密版本：**wss://**

1
2
3
4
5
// ❌ 错误：HTTPS 页面中会被浏览器拦截
const ws = new WebSocket('ws://example.com/socket');

// ✅ 正确：HTTPS 页面中可以正常工作
const ws = new WebSocket('wss://example.com/socket');

补充说明

  • HTTP 页面可以用 WS：如果你的网站本身是 http://（非加密），那么 ws:// 是可以正常使用的，但这种情况现在越来越少。
  • 本地开发例外：在 localhost 上，部分浏览器可能不会拦截，但这只是开发环境的宽松策略，上线后依然不行。