Security hardening (P0 RCE + audit follow-through), web macro editor, and redesign #6
@@ -264,8 +264,8 @@
|
|||||||
<div class="wake-lock-status" id="wake-lock-status" title="Screen wake lock">
|
<div class="wake-lock-status" id="wake-lock-status" title="Screen wake lock">
|
||||||
<span class="wake-icon">☀</span>
|
<span class="wake-icon">☀</span>
|
||||||
</div>
|
</div>
|
||||||
<button class="header-btn icon-btn" onclick="app.toggleFullscreen()" title="Toggle fullscreen">⛶</button>
|
<button class="header-btn icon-btn" id="fullscreen-btn" title="Toggle fullscreen">⛶</button>
|
||||||
<button class="header-btn" onclick="app.refresh()">Refresh</button>
|
<button class="header-btn" id="refresh-btn">Refresh</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -277,372 +277,6 @@
|
|||||||
|
|
||||||
<div class="toast-container" id="toast-container"></div>
|
<div class="toast-container" id="toast-container"></div>
|
||||||
|
|
||||||
<script>
|
<script src="/static/app.js"></script>
|
||||||
// Inline MacroPad App for Relay Mode
|
|
||||||
class MacroPadApp {
|
|
||||||
constructor() {
|
|
||||||
this.macros = {};
|
|
||||||
this.tabs = [];
|
|
||||||
this.currentTab = 'All';
|
|
||||||
this.ws = null;
|
|
||||||
this.desktopConnected = false;
|
|
||||||
this.wsAuthenticated = false;
|
|
||||||
|
|
||||||
// Get session ID from URL
|
|
||||||
const pathMatch = window.location.pathname.match(/^\/([a-zA-Z0-9]+)/);
|
|
||||||
this.sessionId = pathMatch ? pathMatch[1] : null;
|
|
||||||
|
|
||||||
// Get password from storage (never from the URL).
|
|
||||||
this.password = sessionStorage.getItem(`macropad_${this.sessionId}`)
|
|
||||||
|| localStorage.getItem(`macropad_${this.sessionId}`);
|
|
||||||
|
|
||||||
if (this.password) {
|
|
||||||
sessionStorage.setItem(`macropad_${this.sessionId}`, this.password);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
async init() {
|
|
||||||
this.wakeLock = null;
|
|
||||||
this.wakeLockEnabled = false;
|
|
||||||
|
|
||||||
this.setupPWA();
|
|
||||||
this.setupWebSocket();
|
|
||||||
this.setupEventListeners();
|
|
||||||
this.setupWakeLock();
|
|
||||||
}
|
|
||||||
|
|
||||||
getApiHeaders() {
|
|
||||||
return {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-MacroPad-Password': this.password || ''
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
async loadTabs() {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/${this.sessionId}/api/tabs`, {
|
|
||||||
headers: this.getApiHeaders()
|
|
||||||
});
|
|
||||||
if (response.status === 401) return this.handleAuthError();
|
|
||||||
if (response.status === 503) return this.handleDesktopOffline();
|
|
||||||
const data = await response.json();
|
|
||||||
this.tabs = data.tabs || [];
|
|
||||||
this.renderTabs();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading tabs:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async loadMacros() {
|
|
||||||
try {
|
|
||||||
const path = this.currentTab === 'All' ? '/api/macros' : `/api/macros/${encodeURIComponent(this.currentTab)}`;
|
|
||||||
const response = await fetch(`/${this.sessionId}${path}`, {
|
|
||||||
headers: this.getApiHeaders()
|
|
||||||
});
|
|
||||||
if (response.status === 401) return this.handleAuthError();
|
|
||||||
if (response.status === 503) return this.handleDesktopOffline();
|
|
||||||
const data = await response.json();
|
|
||||||
this.macros = data.macros || {};
|
|
||||||
this.renderMacros();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading macros:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async executeMacro(macroId) {
|
|
||||||
const card = document.querySelector(`[data-macro-id="${macroId}"]`);
|
|
||||||
if (card) card.classList.add('executing');
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/${this.sessionId}/api/execute`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: this.getApiHeaders(),
|
|
||||||
body: JSON.stringify({ macro_id: macroId })
|
|
||||||
});
|
|
||||||
if (!response.ok) throw new Error('Failed');
|
|
||||||
} catch (error) {
|
|
||||||
this.showToast('Execution failed', 'error');
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => card?.classList.remove('executing'), 300);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleAuthError() {
|
|
||||||
sessionStorage.removeItem(`macropad_${this.sessionId}`);
|
|
||||||
localStorage.removeItem(`macropad_${this.sessionId}`);
|
|
||||||
window.location.href = `/${this.sessionId}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDesktopOffline() {
|
|
||||||
this.desktopConnected = false;
|
|
||||||
this.updateConnectionStatus(false);
|
|
||||||
document.getElementById('offline-banner').classList.add('visible');
|
|
||||||
}
|
|
||||||
|
|
||||||
setupWebSocket() {
|
|
||||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
||||||
const wsUrl = `${protocol}//${window.location.host}/${this.sessionId}/ws`;
|
|
||||||
|
|
||||||
this.ws = new WebSocket(wsUrl);
|
|
||||||
|
|
||||||
this.ws.onmessage = (event) => {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
this.handleMessage(data);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.ws.onclose = () => {
|
|
||||||
this.wsAuthenticated = false;
|
|
||||||
this.updateConnectionStatus(false);
|
|
||||||
setTimeout(() => this.setupWebSocket(), 3000);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.ws.onerror = () => this.updateConnectionStatus(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMessage(data) {
|
|
||||||
switch (data.type) {
|
|
||||||
case 'auth_required':
|
|
||||||
if (this.password) {
|
|
||||||
this.ws.send(JSON.stringify({ type: 'auth', password: this.password }));
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'auth_response':
|
|
||||||
if (data.success) {
|
|
||||||
this.wsAuthenticated = true;
|
|
||||||
this.updateConnectionStatus(this.desktopConnected);
|
|
||||||
} else {
|
|
||||||
this.handleAuthError();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'desktop_status':
|
|
||||||
this.desktopConnected = data.status === 'connected';
|
|
||||||
this.updateConnectionStatus(this.desktopConnected);
|
|
||||||
document.getElementById('offline-banner').classList.toggle('visible', !this.desktopConnected);
|
|
||||||
if (this.desktopConnected) {
|
|
||||||
this.loadTabs();
|
|
||||||
this.loadMacros();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'macro_created':
|
|
||||||
case 'macro_updated':
|
|
||||||
case 'macro_deleted':
|
|
||||||
this.loadTabs();
|
|
||||||
this.loadMacros();
|
|
||||||
break;
|
|
||||||
case 'executed':
|
|
||||||
const card = document.querySelector(`[data-macro-id="${data.macro_id}"]`);
|
|
||||||
if (card) {
|
|
||||||
card.classList.add('executing');
|
|
||||||
setTimeout(() => card.classList.remove('executing'), 300);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateConnectionStatus(connected) {
|
|
||||||
const dot = document.querySelector('.status-dot');
|
|
||||||
const text = document.querySelector('.connection-status span');
|
|
||||||
if (dot) dot.classList.toggle('connected', connected);
|
|
||||||
if (text) text.textContent = connected ? 'Connected' : 'Disconnected';
|
|
||||||
}
|
|
||||||
|
|
||||||
renderTabs() {
|
|
||||||
const container = document.getElementById('tabs-container');
|
|
||||||
container.innerHTML = this.tabs.map(tab => `
|
|
||||||
<button class="tab ${tab === this.currentTab ? 'active' : ''}" data-tab="${tab}">${tab}</button>
|
|
||||||
`).join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
renderMacros() {
|
|
||||||
const container = document.getElementById('macro-grid');
|
|
||||||
const entries = Object.entries(this.macros);
|
|
||||||
|
|
||||||
if (entries.length === 0) {
|
|
||||||
container.innerHTML = '<div class="empty-state"><p>No macros found</p></div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
container.innerHTML = entries.map(([id, macro]) => {
|
|
||||||
const hasImage = !!macro.image_path;
|
|
||||||
const firstChar = macro.name.charAt(0).toUpperCase();
|
|
||||||
return `
|
|
||||||
<div class="macro-card" data-macro-id="${id}" onclick="app.executeMacro('${id}')">
|
|
||||||
${hasImage ? `<img class="macro-image" style="display:none">` : ''}
|
|
||||||
<div class="macro-image-placeholder">${firstChar}</div>
|
|
||||||
<span class="macro-name">${macro.name}</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}).join('');
|
|
||||||
|
|
||||||
// Load macro images via authenticated fetch (header, not URL).
|
|
||||||
this.loadMacroImages();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fetch each macro image with the password header and display it
|
|
||||||
// as a blob object URL so the credential never appears in a URL.
|
|
||||||
async loadMacroImages() {
|
|
||||||
for (const [id, macro] of Object.entries(this.macros)) {
|
|
||||||
if (!macro.image_path) continue;
|
|
||||||
const card = document.querySelector(`[data-macro-id="${id}"]`);
|
|
||||||
if (!card) continue;
|
|
||||||
const img = card.querySelector('.macro-image');
|
|
||||||
if (!img) continue;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(
|
|
||||||
`/${this.sessionId}/api/image/${macro.image_path}`,
|
|
||||||
{ headers: this.getApiHeaders() }
|
|
||||||
);
|
|
||||||
if (!response.ok) continue; // keep placeholder
|
|
||||||
const blob = await response.blob();
|
|
||||||
const objectUrl = URL.createObjectURL(blob);
|
|
||||||
img.onload = () => URL.revokeObjectURL(objectUrl);
|
|
||||||
img.src = objectUrl;
|
|
||||||
img.style.display = '';
|
|
||||||
const placeholder = img.nextElementSibling;
|
|
||||||
if (placeholder) placeholder.style.display = 'none';
|
|
||||||
} catch (error) {
|
|
||||||
// Leave the placeholder visible on failure.
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setupEventListeners() {
|
|
||||||
document.getElementById('tabs-container').addEventListener('click', (e) => {
|
|
||||||
if (e.target.classList.contains('tab')) {
|
|
||||||
this.currentTab = e.target.dataset.tab;
|
|
||||||
this.renderTabs();
|
|
||||||
this.loadMacros();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
showToast(message, type = 'info') {
|
|
||||||
const container = document.getElementById('toast-container');
|
|
||||||
const toast = document.createElement('div');
|
|
||||||
toast.className = `toast ${type}`;
|
|
||||||
toast.textContent = message;
|
|
||||||
container.appendChild(toast);
|
|
||||||
setTimeout(() => toast.remove(), 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
refresh() {
|
|
||||||
this.loadTabs();
|
|
||||||
this.loadMacros();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fullscreen
|
|
||||||
toggleFullscreen() {
|
|
||||||
if (!document.fullscreenElement) {
|
|
||||||
document.documentElement.requestFullscreen().catch(err => {
|
|
||||||
console.log('Fullscreen error:', err);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
document.exitFullscreen();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Wake Lock
|
|
||||||
async setupWakeLock() {
|
|
||||||
const status = document.getElementById('wake-lock-status');
|
|
||||||
|
|
||||||
if (!('wakeLock' in navigator)) {
|
|
||||||
console.log('Wake Lock API not supported');
|
|
||||||
if (status) {
|
|
||||||
status.classList.add('unsupported');
|
|
||||||
status.title = 'Wake lock not available (requires HTTPS)';
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (status) {
|
|
||||||
status.style.cursor = 'pointer';
|
|
||||||
status.addEventListener('click', () => this.toggleWakeLock());
|
|
||||||
}
|
|
||||||
|
|
||||||
await this.requestWakeLock();
|
|
||||||
|
|
||||||
document.addEventListener('visibilitychange', async () => {
|
|
||||||
if (document.visibilityState === 'visible' && this.wakeLockEnabled) {
|
|
||||||
await this.requestWakeLock();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async toggleWakeLock() {
|
|
||||||
if (this.wakeLock) {
|
|
||||||
await this.wakeLock.release();
|
|
||||||
this.wakeLock = null;
|
|
||||||
this.wakeLockEnabled = false;
|
|
||||||
this.updateWakeLockStatus(false);
|
|
||||||
this.showToast('Screen can now sleep', 'info');
|
|
||||||
} else {
|
|
||||||
this.wakeLockEnabled = true;
|
|
||||||
await this.requestWakeLock();
|
|
||||||
if (this.wakeLock) {
|
|
||||||
this.showToast('Screen will stay awake', 'success');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async requestWakeLock() {
|
|
||||||
try {
|
|
||||||
this.wakeLock = await navigator.wakeLock.request('screen');
|
|
||||||
this.wakeLockEnabled = true;
|
|
||||||
this.updateWakeLockStatus(true);
|
|
||||||
|
|
||||||
this.wakeLock.addEventListener('release', () => {
|
|
||||||
this.updateWakeLockStatus(false);
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
console.log('Wake Lock error:', err);
|
|
||||||
this.updateWakeLockStatus(false);
|
|
||||||
const status = document.getElementById('wake-lock-status');
|
|
||||||
if (status && !status.classList.contains('unsupported')) {
|
|
||||||
status.title = 'Wake lock failed: ' + err.message;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateWakeLockStatus(active) {
|
|
||||||
const status = document.getElementById('wake-lock-status');
|
|
||||||
if (status) {
|
|
||||||
status.classList.toggle('active', active);
|
|
||||||
if (!status.classList.contains('unsupported')) {
|
|
||||||
status.title = active ? 'Screen will stay on (click to toggle)' : 'Screen may sleep (click to enable)';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// PWA manifest setup
|
|
||||||
setupPWA() {
|
|
||||||
// Create dynamic manifest for this session
|
|
||||||
const manifest = {
|
|
||||||
name: 'MacroPad',
|
|
||||||
short_name: 'MacroPad',
|
|
||||||
description: 'Remote macro control',
|
|
||||||
start_url: `/${this.sessionId}/app`,
|
|
||||||
display: 'standalone',
|
|
||||||
background_color: '#2e2e2e',
|
|
||||||
theme_color: '#007acc',
|
|
||||||
icons: [
|
|
||||||
{ src: '/static/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
|
|
||||||
{ src: '/static/icons/icon-512.png', sizes: '512x512', type: 'image/png' }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
|
|
||||||
const manifestUrl = URL.createObjectURL(blob);
|
|
||||||
document.getElementById('manifest-link').setAttribute('href', manifestUrl);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let app;
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
app = new MacroPadApp();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,405 @@
|
|||||||
|
// MacroPad App for Relay Mode (externalized so the CSP can drop
|
||||||
|
// 'unsafe-inline' for scripts). All macro/tab/id/name values are rendered
|
||||||
|
// with safe DOM APIs (createElement/textContent) and never via innerHTML.
|
||||||
|
class MacroPadApp {
|
||||||
|
constructor() {
|
||||||
|
this.macros = {};
|
||||||
|
this.tabs = [];
|
||||||
|
this.currentTab = 'All';
|
||||||
|
this.ws = null;
|
||||||
|
this.desktopConnected = false;
|
||||||
|
this.wsAuthenticated = false;
|
||||||
|
|
||||||
|
// Get session ID from URL
|
||||||
|
const pathMatch = window.location.pathname.match(/^\/([a-zA-Z0-9]+)/);
|
||||||
|
this.sessionId = pathMatch ? pathMatch[1] : null;
|
||||||
|
|
||||||
|
// Get password from storage (never from the URL).
|
||||||
|
this.password = sessionStorage.getItem(`macropad_${this.sessionId}`)
|
||||||
|
|| localStorage.getItem(`macropad_${this.sessionId}`);
|
||||||
|
|
||||||
|
if (this.password) {
|
||||||
|
sessionStorage.setItem(`macropad_${this.sessionId}`, this.password);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
this.wakeLock = null;
|
||||||
|
this.wakeLockEnabled = false;
|
||||||
|
|
||||||
|
this.setupPWA();
|
||||||
|
this.setupWebSocket();
|
||||||
|
this.setupEventListeners();
|
||||||
|
this.setupWakeLock();
|
||||||
|
}
|
||||||
|
|
||||||
|
getApiHeaders() {
|
||||||
|
return {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-MacroPad-Password': this.password || ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadTabs() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/${this.sessionId}/api/tabs`, {
|
||||||
|
headers: this.getApiHeaders()
|
||||||
|
});
|
||||||
|
if (response.status === 401) return this.handleAuthError();
|
||||||
|
if (response.status === 503) return this.handleDesktopOffline();
|
||||||
|
const data = await response.json();
|
||||||
|
this.tabs = data.tabs || [];
|
||||||
|
this.renderTabs();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading tabs:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadMacros() {
|
||||||
|
try {
|
||||||
|
const path = this.currentTab === 'All' ? '/api/macros' : `/api/macros/${encodeURIComponent(this.currentTab)}`;
|
||||||
|
const response = await fetch(`/${this.sessionId}${path}`, {
|
||||||
|
headers: this.getApiHeaders()
|
||||||
|
});
|
||||||
|
if (response.status === 401) return this.handleAuthError();
|
||||||
|
if (response.status === 503) return this.handleDesktopOffline();
|
||||||
|
const data = await response.json();
|
||||||
|
this.macros = data.macros || {};
|
||||||
|
this.renderMacros();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading macros:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async executeMacro(macroId) {
|
||||||
|
const card = document.querySelector(`[data-macro-id="${macroId}"]`);
|
||||||
|
if (card) card.classList.add('executing');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/${this.sessionId}/api/execute`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: this.getApiHeaders(),
|
||||||
|
body: JSON.stringify({ macro_id: macroId })
|
||||||
|
});
|
||||||
|
if (!response.ok) throw new Error('Failed');
|
||||||
|
} catch (error) {
|
||||||
|
this.showToast('Execution failed', 'error');
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => card?.classList.remove('executing'), 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleAuthError() {
|
||||||
|
sessionStorage.removeItem(`macropad_${this.sessionId}`);
|
||||||
|
localStorage.removeItem(`macropad_${this.sessionId}`);
|
||||||
|
window.location.href = `/${this.sessionId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDesktopOffline() {
|
||||||
|
this.desktopConnected = false;
|
||||||
|
this.updateConnectionStatus(false);
|
||||||
|
document.getElementById('offline-banner').classList.add('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
setupWebSocket() {
|
||||||
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
const wsUrl = `${protocol}//${window.location.host}/${this.sessionId}/ws`;
|
||||||
|
|
||||||
|
this.ws = new WebSocket(wsUrl);
|
||||||
|
|
||||||
|
this.ws.onmessage = (event) => {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
this.handleMessage(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onclose = () => {
|
||||||
|
this.wsAuthenticated = false;
|
||||||
|
this.updateConnectionStatus(false);
|
||||||
|
setTimeout(() => this.setupWebSocket(), 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onerror = () => this.updateConnectionStatus(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMessage(data) {
|
||||||
|
switch (data.type) {
|
||||||
|
case 'auth_required':
|
||||||
|
if (this.password) {
|
||||||
|
this.ws.send(JSON.stringify({ type: 'auth', password: this.password }));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'auth_response':
|
||||||
|
if (data.success) {
|
||||||
|
this.wsAuthenticated = true;
|
||||||
|
this.updateConnectionStatus(this.desktopConnected);
|
||||||
|
} else {
|
||||||
|
this.handleAuthError();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'desktop_status':
|
||||||
|
this.desktopConnected = data.status === 'connected';
|
||||||
|
this.updateConnectionStatus(this.desktopConnected);
|
||||||
|
document.getElementById('offline-banner').classList.toggle('visible', !this.desktopConnected);
|
||||||
|
if (this.desktopConnected) {
|
||||||
|
this.loadTabs();
|
||||||
|
this.loadMacros();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'macro_created':
|
||||||
|
case 'macro_updated':
|
||||||
|
case 'macro_deleted':
|
||||||
|
this.loadTabs();
|
||||||
|
this.loadMacros();
|
||||||
|
break;
|
||||||
|
case 'executed': {
|
||||||
|
const card = document.querySelector(`[data-macro-id="${data.macro_id}"]`);
|
||||||
|
if (card) {
|
||||||
|
card.classList.add('executing');
|
||||||
|
setTimeout(() => card.classList.remove('executing'), 300);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateConnectionStatus(connected) {
|
||||||
|
const dot = document.querySelector('.status-dot');
|
||||||
|
const text = document.querySelector('.connection-status span');
|
||||||
|
if (dot) dot.classList.toggle('connected', connected);
|
||||||
|
if (text) text.textContent = connected ? 'Connected' : 'Disconnected';
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTabs() {
|
||||||
|
const container = document.getElementById('tabs-container');
|
||||||
|
container.replaceChildren();
|
||||||
|
for (const tab of this.tabs) {
|
||||||
|
const name = typeof tab === 'string' ? tab : String(tab);
|
||||||
|
const btn = document.createElement('button');
|
||||||
|
btn.className = name === this.currentTab ? 'tab active' : 'tab';
|
||||||
|
btn.setAttribute('data-tab', name);
|
||||||
|
btn.textContent = name;
|
||||||
|
container.appendChild(btn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderMacros() {
|
||||||
|
const container = document.getElementById('macro-grid');
|
||||||
|
const entries = Object.entries(this.macros);
|
||||||
|
|
||||||
|
container.replaceChildren();
|
||||||
|
|
||||||
|
if (entries.length === 0) {
|
||||||
|
const empty = document.createElement('div');
|
||||||
|
empty.className = 'empty-state';
|
||||||
|
const p = document.createElement('p');
|
||||||
|
p.textContent = 'No macros found';
|
||||||
|
empty.appendChild(p);
|
||||||
|
container.appendChild(empty);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const [id, macro] of entries) {
|
||||||
|
const name = macro && typeof macro.name === 'string' ? macro.name : '';
|
||||||
|
const hasImage = !!(macro && macro.image_path);
|
||||||
|
const firstChar = name.charAt(0).toUpperCase();
|
||||||
|
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'macro-card';
|
||||||
|
card.setAttribute('data-macro-id', id);
|
||||||
|
card.addEventListener('click', () => this.executeMacro(id));
|
||||||
|
|
||||||
|
if (hasImage) {
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.className = 'macro-image';
|
||||||
|
img.style.display = 'none';
|
||||||
|
card.appendChild(img);
|
||||||
|
}
|
||||||
|
|
||||||
|
const placeholder = document.createElement('div');
|
||||||
|
placeholder.className = 'macro-image-placeholder';
|
||||||
|
placeholder.textContent = firstChar;
|
||||||
|
card.appendChild(placeholder);
|
||||||
|
|
||||||
|
const nameSpan = document.createElement('span');
|
||||||
|
nameSpan.className = 'macro-name';
|
||||||
|
nameSpan.textContent = name;
|
||||||
|
card.appendChild(nameSpan);
|
||||||
|
|
||||||
|
container.appendChild(card);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load macro images via authenticated fetch (header, not URL).
|
||||||
|
this.loadMacroImages();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch each macro image with the password header and display it
|
||||||
|
// as a blob object URL so the credential never appears in a URL.
|
||||||
|
async loadMacroImages() {
|
||||||
|
for (const [id, macro] of Object.entries(this.macros)) {
|
||||||
|
if (!macro.image_path) continue;
|
||||||
|
const card = document.querySelector(`[data-macro-id="${id}"]`);
|
||||||
|
if (!card) continue;
|
||||||
|
const img = card.querySelector('.macro-image');
|
||||||
|
if (!img) continue;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/${this.sessionId}/api/image/${macro.image_path}`,
|
||||||
|
{ headers: this.getApiHeaders() }
|
||||||
|
);
|
||||||
|
if (!response.ok) continue; // keep placeholder
|
||||||
|
const blob = await response.blob();
|
||||||
|
const objectUrl = URL.createObjectURL(blob);
|
||||||
|
img.onload = () => URL.revokeObjectURL(objectUrl);
|
||||||
|
img.src = objectUrl;
|
||||||
|
img.style.display = '';
|
||||||
|
const placeholder = img.nextElementSibling;
|
||||||
|
if (placeholder) placeholder.style.display = 'none';
|
||||||
|
} catch (error) {
|
||||||
|
// Leave the placeholder visible on failure.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setupEventListeners() {
|
||||||
|
document.getElementById('tabs-container').addEventListener('click', (e) => {
|
||||||
|
if (e.target.classList.contains('tab')) {
|
||||||
|
this.currentTab = e.target.dataset.tab;
|
||||||
|
this.renderTabs();
|
||||||
|
this.loadMacros();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const fullscreenBtn = document.getElementById('fullscreen-btn');
|
||||||
|
if (fullscreenBtn) fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());
|
||||||
|
|
||||||
|
const refreshBtn = document.getElementById('refresh-btn');
|
||||||
|
if (refreshBtn) refreshBtn.addEventListener('click', () => this.refresh());
|
||||||
|
}
|
||||||
|
|
||||||
|
showToast(message, type = 'info') {
|
||||||
|
const container = document.getElementById('toast-container');
|
||||||
|
const toast = document.createElement('div');
|
||||||
|
toast.className = `toast ${type}`;
|
||||||
|
toast.textContent = message;
|
||||||
|
container.appendChild(toast);
|
||||||
|
setTimeout(() => toast.remove(), 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh() {
|
||||||
|
this.loadTabs();
|
||||||
|
this.loadMacros();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fullscreen
|
||||||
|
toggleFullscreen() {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
document.documentElement.requestFullscreen().catch(err => {
|
||||||
|
console.log('Fullscreen error:', err);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wake Lock
|
||||||
|
async setupWakeLock() {
|
||||||
|
const status = document.getElementById('wake-lock-status');
|
||||||
|
|
||||||
|
if (!('wakeLock' in navigator)) {
|
||||||
|
console.log('Wake Lock API not supported');
|
||||||
|
if (status) {
|
||||||
|
status.classList.add('unsupported');
|
||||||
|
status.title = 'Wake lock not available (requires HTTPS)';
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status) {
|
||||||
|
status.style.cursor = 'pointer';
|
||||||
|
status.addEventListener('click', () => this.toggleWakeLock());
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.requestWakeLock();
|
||||||
|
|
||||||
|
document.addEventListener('visibilitychange', async () => {
|
||||||
|
if (document.visibilityState === 'visible' && this.wakeLockEnabled) {
|
||||||
|
await this.requestWakeLock();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async toggleWakeLock() {
|
||||||
|
if (this.wakeLock) {
|
||||||
|
await this.wakeLock.release();
|
||||||
|
this.wakeLock = null;
|
||||||
|
this.wakeLockEnabled = false;
|
||||||
|
this.updateWakeLockStatus(false);
|
||||||
|
this.showToast('Screen can now sleep', 'info');
|
||||||
|
} else {
|
||||||
|
this.wakeLockEnabled = true;
|
||||||
|
await this.requestWakeLock();
|
||||||
|
if (this.wakeLock) {
|
||||||
|
this.showToast('Screen will stay awake', 'success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async requestWakeLock() {
|
||||||
|
try {
|
||||||
|
this.wakeLock = await navigator.wakeLock.request('screen');
|
||||||
|
this.wakeLockEnabled = true;
|
||||||
|
this.updateWakeLockStatus(true);
|
||||||
|
|
||||||
|
this.wakeLock.addEventListener('release', () => {
|
||||||
|
this.updateWakeLockStatus(false);
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.log('Wake Lock error:', err);
|
||||||
|
this.updateWakeLockStatus(false);
|
||||||
|
const status = document.getElementById('wake-lock-status');
|
||||||
|
if (status && !status.classList.contains('unsupported')) {
|
||||||
|
status.title = 'Wake lock failed: ' + err.message;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateWakeLockStatus(active) {
|
||||||
|
const status = document.getElementById('wake-lock-status');
|
||||||
|
if (status) {
|
||||||
|
status.classList.toggle('active', active);
|
||||||
|
if (!status.classList.contains('unsupported')) {
|
||||||
|
status.title = active ? 'Screen will stay on (click to toggle)' : 'Screen may sleep (click to enable)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// PWA manifest setup
|
||||||
|
setupPWA() {
|
||||||
|
// Create dynamic manifest for this session
|
||||||
|
const manifest = {
|
||||||
|
name: 'MacroPad',
|
||||||
|
short_name: 'MacroPad',
|
||||||
|
description: 'Remote macro control',
|
||||||
|
start_url: `/${this.sessionId}/app`,
|
||||||
|
display: 'standalone',
|
||||||
|
background_color: '#2e2e2e',
|
||||||
|
theme_color: '#007acc',
|
||||||
|
icons: [
|
||||||
|
{ src: '/static/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
|
||||||
|
{ src: '/static/icons/icon-512.png', sizes: '512x512', type: 'image/png' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
|
||||||
|
const manifestUrl = URL.createObjectURL(blob);
|
||||||
|
document.getElementById('manifest-link').setAttribute('href', manifestUrl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let app;
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
app = new MacroPadApp();
|
||||||
|
});
|
||||||
@@ -158,96 +158,6 @@
|
|||||||
<p class="status" id="status">Checking connection...</p>
|
<p class="status" id="status">Checking connection...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script src="/static/login.js"></script>
|
||||||
const sessionId = window.location.pathname.split('/')[1];
|
|
||||||
const form = document.getElementById('loginForm');
|
|
||||||
const passwordInput = document.getElementById('password');
|
|
||||||
const rememberCheckbox = document.getElementById('remember');
|
|
||||||
const submitBtn = document.getElementById('submitBtn');
|
|
||||||
const errorDiv = document.getElementById('error');
|
|
||||||
const statusDiv = document.getElementById('status');
|
|
||||||
|
|
||||||
let desktopConnected = false;
|
|
||||||
|
|
||||||
// Check for saved password (session first, then "remembered" store)
|
|
||||||
const savedPassword = sessionStorage.getItem(`macropad_${sessionId}`)
|
|
||||||
|| localStorage.getItem(`macropad_${sessionId}`);
|
|
||||||
if (savedPassword) {
|
|
||||||
passwordInput.value = savedPassword;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Connect to WebSocket to check desktop status
|
|
||||||
function checkStatus() {
|
|
||||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
||||||
const ws = new WebSocket(`${protocol}//${window.location.host}/${sessionId}/ws`);
|
|
||||||
|
|
||||||
ws.onmessage = (event) => {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
if (data.type === 'desktop_status') {
|
|
||||||
desktopConnected = data.status === 'connected';
|
|
||||||
updateStatus();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onerror = () => {
|
|
||||||
statusDiv.textContent = 'Connection error';
|
|
||||||
statusDiv.className = 'status disconnected';
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onclose = () => {
|
|
||||||
setTimeout(checkStatus, 5000);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateStatus() {
|
|
||||||
if (desktopConnected) {
|
|
||||||
statusDiv.textContent = 'Desktop connected';
|
|
||||||
statusDiv.className = 'status connected';
|
|
||||||
submitBtn.disabled = false;
|
|
||||||
} else {
|
|
||||||
statusDiv.textContent = 'Desktop not connected';
|
|
||||||
statusDiv.className = 'status disconnected';
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
form.addEventListener('submit', async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
errorDiv.style.display = 'none';
|
|
||||||
|
|
||||||
const password = passwordInput.value;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Test password with a simple API call
|
|
||||||
const response = await fetch(`/${sessionId}/api/tabs`, {
|
|
||||||
headers: {
|
|
||||||
'X-MacroPad-Password': password
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
// Hand the credential to the app via storage (never the URL).
|
|
||||||
sessionStorage.setItem(`macropad_${sessionId}`, password);
|
|
||||||
if (rememberCheckbox.checked) {
|
|
||||||
localStorage.setItem(`macropad_${sessionId}`, password);
|
|
||||||
} else {
|
|
||||||
localStorage.removeItem(`macropad_${sessionId}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Redirect to the PWA (credential is read from storage).
|
|
||||||
window.location.href = `/${sessionId}/app`;
|
|
||||||
} else {
|
|
||||||
const data = await response.json();
|
|
||||||
errorDiv.textContent = data.error || 'Invalid password';
|
|
||||||
errorDiv.style.display = 'block';
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
errorDiv.textContent = 'Connection failed';
|
|
||||||
errorDiv.style.display = 'block';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
checkStatus();
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,91 @@
|
|||||||
|
// MacroPad login page logic (externalized so the CSP can drop 'unsafe-inline'
|
||||||
|
// for scripts).
|
||||||
|
const sessionId = window.location.pathname.split('/')[1];
|
||||||
|
const form = document.getElementById('loginForm');
|
||||||
|
const passwordInput = document.getElementById('password');
|
||||||
|
const rememberCheckbox = document.getElementById('remember');
|
||||||
|
const submitBtn = document.getElementById('submitBtn');
|
||||||
|
const errorDiv = document.getElementById('error');
|
||||||
|
const statusDiv = document.getElementById('status');
|
||||||
|
|
||||||
|
let desktopConnected = false;
|
||||||
|
|
||||||
|
// Check for saved password (session first, then "remembered" store)
|
||||||
|
const savedPassword = sessionStorage.getItem(`macropad_${sessionId}`)
|
||||||
|
|| localStorage.getItem(`macropad_${sessionId}`);
|
||||||
|
if (savedPassword) {
|
||||||
|
passwordInput.value = savedPassword;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Connect to WebSocket to check desktop status
|
||||||
|
function checkStatus() {
|
||||||
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
const ws = new WebSocket(`${protocol}//${window.location.host}/${sessionId}/ws`);
|
||||||
|
|
||||||
|
ws.onmessage = (event) => {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
if (data.type === 'desktop_status') {
|
||||||
|
desktopConnected = data.status === 'connected';
|
||||||
|
updateStatus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onerror = () => {
|
||||||
|
statusDiv.textContent = 'Connection error';
|
||||||
|
statusDiv.className = 'status disconnected';
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onclose = () => {
|
||||||
|
setTimeout(checkStatus, 5000);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateStatus() {
|
||||||
|
if (desktopConnected) {
|
||||||
|
statusDiv.textContent = 'Desktop connected';
|
||||||
|
statusDiv.className = 'status connected';
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
} else {
|
||||||
|
statusDiv.textContent = 'Desktop not connected';
|
||||||
|
statusDiv.className = 'status disconnected';
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
errorDiv.style.display = 'none';
|
||||||
|
|
||||||
|
const password = passwordInput.value;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Test password with a simple API call
|
||||||
|
const response = await fetch(`/${sessionId}/api/tabs`, {
|
||||||
|
headers: {
|
||||||
|
'X-MacroPad-Password': password
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
// Hand the credential to the app via storage (never the URL).
|
||||||
|
sessionStorage.setItem(`macropad_${sessionId}`, password);
|
||||||
|
if (rememberCheckbox.checked) {
|
||||||
|
localStorage.setItem(`macropad_${sessionId}`, password);
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem(`macropad_${sessionId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect to the PWA (credential is read from storage).
|
||||||
|
window.location.href = `/${sessionId}/app`;
|
||||||
|
} else {
|
||||||
|
const data = await response.json();
|
||||||
|
errorDiv.textContent = data.error || 'Invalid password';
|
||||||
|
errorDiv.style.display = 'block';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
errorDiv.textContent = 'Connection failed';
|
||||||
|
errorDiv.style.display = 'block';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
checkStatus();
|
||||||
@@ -37,7 +37,8 @@ type DesktopMessage = AuthMessage | ApiResponseMessage | WsBroadcastMessage | Po
|
|||||||
export function handleDesktopConnection(
|
export function handleDesktopConnection(
|
||||||
socket: WebSocket,
|
socket: WebSocket,
|
||||||
connectionManager: ConnectionManager,
|
connectionManager: ConnectionManager,
|
||||||
sessionManager: SessionManager
|
sessionManager: SessionManager,
|
||||||
|
clientIp: string
|
||||||
): void {
|
): void {
|
||||||
let authenticatedSessionId: string | null = null;
|
let authenticatedSessionId: string | null = null;
|
||||||
// Track failed auth attempts on this individual socket.
|
// Track failed auth attempts on this individual socket.
|
||||||
@@ -49,7 +50,7 @@ export function handleDesktopConnection(
|
|||||||
|
|
||||||
switch (message.type) {
|
switch (message.type) {
|
||||||
case 'auth': {
|
case 'auth': {
|
||||||
const failed = await handleAuth(socket, message, sessionManager, connectionManager, (sessionId) => {
|
const failed = await handleAuth(socket, message, sessionManager, connectionManager, clientIp, (sessionId) => {
|
||||||
authenticatedSessionId = sessionId;
|
authenticatedSessionId = sessionId;
|
||||||
});
|
});
|
||||||
if (failed) {
|
if (failed) {
|
||||||
@@ -110,6 +111,7 @@ async function handleAuth(
|
|||||||
message: AuthMessage,
|
message: AuthMessage,
|
||||||
sessionManager: SessionManager,
|
sessionManager: SessionManager,
|
||||||
connectionManager: ConnectionManager,
|
connectionManager: ConnectionManager,
|
||||||
|
clientIp: string,
|
||||||
setSessionId: (id: string) => void
|
setSessionId: (id: string) => void
|
||||||
): Promise<boolean> {
|
): Promise<boolean> {
|
||||||
try {
|
try {
|
||||||
@@ -117,8 +119,14 @@ async function handleAuth(
|
|||||||
let session;
|
let session;
|
||||||
|
|
||||||
if (sessionId) {
|
if (sessionId) {
|
||||||
// Reject early if this session id is currently locked out.
|
// Namespace the brute-force lockout key to the desktop keyspace and
|
||||||
const lockRemaining = getLockoutRemaining(sessionId);
|
// include the client IP. This keeps the desktop's lockout state entirely
|
||||||
|
// separate from the web-client keyspace, so a web-auth flood can never
|
||||||
|
// lock the desktop out of (re)authenticating.
|
||||||
|
const throttleKey = `desktop:${sessionId}:${clientIp}`;
|
||||||
|
|
||||||
|
// Reject early if this key is currently locked out.
|
||||||
|
const lockRemaining = getLockoutRemaining(throttleKey);
|
||||||
if (lockRemaining > 0) {
|
if (lockRemaining > 0) {
|
||||||
socket.send(JSON.stringify({
|
socket.send(JSON.stringify({
|
||||||
type: 'auth_response',
|
type: 'auth_response',
|
||||||
@@ -132,7 +140,7 @@ async function handleAuth(
|
|||||||
// Validate existing session
|
// Validate existing session
|
||||||
const valid = await sessionManager.validatePassword(sessionId, message.password);
|
const valid = await sessionManager.validatePassword(sessionId, message.password);
|
||||||
if (!valid) {
|
if (!valid) {
|
||||||
recordFailure(sessionId);
|
recordFailure(throttleKey);
|
||||||
socket.send(JSON.stringify({
|
socket.send(JSON.stringify({
|
||||||
type: 'auth_response',
|
type: 'auth_response',
|
||||||
success: false,
|
success: false,
|
||||||
@@ -140,7 +148,7 @@ async function handleAuth(
|
|||||||
}));
|
}));
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
recordSuccess(sessionId);
|
recordSuccess(throttleKey);
|
||||||
session = sessionManager.getSession(sessionId);
|
session = sessionManager.getSession(sessionId);
|
||||||
} else {
|
} else {
|
||||||
// Create new session (may throw on limit / short password)
|
// Create new session (may throw on limit / short password)
|
||||||
|
|||||||
@@ -25,8 +25,13 @@ export function handleWebClientConnection(
|
|||||||
socket: WebSocket,
|
socket: WebSocket,
|
||||||
sessionId: string,
|
sessionId: string,
|
||||||
connectionManager: ConnectionManager,
|
connectionManager: ConnectionManager,
|
||||||
sessionManager: SessionManager
|
sessionManager: SessionManager,
|
||||||
|
clientIp: string
|
||||||
): void {
|
): void {
|
||||||
|
// Namespace the brute-force lockout key to the web keyspace and include the
|
||||||
|
// client IP. This prevents one abusive IP (which knows the shareable session
|
||||||
|
// id) from locking out other web clients or the desktop for this session.
|
||||||
|
const throttleKey = `web:${sessionId}:${clientIp}`;
|
||||||
// Check if session exists
|
// Check if session exists
|
||||||
const session = sessionManager.getSession(sessionId);
|
const session = sessionManager.getSession(sessionId);
|
||||||
if (!session) {
|
if (!session) {
|
||||||
@@ -62,7 +67,7 @@ export function handleWebClientConnection(
|
|||||||
|
|
||||||
switch (message.type) {
|
switch (message.type) {
|
||||||
case 'auth': {
|
case 'auth': {
|
||||||
const failed = await handleAuth(socket, client, message, sessionId, sessionManager);
|
const failed = await handleAuth(socket, client, message, sessionId, sessionManager, throttleKey);
|
||||||
if (failed) {
|
if (failed) {
|
||||||
socketAuthFailures++;
|
socketAuthFailures++;
|
||||||
if (socketAuthFailures >= config.authMaxSocketFailures) {
|
if (socketAuthFailures >= config.authMaxSocketFailures) {
|
||||||
@@ -106,10 +111,11 @@ async function handleAuth(
|
|||||||
client: WebClientConnection,
|
client: WebClientConnection,
|
||||||
message: AuthMessage,
|
message: AuthMessage,
|
||||||
sessionId: string,
|
sessionId: string,
|
||||||
sessionManager: SessionManager
|
sessionManager: SessionManager,
|
||||||
|
throttleKey: string
|
||||||
): Promise<boolean> {
|
): Promise<boolean> {
|
||||||
// Reject early if this session id is currently locked out.
|
// Reject early if this key is currently locked out.
|
||||||
const lockRemaining = getLockoutRemaining(sessionId);
|
const lockRemaining = getLockoutRemaining(throttleKey);
|
||||||
if (lockRemaining > 0) {
|
if (lockRemaining > 0) {
|
||||||
socket.send(JSON.stringify({
|
socket.send(JSON.stringify({
|
||||||
type: 'auth_response',
|
type: 'auth_response',
|
||||||
@@ -123,7 +129,7 @@ async function handleAuth(
|
|||||||
const valid = await sessionManager.validatePassword(sessionId, message.password);
|
const valid = await sessionManager.validatePassword(sessionId, message.password);
|
||||||
|
|
||||||
if (valid) {
|
if (valid) {
|
||||||
recordSuccess(sessionId);
|
recordSuccess(throttleKey);
|
||||||
client.authenticated = true;
|
client.authenticated = true;
|
||||||
socket.send(JSON.stringify({
|
socket.send(JSON.stringify({
|
||||||
type: 'auth_response',
|
type: 'auth_response',
|
||||||
@@ -132,7 +138,7 @@ async function handleAuth(
|
|||||||
logger.debug(`Web client authenticated for session: ${sessionId}`);
|
logger.debug(`Web client authenticated for session: ${sessionId}`);
|
||||||
return false;
|
return false;
|
||||||
} else {
|
} else {
|
||||||
recordFailure(sessionId);
|
recordFailure(throttleKey);
|
||||||
socket.send(JSON.stringify({
|
socket.send(JSON.stringify({
|
||||||
type: 'auth_response',
|
type: 'auth_response',
|
||||||
success: false,
|
success: false,
|
||||||
|
|||||||
@@ -89,12 +89,15 @@ export function createServer() {
|
|||||||
|
|
||||||
// Middleware
|
// Middleware
|
||||||
app.use(helmet({
|
app.use(helmet({
|
||||||
// The bundled login/app pages rely on inline <script> and inline event
|
// Page scripts are served as external files (/static/app.js,
|
||||||
// handlers, so script/style inline is permitted; images may be blobs.
|
// /static/login.js) with no inline handlers, so scripts are restricted to
|
||||||
|
// 'self' (no 'unsafe-inline'). The pages still use inline <style> blocks,
|
||||||
|
// so style-src keeps 'unsafe-inline'. Images may be data:/blob: (macro
|
||||||
|
// images are loaded as blob object URLs) and WS connections need ws:/wss:.
|
||||||
contentSecurityPolicy: {
|
contentSecurityPolicy: {
|
||||||
directives: {
|
directives: {
|
||||||
defaultSrc: ["'self'"],
|
defaultSrc: ["'self'"],
|
||||||
scriptSrc: ["'self'", "'unsafe-inline'"],
|
scriptSrc: ["'self'"],
|
||||||
styleSrc: ["'self'", "'unsafe-inline'"],
|
styleSrc: ["'self'", "'unsafe-inline'"],
|
||||||
imgSrc: ["'self'", 'data:', 'blob:'],
|
imgSrc: ["'self'", 'data:', 'blob:'],
|
||||||
connectSrc: ["'self'", 'ws:', 'wss:'],
|
connectSrc: ["'self'", 'ws:', 'wss:'],
|
||||||
@@ -192,7 +195,7 @@ export function createServer() {
|
|||||||
// Desktop connection: /desktop
|
// Desktop connection: /desktop
|
||||||
if (pathname === '/desktop') {
|
if (pathname === '/desktop') {
|
||||||
wss.handleUpgrade(request, socket, head, (ws) => {
|
wss.handleUpgrade(request, socket, head, (ws) => {
|
||||||
handleDesktopConnection(ws, connectionManager, sessionManager);
|
handleDesktopConnection(ws, connectionManager, sessionManager, ip);
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -202,7 +205,7 @@ export function createServer() {
|
|||||||
if (webClientMatch) {
|
if (webClientMatch) {
|
||||||
const sessionId = webClientMatch[1];
|
const sessionId = webClientMatch[1];
|
||||||
wss.handleUpgrade(request, socket, head, (ws) => {
|
wss.handleUpgrade(request, socket, head, (ws) => {
|
||||||
handleWebClientConnection(ws, sessionId, connectionManager, sessionManager);
|
handleWebClientConnection(ws, sessionId, connectionManager, sessionManager, ip);
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,12 @@
|
|||||||
// Per-session-id auth brute-force lockout (in-memory).
|
// Auth brute-force lockout (in-memory).
|
||||||
//
|
//
|
||||||
// Tracks failed authentication attempts keyed by session id. After
|
// Tracks failed authentication attempts keyed by an opaque, namespaced key
|
||||||
// `authLockoutMaxAttempts` failures within `authLockoutWindowMs`, further
|
// (e.g. `web:${sessionId}:${clientIp}` or `desktop:${sessionId}:${clientIp}`).
|
||||||
// attempts are rejected until `authLockoutDurationMs` has elapsed.
|
// Namespacing by path and client IP keeps the web and desktop keyspaces
|
||||||
|
// separate so one abusive web client cannot lock out other users or the
|
||||||
|
// desktop for the same session. After `authLockoutMaxAttempts` failures within
|
||||||
|
// `authLockoutWindowMs`, further attempts are rejected until
|
||||||
|
// `authLockoutDurationMs` has elapsed.
|
||||||
|
|
||||||
import { config } from '../config';
|
import { config } from '../config';
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user