ส่วนหัว HTTP ใน API ไคลเอนต์ Websockets

ดูเหมือนว่าจะง่ายต่อการเพิ่มส่วนหัว HTTP ที่กำหนดเองไปยังไคลเอนต์ websocket ของคุณด้วยไคลเอนต์ส่วนหัว HTTP ใด ๆ ที่สนับสนุนสิ่งนี้ แต่ฉันไม่สามารถหาวิธีที่จะทำกับ JSON API

แต่ก็ดูเหมือนว่าควรจะมีการสนับสนุนส่วนหัวเหล่านี้ในสเปค

ทุกคนมีเงื่อนงำเกี่ยวกับวิธีการบรรลุหรือไม่

var ws = new WebSocket("ws://example.com/service");

โดยเฉพาะฉันต้องสามารถส่งส่วนหัว HTTP Authorization

อัปเดต 2x

คำตอบสั้น ๆ : ไม่สามารถระบุได้เฉพาะเส้นทางและเขตข้อมูลโปรโตคอล

คำตอบอีกต่อไป:

ไม่มีวิธีใน JavaScript WebSockets APIสำหรับระบุส่วนหัวเพิ่มเติมสำหรับไคลเอนต์ / เบราว์เซอร์ที่จะส่ง เส้นทาง HTTP ("GET / xyz") และส่วนหัวของโปรโตคอล ("Sec-WebSocket-Protocol") สามารถระบุได้ในตัวสร้าง WebSocket

ส่วนหัว Sec-WebSocket-Protocol (ซึ่งบางครั้งมีการขยายเพื่อใช้ในการรับรองความถูกต้องเฉพาะของ websocket) ถูกสร้างขึ้นจากอาร์กิวเมนต์ตัวเลือกที่สองไปยังตัวสร้าง WebSocket:

var ws = new WebSocket("ws://example.com/path", "protocol");
var ws = new WebSocket("ws://example.com/path", ["protocol1", "protocol2"]);

ผลลัพธ์ข้างต้นในส่วนหัวต่อไปนี้:

Sec-WebSocket-Protocol: protocol

และ

Sec-WebSocket-Protocol: protocol1, protocol2

รูปแบบทั่วไปสำหรับการบรรลุการรับรองความถูกต้อง / การอนุญาต WebSocket คือการใช้ระบบตั๋วที่หน้าโฮสต์ไคลเอ็นต์ WebSocket ร้องขอตั๋วจากเซิร์ฟเวอร์จากนั้นส่งตั๋วนี้ระหว่างการตั้งค่าการเชื่อมต่อ WebSocket ทั้งในสตริง URL / แบบสอบถามในฟิลด์โปรโตคอล หรือจำเป็นต้องเป็นข้อความแรกหลังจากการเชื่อมต่อถูกสร้างขึ้น เซิร์ฟเวอร์อนุญาตให้ทำการเชื่อมต่อต่อไปได้หากตั๋วถูกต้อง (มีอยู่, ไม่ได้ใช้งาน, มีการเข้ารหัส IP ไคลเอ็นต์ในการจับคู่ตั๋ว, ประทับเวลาในตั๋วเป็นล่าสุด ฯลฯ ) นี่คือบทสรุปของข้อมูลความปลอดภัย WebSocket: https://devcenter.heroku.com/articles/websocket-security

การรับรองความถูกต้องพื้นฐานเคยเป็นตัวเลือก แต่สิ่งนี้เลิกใช้แล้วและเบราว์เซอร์สมัยใหม่จะไม่ส่งส่วนหัวแม้ว่าจะระบุไว้ก็ตาม

ข้อมูลรับรองความถูกต้องพื้นฐาน (คัดค้าน) :

ส่วนหัวการให้สิทธิ์ถูกสร้างขึ้นจากฟิลด์ชื่อผู้ใช้และรหัสผ่าน (หรือเพียงแค่ชื่อผู้ใช้) ของ WebSocket URI:

var ws = new WebSocket("ws://username:password@example.com")

ผลลัพธ์ข้างต้นในส่วนหัวต่อไปนี้ด้วยสตริง "ชื่อผู้ใช้: รหัสผ่าน" base64 ที่เข้ารหัส:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

ฉันได้ทดสอบการรับรองความถูกต้องเบื้องต้นใน Chrome 55 และ Firefox 50 แล้วและตรวจสอบว่าข้อมูลการรับรองความถูกต้องเบื้องต้นนั้นมีการเจรจากับเซิร์ฟเวอร์ (ซึ่งอาจไม่ทำงานใน Safari)

ขอบคุณ Dmitry Frank สำหรับคำตอบการตรวจสอบขั้นพื้นฐาน

โซลูชันสำรองเพิ่มเติม แต่เบราว์เซอร์สมัยใหม่ทั้งหมดส่งคุกกี้โดเมนพร้อมกับการเชื่อมต่อดังนั้นการใช้:

var authToken = 'R3YKZFKBVi';

document.cookie = 'X-Authorization=' + authToken + '; path=/';

var ws = new WebSocket(
    'wss://localhost:9000/wss/'
);

จบลงด้วยส่วนหัวการเชื่อมต่อคำขอ:

Cookie: X-Authorization=R3YKZFKBVi

ปัญหาส่วนหัว HTTP Authorization สามารถแก้ไขได้ดังต่อไปนี้:

var ws = new WebSocket("ws://username:password@example.com/service");

จากนั้นส่วนหัว HTTP การอนุญาตพื้นฐานที่เหมาะสมจะถูกตั้งค่าด้วยการให้ usernamepasswordและ หากคุณต้องการการอนุญาตขั้นพื้นฐานคุณก็พร้อมแล้ว

ฉันต้องการใช้ Bearerอย่างไรก็ตามและฉันหันไปใช้เคล็ดลับต่อไปนี้: ฉันเชื่อมต่อกับเซิร์ฟเวอร์ดังนี้:

var ws = new WebSocket("ws://my_token@example.com/service");

และเมื่อรหัสของฉันที่ฝั่งเซิร์ฟเวอร์ได้รับส่วนหัวการอนุญาตขั้นพื้นฐานด้วยชื่อผู้ใช้ที่ไม่ว่างเปล่าและรหัสผ่านที่ว่างเปล่ามันจะตีความชื่อผู้ใช้เป็นโทเค็น

คุณไม่สามารถเพิ่มส่วนหัว แต่ถ้าคุณเพียงแค่ต้องส่งค่าไปยังเซิร์ฟเวอร์ในขณะที่การเชื่อมต่อคุณสามารถระบุส่วนสตริงแบบสอบถามใน URL:

var ws = new WebSocket("ws://example.com/service?key1=value1&key2=value2");

URL นั้นถูกต้อง แต่แน่นอนว่าคุณจะต้องแก้ไขรหัสเซิร์ฟเวอร์ของคุณเพื่อแยกวิเคราะห์

คุณไม่สามารถส่งส่วนหัวที่กำหนดเองเมื่อคุณต้องการสร้างการเชื่อมต่อ WebSockets โดยใช้ JavaScript WebSockets API คุณสามารถใช้Subprotocolsส่วนหัวโดยใช้ตัวสร้างคลาส WebSocket ที่สอง:

var ws = new WebSocket("ws://example.com/service", "soap");

จากนั้นคุณสามารถรับส่วนหัว Subprotocols โดยใช้Sec-WebSocket-Protocolคีย์บนเซิร์ฟเวอร์

นอกจากนี้ยังมีข้อ จำกัด ค่าส่วนหัว Subprotocols ของคุณต้องไม่มีเครื่องหมายจุลภาค ( ,)!

ไม่สามารถส่งส่วนหัวการให้สิทธิ์ได้

การแนบพารามิเตอร์เคียวรีโทเค็นเป็นตัวเลือก อย่างไรก็ตามในบางกรณีอาจไม่ต้องการส่งโทเค็นการเข้าสู่ระบบหลักของคุณในข้อความธรรมดาเป็นพารามิเตอร์การสืบค้นเนื่องจากทึบกว่าการใช้ส่วนหัวและท้ายที่สุดจะถูกบันทึกไว้ที่ใด หากสิ่งนี้ก่อให้เกิดความกังวลด้านความปลอดภัยให้กับคุณอีกทางเลือกหนึ่งคือการใช้โทเค็น JWT สำรองสำหรับเว็บซ็อกเก็ตเพียงสำหรับสิ่งซ็อกเก็ตเว็บ

สร้าง REST endpoint เพื่อสร้าง JWT นี้ซึ่งแน่นอนว่าผู้ใช้สามารถเข้าถึงได้ด้วยโทเค็นการเข้าสู่ระบบหลักของคุณเท่านั้น (ส่งผ่านทางส่วนหัว) เว็บซ็อกเก็ต JWT สามารถกำหนดค่าให้แตกต่างจากโทเค็นการเข้าสู่ระบบของคุณเช่นมีการหมดเวลาที่สั้นลงดังนั้นจึงปลอดภัยที่จะส่งไปรอบ ๆ เป็นพารามิเตอร์แบบสอบถามของคำขออัพเกรดของคุณ

สร้างแยกต่างหาก JwtAuthHandler เส้นทางเดียวกับที่คุณลงทะเบียน SockJS eventbusHandler บน ตรวจสอบให้แน่ใจว่าตัวจัดการรับรองความถูกต้องของคุณลงทะเบียนก่อนดังนั้นคุณสามารถตรวจสอบโทเค็นเว็บซ็อกเก็ตกับฐานข้อมูลของคุณ (JWT ควรเชื่อมโยงกับผู้ใช้ของคุณในแบ็กเอนด์)

แฮ็คทั้งหมดแบบนี้ต้องขอบคุณคำตอบของ kanaka

ลูกค้า:

var ws = new WebSocket(
    'ws://localhost:8080/connect/' + this.state.room.id, 
    store('token') || cookie('token') 
);

เซิร์ฟเวอร์ (ใช้ Koa2 ในตัวอย่างนี้ แต่ควรคล้ายกันทุกที่):

var url = ctx.websocket.upgradeReq.url; // can use to get url/query params
var authToken = ctx.websocket.upgradeReq.headers['sec-websocket-protocol'];
// Can then decode the auth token and do any session/user stuff...

กรณีของฉัน:

• ฉันต้องการเชื่อมต่อกับเซิร์ฟเวอร์ WS ที่ใช้งานจริงwww.mycompany.com/api/ws...
• ใช้ข้อมูลรับรองจริง (คุกกี้เซสชัน) ...
• จากหน้าเว็บท้องถิ่น ( localhost:8000)

การตั้งค่าdocument.cookie = "sessionid=foobar;path=/"จะไม่ช่วยเมื่อโดเมนไม่ตรงกัน

ทางออก :

เพิ่มไป127.0.0.1 wsdev.company.com/etc/hosts

วิธีนี้เบราว์เซอร์ของคุณจะใช้คุกกี้จากmycompany.comเมื่อเชื่อมต่อกับขณะที่คุณกำลังเชื่อมต่อจากโดเมนย่อยที่ถูกต้องwww.mycompany.com/api/wswsdev.company.com

ในสถานการณ์ของฉัน(Azure Time Series Insights wss: //)

ใช้ ReconnectingWebsocket wrapper และสามารถเพิ่มส่วนหัวด้วยโซลูชันง่ายๆ:

socket.onopen = function(e) {
    socket.send(payload);
};

โดยที่ payload ในกรณีนี้คือ:

{
  "headers": {
    "Authorization": "Bearer TOKEN",
    "x-ms-client-request-id": "CLIENT_ID"
}, 
"content": {
  "searchSpan": {
    "from": "UTCDATETIME",
    "to": "UTCDATETIME"
  },
"top": {
  "sort": [
    {
      "input": {"builtInProperty": "$ts"},
      "order": "Asc"
    }], 
"count": 1000
}}}

ในทางเทคนิคคุณจะส่งส่วนหัวเหล่านี้ผ่านฟังก์ชั่นการเชื่อมต่อก่อนขั้นตอนการอัพเกรดโปรโตคอล สิ่งนี้ใช้ได้สำหรับฉันในnodejsโครงการ:

var WebSocketClient = require('websocket').client;
var ws = new WebSocketClient();
ws.connect(url, '', headers);

คุณสามารถผ่านส่วนหัวเป็นคีย์ - ค่าในพารามิเตอร์ที่สาม (ตัวเลือก) ภายในวัตถุ ตัวอย่างที่มีโทเค็นการอนุญาต ปล่อยให้โปรโตคอล (พารามิเตอร์ที่สอง) เป็นโมฆะ

ws = ใหม่ WebSocket ('ws: // localhost', null, {ส่วนหัว: {การอนุญาต: token}})

แก้ไข: ดูเหมือนว่าวิธีนี้ใช้ได้กับไลบรารี nodejs เท่านั้นไม่ได้ใช้เบราว์เซอร์มาตรฐาน ออกไปเพราะบางคนอาจมีประโยชน์