Websockets 클라이언트 API의 HTTP 헤더

이를 지원하는 HTTP 헤더 클라이언트를 사용하여 웹 소켓 클라이언트에 사용자 정의 HTTP 헤더를 쉽게 추가하는 것처럼 보이지만 JSON API로 수행하는 방법을 찾을 수 없습니다.

그러나 spec에서 이러한 헤더를 지원해야합니다 .

누구나 그것을 달성하는 방법에 대한 단서가 있습니까?

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

특히, HTTP 인증 헤더를 보낼 수 있어야합니다.

2 배 업데이트

짧은 대답 : 아니요. 경로 및 프로토콜 필드 만 지정할 수 있습니다.

더 긴 답변 :

JavaScript WebSockets API 에는 클라이언트 / 브라우저가 보낼 추가 헤더를 지정하는 방법이 없습니다 . HTTP 경로 ( "GET / xyz") 및 프로토콜 헤더 ( "Sec-WebSocket-Protocol")는 WebSocket 생성자에서 지정할 수 있습니다.

Sec-WebSocket-Protocol 헤더 (웹 소켓 특정 인증에 사용되도록 확장되는 경우도 있음)는 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 클라이언트를 호스팅하는 페이지가 서버로부터 티켓을 요청한 다음 URL / 쿼리 문자열, 프로토콜 필드의 WebSocket 연결 설정 중에이 티켓을 전달하는 티켓팅 시스템을 구현하는 것입니다. 또는 연결이 설정된 후 첫 번째 메시지로 필요합니다. 그런 다음 서버는 티켓이 유효한 경우 (연결이 존재하고, 이미 사용되지 않았거나, 티켓 일치로 인코딩 된 클라이언트 IP, 티켓의 타임 스탬프가 최근 인 경우 등) 연결을 계속 허용합니다. 다음은 WebSocket 보안 정보를 요약 한 것입니다 : https://devcenter.heroku.com/articles/websocket-security

기본 인증은 이전에는 옵션 이었지만 더 이상 사용되지 않으며 최신 브라우저는 지정된 경우에도 헤더를 보내지 않습니다.

기본 인증 정보 (더 이상 사용되지 않음) :

Authorization 헤더는 WebSocket URI의 사용자 이름 및 비밀번호 (또는 사용자 이름) 필드에서 생성됩니다.

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

위의 결과는 문자열 "username : password"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 인증 헤더 문제는 다음을 통해 해결할 수 있습니다.

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

그런 다음 제공된 username및 로 적절한 기본 인증 HTTP 헤더가 설정됩니다 password. 기본 인증이 필요한 경우 모든 준비가 완료된 것입니다.

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은 유효하지만 물론 구문 분석하려면 서버 코드를 수정해야합니다.

JavaScript WebSockets API를 사용하여 WebSockets 연결을 설정하려는 경우 사용자 정의 헤더를 보낼 수 없습니다. Subprotocols두 번째 WebSocket 클래스 생성자를 사용하여 헤더를 사용할 수 있습니다 .

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

그런 다음 Sec-WebSocket-Protocol서버에서 키를 사용하여 서브 프로토콜 헤더를 얻을 수 있습니다 .

또한 서브 프로토콜 헤더 값에는 쉼표 ( ,)를 사용할 수 없습니다 .

발신 인증 헤더를 보낼 수 없습니다.

토큰 쿼리 매개 변수를 첨부하는 것은 옵션입니다. 그러나 경우에 따라 기본 로그인 토큰을 일반 텍스트로 쿼리 매개 변수로 전송하는 것이 바람직하지 않을 수 있습니다. 헤더를 사용하는 것보다 불투명하고 누가 아는 곳에 기록되기 때문입니다. 이것이 보안 문제를 일으키는 경우 대안은 웹 소켓에 대해서만 보조 JWT 토큰을 사용하는 것 입니다.

이 JWT 생성을위한 REST 엔드 포인트를 작성 하십시오. 기본 로그인 토큰으로 인증 된 사용자 (헤더를 통해 전송 된 사용자) 만 액세스 할 수 있습니다. 웹 소켓 JWT는 로그인 토큰과 다르게 구성 할 수 있습니다 (예 : 시간 초과가 짧기 때문에 업그레이드 요청의 쿼리 매개 변수로 전송하는 것이 더 안전합니다).

SockJS eventbusHandler를 등록하는 동일한 경로에 대해 별도의 JwtAuthHandler를 작성하십시오 . 인증 핸들러가 먼저 등록되어 있는지 확인하여 데이터베이스에 대해 웹 소켓 토큰을 확인할 수 있습니다 (JWT는 어떻게 든 백엔드의 사용자와 링크되어야 함).

가나 카의 답변 덕분에 완전히 해킹되었습니다.

고객:

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 래퍼를 사용하여 간단한 솔루션으로 헤더를 추가 할 수있었습니다.

socket.onopen = function(e) {
    socket.send(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 = new WebSocket ( 'ws : // localhost', null, {헤더 : {인증 : 토큰}})

편집 :이 방법은 표준 브라우저 구현이 아닌 nodejs 라이브러리에서만 작동하는 것으로 보입니다. 일부 사람들에게 유용 할 수 있으므로 그대로 두십시오.