Mixed Content Error - WebSocket에서 WSS로 전환하기

웹 개발을 진행하면서 발생할 수 있는 흔한 오류 중 하나는 바로 Mixed Content 문제입니다. 특히 WebSocket을 사용할 때, 보안 연결(HTTPS)과 비보안 연결(WS)이 충돌하면 브라우저에서 이를 차단하게 됩니다. 이번 글에서는 "Mixed Content: WebSocket" 오류를 해결하는 방법을 자세히 다루어보겠습니다.

1. 문제 상황

오류 메시지

Mixed Content: The page at 'https://test.net/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://127.0.0.1:8000/ws/chatlist/c257c621?nationality=KR&size=1000'. This request has been blocked; this endpoint must be available over WSS.

원인

메인 웹사이트는 https://로 보안 연결(SSL)을 사용 중입니다.

그러나 WebSocket 연결은 ws:// (비보안)으로 시도되어 Mixed Content 오류가 발생했습니다.

브라우저는 보안 문제로 인해 HTTPS 페이지에서 비보안 WebSocket(ws://) 연결을 차단합니다.

2. 해결 방법

✅ 1. WebSocket URL을 WSS로 변경하기

기존에 사용 중이던 WebSocket URL:

const socket = new WebSocket("ws://127.0.0.1:8000/ws/chatlist/c257c621?nationality=KR&size=1000");

ws://를 wss://로 변경하여 보안 연결을 설정합니다.

const socket = new WebSocket("wss://test.net/ws/chatlist/c257c621?nationality=KR&size=1000");

🔥 TIP: wss://는 WebSocket의 보안 버전으로, HTTPS와 같이 SSL 인증서를 기반으로 데이터를 암호화하여 전송합니다.

✅ 2. Nginx에 WSS 프록시 설정하기

만약 Nginx를 사용 중이라면, WebSocket 연결을 위해 Nginx에서 프록시 설정을 추가해야 합니다.

server {
listen 443 ssl;
server_name test.net;

ssl_certificate /etc/letsencrypt/live/test.net/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/test.net/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

location /ws/ {
    proxy_pass http://localhost:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

}

proxy_pass: 내부 서버에서 localhost:8000으로 WebSocket 요청을 프록시합니다.

proxy_http_version: HTTP/1.1을 사용하여 WebSocket이 정상적으로 업그레이드되도록 설정합니다.

proxy_set_header: WebSocket의 업그레이드 및 보안 헤더를 명시합니다.

✅ 3. Nginx 설정 적용

Nginx 설정을 변경했다면 반드시 재시작해야 합니다.

sudo nginx -t
sudo systemctl reload nginx

✅ 4. 방화벽 확인

8000 포트는 내부에서만 사용하도록 제한합니다.

sudo ufw deny 8000

외부에서는 wss://test.net/ws로만 접근하도록 설정합니다.

3. 테스트하기

4. wscat으로 WebSocket 연결 테스트

wscat을 사용해 WebSocket 연결이 정상적으로 되는지 테스트합니다.

wscat -c wss://test.net/ws/chatlist/c257c621?nationality=KR&size=1000

2. 브라우저 콘솔에서 확인

개발자 도구(F12)를 열고 콘솔에서 오류가 발생하는지 확인합니다.

4. 주의사항

SSL 인증서 자동 갱신을 설정하여 인증서 만료로 인한 연결 오류를 방지하세요.

sudo certbot renew --dry-run

브라우저 캐시로 인해 이전 설정이 유지되는 경우가 있으므로, 캐시를 지우고 새로고침해 주세요.

🔄 결론

HTTPS 페이지에서는 반드시 wss://로 WebSocket을 연결해야 합니다.

Nginx에서 WebSocket 프록시 설정을 반드시 적용해야 합니다.

SSL 인증서를 제대로 적용하고, Nginx에서 443 포트로 요청을 처리하도록 구성하세요.

이렇게 설정하면 더 이상 "Mixed Content" 오류가 발생하지 않고, 안전한 WebSocket 통신을 할 수 있습니다. 😊

관련 키워드: Mixed Content, WebSocket, WSS, Nginx, SSL 인증서, wscat, WebSocket 오류 해결

문제가 해결되지 않거나 궁금한 사항이 있다면 댓글로 남겨주세요!