[트러블슈팅?] .setAllowedOrigins("")에 특정 도메인만 허용하기

[상황]

로컬에서 웹소켓 테스트용으로 다음 사이트를 이용해왔다.

https://jiangxy.github.io/websocket-debug-tool/

WebSocket Debug Tool

알 사람들은 다 아는 유명한 툴이다.

문제는, 기존에는 모든 api로부터의 연결을 허용했었기에 .setAllowedOrigins()에 들어가는 api를 우리의 도메인명인 "https://hyu1335.cloud"로 한정해야 했다는 것이다.

원래 "*"를 넣어 모든 도메인으로부터의 연결을 허용했지만, 그럼 모두에게 열린 문이 되기에 위험하다.

그래서 http://localhost:[포트번호]를 추가로 더해주었다. 

[내 예상]

언급한 사이트에서 ws://localhost:[포트번호]/ws로 url을 설정하고 Auth Header만 잘 입력해주면 연결이 되리라 생각했다.

[결과]

어라? 아무리 connect를 눌러도 연결이 되지 않았다.

[원인]

알고봤더니, setAllowedOrigins() 안에 서버 주소를 넣었던 것이 잘못이었다. "http://localhost:[포트번호]"는 웹소켓이 실행되고 있는 서버의 주소이지, setAllowedOrigins()에 들어갈 화이트리스트는 아니었던 것이다.

.setAllowedOrigins()는 파라미터 안에 문자열 형태의 도메인에서의 연결(CONNECT, SUBSCRIBE를 모두 포함)요청만 허용하겠다는 것이다. 즉 일종의 도메인 화이트리스트다.

비유하자면 특정 집 주소에서 온 사람들만 받겠다고 한 것인데, 거기에 내 집 주소를 적은 셈이다. 당연히 https://jiangxy.github.io 에서 전송된 내 요청은 화이트리스트에 없었기에 막힐 수밖에 없었다.

[회고]

어차피 배포할 땐 지워야 하는데, 테스트할때만 "*"로 열어놓을 걸 그랬다.

하지만 이 덕분에 setAllowedOrigins를 지금껏 잘못 이해하고 있었다는 것을 깨달았다. 그리고 원하는 경우 특정 웹사이트에서만 웹소켓 연결 요청을 허용할 수 있다는 것을 알았다. 그래도 와일드카드로 다 열어놓는 것보단 안전하지 않은가.