主要還是因為:
1、WebSocket 是獨立于 HTTP 的應用層協議,通過 HTTP 建立連接后,完全脫離 HTTP 語義約束。這意味著
-
不受 HTTP 同源策略限制
-
不需要預檢請求
-
不依賴 CORS 頭機制
2、建立連接時的握手請求仍使用 HTTP 格式,但具有特殊標記:
類似于下述代碼,當瀏覽器發起 WebSocket 連接時,會自動將當前網頁的源(協議+域名+端口)填入?Origin?請求頭。內部實現了跨域
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: https://client.example.com // 關鍵跨域標識
Sec-WebSocket-Version: 13
? ?注:雖然目前服務端不做白名單校驗也能成功,但為了安全還是要做一下di~
? ?服務端可以用下列代碼進行驗證以防惡意操作
wss.on('connection', (ws, req) => {
// 進行白名單校驗const allowedOrigins = ['https://myapp.com', 'https://admin.myapp.com'];if (!allowedOrigins.includes(req.headers.origin)) {ws.close(1008, 'Invalid origin'); // 關閉非法來源連接return;}
}