SSE(Server Sent Event)

🔍 Introduction

SSE(Server-Sent Event)는 Server Push 기술로 웹 소캣과 유사하게 서버와 Javascript가 서로 통신하여 데이터를 받아올 수 있습니다. 다만 웹소켓의 경우 양방향 통신이 가능하지만, SSE는 서버→클라이언트로 받는 요청만 처리할 수 있습니다.

단순히 서버로부터 Push를 받아야하는 경우 SSE가 가장 간편한 기술로 사용될 수 있습니다. 다만 성능이나 기술적인 부분에서 이점보단 단점이 많아서 대부분의 서비스에선 WebSocket 또는 Ajax 방식을 많이 사용합니다.

Event Straem Format

Basic and content-type

SSE는 text/event-stream 타입과 plain text response를 사용합니다. 그리고 각 line 별로 data: 라는 구분자를 통해서 stream을 전송하고 구별합니다.

1

data: message\n\n

Multiline

1
2


data: first line\n
data: second line\n\n

JSON

1
2
3
4


data: {\n
data: "user": "hahwul",\n
data: "id": 12345\n
data: }\n\n

이 때 SSE를 받는 Client에선 아래와 같이 eventListener로 받은 데이터를 JSON.parse 하여 사용하게 됩니다.

1
2
3
4


source.addEventListener('message', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.id, data.msg);
}, false);

Event name

event: 구분자를 통해 eventListner로 전달할 이벤트 이름을 명시할 수 있습니다.

1
2
3
4


event: userlogon\n
data: {"username": "hahwul"}\n\n
event: update\n
data: {"username": "hahwul", "tool": "zap"}\n\n

1
2
3
4
5
6
7
8
9


source.addEventListener('userlogon', function(e) {
  var data = JSON.parse(e.data);
  console.log('login:'+data.username);
}, false);

source.addEventListener('update', function(e) {
  var data = JSON.parse(e.data);
  console.log('update:' + data);
}, false);

🗡 Offensive techniques

How to Testing

SSE는 웹 브라우저의 Console, Debugger를 이용해서 데이터에 대해 테스트할 수 있습니다. 기본적으로 SSE는 서버에서 데이터를 받기만 하기 떄문에 EventHandler 이후 로직이 주요 분석 구간이 됩니다.

ZAP에서는 Server-Sent Events Addon 통해서 Recv되는 데이터를 트래킹하고 분석하는데 활용할 수 있습니다.

SSE History in ZAP

Testing Method

SSE는 서버로 부터 데이터를 받기만 가능하기 때문에 공격할 수 있는 범위가 넓지는 않습니다. 다만 SSE에 연결되는 서버가 항상 신뢰된 데이터를 준다는 보장은 없습니다. 그래서 서버로 부터 오는 데이터를 기반으로 DOM에 반영되거나 다른 로직에 처리되는 것을 이용한 공격들이 주를 이루게 됩니다.

DOM XSS

SSE를 통해 받은 데이터에서 DOM XSS가 발생할 수 있습니다. 일반적인 DOM XSS와 동일하며, 데이터를 전달하는 위치가 SSE라는 차이가 있습니다.

1
2
3
4
5


evtSource.onmessage = function(e) {
  var logObject = document.getElementById("logs");
  logObject.innerHTML = "message: " + e.data;
  eventList.appendChild(newElement);
}

위와 같은 코드는 서버로 부터 받은 데이터가 logObject의 innerHTML로 들어가기 떄문에 DOM 기반의 XXS가 가능합니다.

Weak Origin Check

SSE는 WebSocket과 다르게 Client 단에서 직접 Origin 검증을 해야합니다. 당연히 Browser로 부터 제공되는 SOP의 영향을 받는 것이 아니기 때문에 개발자가 직접 로직을 구현해야하며, 코드에 따라서 Origin 검증을 우회하는 경우가 발생할 수 있습니다.

Etc

이외에도 Browser단 보안 취약점에 동일하게 영향받을 수 있습니다. 다만 소스가 서버라는 차이점만 존재합니다.

🛡 Defensive techniques

서버로 부터 오는 데이터를 무조건 신뢰할 수는 없습니다. 만약 SSE로 연결되는 서버가 신뢰 구간에 있는 서버라고 하더라도, 가급적이면 FE단에서 SSE로 인한 이슈는 제한될 수 있도록 별도의 방어로직이 있는 것이 좋습니다.

🕹 Tools

ZAP Server-Sent Events Addon