시골약사
ac620a0e15
WebSocket 1006 오류로 인해 브라우저에서 VNC 연결 실패 - 서버 환경에서는 연결 가능하나 브라우저 보안 정책으로 차단 - 역방향 프록시 솔루션 문서화 완료 - 추후 nginx 프록시 구현 필요 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
324 lines
12 KiB
HTML
324 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ vm_name }} - VNC 콘솔</title>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background-color: dimgrey;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
#top_bar {
|
|
background-color: #6e84a3;
|
|
color: white;
|
|
font: bold 12px Helvetica;
|
|
padding: 6px 5px 4px 5px;
|
|
border-bottom: 1px outset;
|
|
}
|
|
#status {
|
|
text-align: center;
|
|
}
|
|
#sendCtrlAltDelButton {
|
|
position: fixed;
|
|
top: 0px;
|
|
right: 120px;
|
|
border: 1px outset;
|
|
padding: 5px 5px 4px 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#refreshTicketButton {
|
|
position: fixed;
|
|
top: 0px;
|
|
right: 0px;
|
|
border: 1px outset;
|
|
padding: 5px 5px 4px 5px;
|
|
cursor: pointer;
|
|
background-color: #5bc0de;
|
|
}
|
|
|
|
#screen {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|
|
<script type="module" crossorigin="anonymous">
|
|
// RFB holds the API to connect and communicate with a VNC server
|
|
import RFB from '/static/novnc/core/rfb.js';
|
|
|
|
let rfb;
|
|
let desktopName;
|
|
|
|
// HTML 엔티티 디코딩 함수
|
|
function decodeHtmlEntities(text) {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.innerHTML = text;
|
|
return textarea.value;
|
|
}
|
|
|
|
// When this function is called we have
|
|
// successfully connected to a server
|
|
function connectedToServer(e) {
|
|
status("Connected to " + desktopName);
|
|
}
|
|
|
|
// This function is called when we are disconnected
|
|
function disconnectedFromServer(e) {
|
|
console.log('🔌 VNC 연결 해제 상세 정보:', e.detail);
|
|
|
|
if (e.detail.clean) {
|
|
status("연결이 정상적으로 종료되었습니다");
|
|
} else {
|
|
const reason = e.detail.reason || 'Unknown';
|
|
status(`연결 실패: ${reason} (Code: ${e.detail.code || 'Unknown'})`);
|
|
console.error('❌ VNC 연결 실패 상세:', {
|
|
code: e.detail.code,
|
|
reason: e.detail.reason,
|
|
wasClean: e.detail.clean
|
|
});
|
|
|
|
// WebSocket 에러 코드별 메시지
|
|
const errorMessages = {
|
|
1006: 'WebSocket 서버에 연결할 수 없습니다. VM이 실행중인지 확인하세요.',
|
|
1000: '정상적으로 연결이 종료되었습니다.',
|
|
1002: '프로토콜 오류가 발생했습니다.',
|
|
1003: '지원하지 않는 데이터를 받았습니다.',
|
|
1009: '메시지가 너무 큽니다.',
|
|
1011: '서버에서 예상치 못한 오류가 발생했습니다.'
|
|
};
|
|
|
|
const userFriendlyMessage = errorMessages[e.detail.code] || `알 수 없는 오류 (코드: ${e.detail.code})`;
|
|
status(`❌ ${userFriendlyMessage}`);
|
|
}
|
|
}
|
|
|
|
// When this function is called, the server requires
|
|
// credentials to authenticate
|
|
function credentialsAreRequired(e) {
|
|
console.log('VNC 인증 정보가 필요합니다. 티켓을 새로고침합니다...');
|
|
refreshVNCTicket();
|
|
}
|
|
|
|
// VNC 보안 실패 시 티켓 새로고침
|
|
function onSecurityFailure(e) {
|
|
console.log('VNC 보안 인증 실패:', e.detail);
|
|
status("Authentication failed - refreshing ticket...");
|
|
refreshVNCTicket();
|
|
}
|
|
|
|
// VNC 티켓 새로고침
|
|
function refreshVNCTicket() {
|
|
const sessionId = window.location.pathname.split('/').pop();
|
|
|
|
fetch(`/api/vnc/refresh/${sessionId}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
console.log('✅ 새 VNC 티켓 받음, 재연결 시도...');
|
|
status("Got new ticket - reconnecting...");
|
|
|
|
// 기존 연결 종료
|
|
if (rfb) {
|
|
rfb.disconnect();
|
|
}
|
|
|
|
// 잠시 후 새 티켓으로 재연결
|
|
setTimeout(() => {
|
|
connectWithNewTicket(data.websocket_url, data.password);
|
|
}, 1000);
|
|
} else {
|
|
status("Failed to refresh ticket: " + (data.error || 'Unknown error'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('티켓 새로고침 실패:', error);
|
|
status("Failed to refresh ticket");
|
|
});
|
|
}
|
|
|
|
// 새 티켓으로 재연결
|
|
function connectWithNewTicket(newWebsocketUrl, newPassword) {
|
|
console.log('새 티켓으로 VNC 재연결 시도...');
|
|
status("Reconnecting with new ticket...");
|
|
|
|
const decodedUrl = decodeHtmlEntities(newWebsocketUrl);
|
|
const decodedPassword = decodeHtmlEntities(newPassword);
|
|
|
|
console.log('새 WebSocket URL:', decodedUrl);
|
|
console.log('새 VNC Password:', decodedPassword);
|
|
|
|
// 새 RFB 연결 생성
|
|
rfb = new RFB(document.getElementById('screen'), decodedUrl,
|
|
{ credentials: { password: decodedPassword } });
|
|
|
|
// 이벤트 리스너 재등록
|
|
rfb.addEventListener("connect", connectedToServer);
|
|
rfb.addEventListener("disconnect", disconnectedFromServer);
|
|
rfb.addEventListener("credentialsrequired", credentialsAreRequired);
|
|
rfb.addEventListener("desktopname", updateDesktopName);
|
|
rfb.addEventListener("securityfailure", onSecurityFailure);
|
|
|
|
// 설정 적용
|
|
rfb.viewOnly = false;
|
|
rfb.scaleViewport = true;
|
|
}
|
|
|
|
// When this function is called we have received
|
|
// a desktop name from the server
|
|
function updateDesktopName(e) {
|
|
desktopName = e.detail.name;
|
|
}
|
|
|
|
// Since most operating systems will catch Ctrl+Alt+Del
|
|
// before they get a chance to be intercepted by the browser,
|
|
// we provide a way to emulate this key sequence.
|
|
function sendCtrlAltDel() {
|
|
rfb.sendCtrlAltDel();
|
|
return false;
|
|
}
|
|
|
|
// Show a status text in the top bar
|
|
function status(text) {
|
|
document.getElementById('status').textContent = text;
|
|
}
|
|
|
|
document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
|
|
document.getElementById('refreshTicketButton').onclick = function() {
|
|
refreshVNCTicket();
|
|
};
|
|
|
|
// VNC 연결 정보 (서버에서 전달)
|
|
const rawWebsocketUrl = '{{ websocket_url|safe }}';
|
|
const websocketUrl = decodeHtmlEntities(rawWebsocketUrl);
|
|
const rawPassword = '{{ password|safe }}';
|
|
const vncPassword = decodeHtmlEntities(rawPassword);
|
|
|
|
console.log('WebSocket URL:', websocketUrl);
|
|
console.log('VNC Password:', vncPassword);
|
|
|
|
// WebSocket URL 유효성 검사
|
|
function validateWebSocketUrl(url) {
|
|
if (!url || typeof url !== 'string') {
|
|
console.error('❌ WebSocket URL이 비어있습니다');
|
|
return false;
|
|
}
|
|
|
|
if (!url.startsWith('wss://') && !url.startsWith('ws://')) {
|
|
console.error('❌ 올바르지 않은 WebSocket URL 프로토콜:', url);
|
|
return false;
|
|
}
|
|
|
|
console.log('✅ WebSocket URL 유효성 검사 통과');
|
|
return true;
|
|
}
|
|
|
|
// VNC 연결 함수
|
|
function connectToVNC() {
|
|
if (!validateWebSocketUrl(websocketUrl)) {
|
|
status("❌ 잘못된 WebSocket URL입니다");
|
|
return;
|
|
}
|
|
|
|
if (!vncPassword || vncPassword.trim() === '') {
|
|
status("❌ VNC 패스워드가 없습니다");
|
|
return;
|
|
}
|
|
|
|
status("Connecting to VM...");
|
|
console.log('🔄 VNC 연결 시도 시작...');
|
|
|
|
try {
|
|
// WebSocket 연결 직접 테스트
|
|
console.log('🧪 WebSocket 연결 직접 테스트...');
|
|
const testWS = new WebSocket(websocketUrl);
|
|
|
|
testWS.onopen = function(event) {
|
|
console.log('✅ WebSocket 연결 테스트 성공');
|
|
testWS.close();
|
|
|
|
// WebSocket이 연결되면 RFB 객체 생성
|
|
createRFBConnection();
|
|
};
|
|
|
|
testWS.onerror = function(error) {
|
|
console.error('❌ WebSocket 연결 테스트 실패:', error);
|
|
status('❌ WebSocket 서버에 연결할 수 없습니다');
|
|
|
|
// 대안: 티켓 새로고침 시도
|
|
setTimeout(() => {
|
|
status('🔄 새 티켓으로 재시도 중...');
|
|
refreshVNCTicket();
|
|
}, 2000);
|
|
};
|
|
|
|
testWS.onclose = function(event) {
|
|
console.log('🔌 WebSocket 테스트 연결 종료:', event.code, event.reason);
|
|
};
|
|
|
|
} catch (error) {
|
|
console.error('❌ WebSocket 테스트 실패:', error);
|
|
status(`❌ 연결 초기화 실패: ${error.message}`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// RFB 연결 생성 함수
|
|
function createRFBConnection() {
|
|
try {
|
|
console.log('🔄 RFB 객체 생성 시작...');
|
|
|
|
// Creating a new RFB object will start a new connection
|
|
rfb = new RFB(document.getElementById('screen'), websocketUrl,
|
|
{ credentials: { password: vncPassword } });
|
|
|
|
console.log('✅ RFB 객체 생성 완료');
|
|
|
|
// Add listeners to important events from the RFB module
|
|
rfb.addEventListener("connect", connectedToServer);
|
|
rfb.addEventListener("disconnect", disconnectedFromServer);
|
|
rfb.addEventListener("credentialsrequired", credentialsAreRequired);
|
|
rfb.addEventListener("desktopname", updateDesktopName);
|
|
rfb.addEventListener("securityfailure", onSecurityFailure);
|
|
|
|
// Set parameters that can be changed on an active connection
|
|
rfb.viewOnly = false;
|
|
rfb.scaleViewport = true;
|
|
|
|
} catch (error) {
|
|
console.error('❌ RFB 객체 생성 실패:', error);
|
|
status(`❌ VNC 클라이언트 초기화 실패: ${error.message}`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 연결 시작
|
|
connectToVNC();
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="top_bar">
|
|
<div id="status">Loading</div>
|
|
<div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
|
|
<div id="refreshTicketButton">🔄 Refresh</div>
|
|
</div>
|
|
<div id="screen">
|
|
<!-- This is where the remote screen will appear -->
|
|
</div>
|
|
</body>
|
|
</html> |