fix: service edit, CSRF token stability, and license restore (v1.1.1)
- Fix service edit double-write bug (was creating duplicate entries) - Add editable display name field to service edit modal - Backend update endpoint now accepts name, logo, and recalculates url - Fix CSRF token regeneration breaking all POST requests (nonce was being regenerated on every request, invalidating cached tokens) - CSRF nonce now persists across requests, rotated only on TOTP login - Frontend secureFetch auto-retries on CSRF failure with fresh token - Restore lifetime license activation on DNS2 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1 +1 @@
|
|||||||
1
|
2
|
||||||
@@ -49,31 +49,56 @@ function parseCookie(cookieHeader) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Middleware to set CSRF cookie on all requests.
|
* Middleware to set CSRF cookie on requests.
|
||||||
* Always generates a fresh nonce server-side (never trusts client-supplied values).
|
* Preserves existing nonce to avoid invalidating tokens the client has cached.
|
||||||
* The cookie holds the nonce; JavaScript must read it and send the HMAC signature
|
* New nonce is generated only on first visit (no cookie) or after TOTP login
|
||||||
* in the x-csrf-token header. The /api/csrf-token endpoint provides the signature.
|
* (which calls renewCSRFToken). If TOTP is disabled, the nonce is set once
|
||||||
|
* and never changes.
|
||||||
*/
|
*/
|
||||||
function csrfCookieMiddleware(req, res, next) {
|
function csrfCookieMiddleware(req, res, next) {
|
||||||
// Always generate a fresh server-side nonce
|
const cookies = parseCookie(req.headers.cookie);
|
||||||
const csrfNonce = generateToken();
|
const existingNonce = cookies[CSRF_COOKIE_NAME];
|
||||||
|
|
||||||
|
// Reuse existing nonce; only generate fresh if no cookie exists yet
|
||||||
|
const csrfNonce = existingNonce || generateToken();
|
||||||
|
|
||||||
// Store nonce + signature on request so endpoints can access them
|
// Store nonce + signature on request so endpoints can access them
|
||||||
req.csrfToken = signToken(csrfNonce);
|
req.csrfToken = signToken(csrfNonce);
|
||||||
req.csrfNonce = csrfNonce;
|
req.csrfNonce = csrfNonce;
|
||||||
|
|
||||||
// Set cookie with the nonce (SameSite=Strict for additional protection)
|
// Only set cookie if it's new (avoids unnecessary Set-Cookie headers)
|
||||||
|
if (!existingNonce) {
|
||||||
res.cookie(CSRF_COOKIE_NAME, csrfNonce, {
|
res.cookie(CSRF_COOKIE_NAME, csrfNonce, {
|
||||||
httpOnly: false, // Must be readable by JavaScript for signing
|
httpOnly: false, // Must be readable by JavaScript for signing
|
||||||
secure: req.secure || req.protocol === 'https', // Only secure in HTTPS
|
secure: req.secure || req.protocol === 'https',
|
||||||
sameSite: 'strict',
|
sameSite: 'strict',
|
||||||
path: '/',
|
path: '/',
|
||||||
maxAge: 24 * 60 * 60 * 1000 // 24 hours
|
maxAge: 365 * 24 * 60 * 60 * 1000 // 1 year (effectively permanent)
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
next();
|
next();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a fresh CSRF nonce and set it on the response.
|
||||||
|
* Called after TOTP login to rotate the token for the new session.
|
||||||
|
* @param {Object} res - Express response object
|
||||||
|
* @param {boolean} secure - Whether to set Secure flag on cookie
|
||||||
|
* @returns {string} The new CSRF signed token
|
||||||
|
*/
|
||||||
|
function renewCSRFToken(res, secure) {
|
||||||
|
const csrfNonce = generateToken();
|
||||||
|
res.cookie(CSRF_COOKIE_NAME, csrfNonce, {
|
||||||
|
httpOnly: false,
|
||||||
|
secure: !!secure,
|
||||||
|
sameSite: 'strict',
|
||||||
|
path: '/',
|
||||||
|
maxAge: 365 * 24 * 60 * 60 * 1000
|
||||||
|
});
|
||||||
|
return signToken(csrfNonce);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Middleware to validate CSRF token on state-changing requests
|
* Middleware to validate CSRF token on state-changing requests
|
||||||
* Validates that the token in the cookie matches the token in the header
|
* Validates that the token in the cookie matches the token in the header
|
||||||
@@ -174,5 +199,6 @@ module.exports = {
|
|||||||
signToken,
|
signToken,
|
||||||
parseCookie,
|
parseCookie,
|
||||||
csrfCookieMiddleware,
|
csrfCookieMiddleware,
|
||||||
csrfValidationMiddleware
|
csrfValidationMiddleware,
|
||||||
|
renewCSRFToken
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "dashcaddy-api",
|
"name": "dashcaddy-api",
|
||||||
"version": "1.1.0",
|
"version": "1.1.1",
|
||||||
"description": "DashCaddy API server - Dashboard backend for Docker, Caddy & DNS management",
|
"description": "DashCaddy API server - Dashboard backend for Docker, Caddy & DNS management",
|
||||||
"main": "server.js",
|
"main": "server.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
const express = require('express');
|
const express = require('express');
|
||||||
|
const { renewCSRFToken } = require('../../csrf-protection');
|
||||||
|
|
||||||
module.exports = function(ctx) {
|
module.exports = function(ctx) {
|
||||||
const router = express.Router();
|
const router = express.Router();
|
||||||
@@ -104,8 +105,12 @@ module.exports = function(ctx) {
|
|||||||
ctx.log.info('auth', 'TOTP verified, creating session', { ip: ctx.session.getClientIP(req), duration: ctx.totpConfig.sessionDuration });
|
ctx.log.info('auth', 'TOTP verified, creating session', { ip: ctx.session.getClientIP(req), duration: ctx.totpConfig.sessionDuration });
|
||||||
ctx.session.create(req, ctx.totpConfig.sessionDuration);
|
ctx.session.create(req, ctx.totpConfig.sessionDuration);
|
||||||
ctx.session.setCookie(res, ctx.totpConfig.sessionDuration);
|
ctx.session.setCookie(res, ctx.totpConfig.sessionDuration);
|
||||||
|
|
||||||
|
// Rotate CSRF token for the new session
|
||||||
|
const newCsrfToken = renewCSRFToken(res, req.secure || req.protocol === 'https');
|
||||||
|
|
||||||
ctx.log.debug('auth', 'Session created', { sessions: ctx.session.ipSessions.size });
|
ctx.log.debug('auth', 'Session created', { sessions: ctx.session.ipSessions.size });
|
||||||
res.json({ success: true, message: 'Authenticated successfully', sessionDuration: ctx.totpConfig.sessionDuration });
|
res.json({ success: true, message: 'Authenticated successfully', sessionDuration: ctx.totpConfig.sessionDuration, csrfToken: newCsrfToken });
|
||||||
}, 'totp-verify'));
|
}, 'totp-verify'));
|
||||||
|
|
||||||
// Check session validity (used by Caddy forward_auth)
|
// Check session validity (used by Caddy forward_auth)
|
||||||
|
|||||||
@@ -371,9 +371,9 @@ module.exports = function(ctx) {
|
|||||||
res.json({ success: true, message: `Service "${id}" removed from dashboard` });
|
res.json({ success: true, message: `Service "${id}" removed from dashboard` });
|
||||||
}, 'services-delete'));
|
}, 'services-delete'));
|
||||||
|
|
||||||
// Update service configuration (subdomain, port, IP, tailscale)
|
// Update service configuration (subdomain, port, IP, tailscale, name, logo)
|
||||||
router.post('/services/update', ctx.asyncHandler(async (req, res) => {
|
router.post('/services/update', ctx.asyncHandler(async (req, res) => {
|
||||||
const { oldSubdomain, newSubdomain, port, ip, tailscaleOnly } = req.body;
|
const { oldSubdomain, newSubdomain, port, ip, tailscaleOnly, name, logo } = req.body;
|
||||||
|
|
||||||
if (!oldSubdomain || !newSubdomain) {
|
if (!oldSubdomain || !newSubdomain) {
|
||||||
return ctx.errorResponse(res, 400, 'oldSubdomain and newSubdomain are required');
|
return ctx.errorResponse(res, 400, 'oldSubdomain and newSubdomain are required');
|
||||||
@@ -440,13 +440,20 @@ module.exports = function(ctx) {
|
|||||||
await ctx.servicesStateManager.update(services => {
|
await ctx.servicesStateManager.update(services => {
|
||||||
const serviceIndex = services.findIndex(s => s.id === oldSubdomain);
|
const serviceIndex = services.findIndex(s => s.id === oldSubdomain);
|
||||||
if (serviceIndex !== -1) {
|
if (serviceIndex !== -1) {
|
||||||
|
const existing = services[serviceIndex];
|
||||||
|
const finalPort = port || existing.port;
|
||||||
|
const finalIp = ip || existing.ip;
|
||||||
|
|
||||||
services[serviceIndex] = {
|
services[serviceIndex] = {
|
||||||
...services[serviceIndex],
|
...existing,
|
||||||
id: newSubdomain,
|
id: newSubdomain,
|
||||||
port: port || services[serviceIndex].port,
|
port: finalPort,
|
||||||
ip: ip || services[serviceIndex].ip,
|
ip: finalIp,
|
||||||
tailscaleOnly: tailscaleOnly || false
|
tailscaleOnly: tailscaleOnly || false,
|
||||||
|
url: ctx.buildServiceUrl(newSubdomain)
|
||||||
};
|
};
|
||||||
|
if (name) services[serviceIndex].name = name;
|
||||||
|
if (logo) services[serviceIndex].logo = logo;
|
||||||
results.services = 'updated';
|
results.services = 'updated';
|
||||||
} else {
|
} else {
|
||||||
results.services = 'not found';
|
results.services = 'not found';
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
const modal = document.getElementById('service-edit-modal');
|
const modal = document.getElementById('service-edit-modal');
|
||||||
|
|
||||||
document.getElementById('service-edit-title').textContent = `Edit ${service.name}`;
|
document.getElementById('service-edit-title').textContent = `Edit ${service.name}`;
|
||||||
document.getElementById('edit-service-name-display').textContent = service.name;
|
document.getElementById('edit-service-name').value = service.name;
|
||||||
document.getElementById('edit-service-url-display').textContent = service.url || buildServiceUrl(service.id);
|
document.getElementById('edit-service-url-display').textContent = service.url || buildServiceUrl(service.id);
|
||||||
document.getElementById('edit-service-logo-preview').src = service.logo || `/assets/${service.id}.png`;
|
document.getElementById('edit-service-logo-preview').src = service.logo || `/assets/${service.id}.png`;
|
||||||
document.getElementById('edit-subdomain').value = service.id;
|
document.getElementById('edit-subdomain').value = service.id;
|
||||||
@@ -31,6 +31,7 @@
|
|||||||
if (!currentEditService) return;
|
if (!currentEditService) return;
|
||||||
|
|
||||||
const newSubdomain = document.getElementById('edit-subdomain').value.trim().toLowerCase();
|
const newSubdomain = document.getElementById('edit-subdomain').value.trim().toLowerCase();
|
||||||
|
const newName = document.getElementById('edit-service-name').value.trim();
|
||||||
const newPort = document.getElementById('edit-port').value.trim();
|
const newPort = document.getElementById('edit-port').value.trim();
|
||||||
const newIp = document.getElementById('edit-ip').value.trim() || 'localhost';
|
const newIp = document.getElementById('edit-ip').value.trim() || 'localhost';
|
||||||
const tailscaleOnly = document.getElementById('edit-tailscale-only').checked;
|
const tailscaleOnly = document.getElementById('edit-tailscale-only').checked;
|
||||||
@@ -45,10 +46,11 @@
|
|||||||
const changes = [];
|
const changes = [];
|
||||||
|
|
||||||
if (newSubdomain !== oldSubdomain) changes.push('subdomain');
|
if (newSubdomain !== oldSubdomain) changes.push('subdomain');
|
||||||
|
if (newName && newName !== currentEditService.name) changes.push('name');
|
||||||
if (newPort && newPort !== String(currentEditService.port)) changes.push('port');
|
if (newPort && newPort !== String(currentEditService.port)) changes.push('port');
|
||||||
if (newIp !== currentEditService.ip) changes.push('ip');
|
if (newIp !== currentEditService.ip) changes.push('ip');
|
||||||
if (tailscaleOnly !== (currentEditService.tailscaleOnly || false)) changes.push('tailscale');
|
if (tailscaleOnly !== (currentEditService.tailscaleOnly || false)) changes.push('tailscale');
|
||||||
if (newLogo !== currentEditService.logo) changes.push('logo');
|
if (newLogo && newLogo !== currentEditService.logo) changes.push('logo');
|
||||||
|
|
||||||
if (changes.length === 0) {
|
if (changes.length === 0) {
|
||||||
closeServiceEditModal();
|
closeServiceEditModal();
|
||||||
@@ -60,16 +62,17 @@
|
|||||||
saveBtn.disabled = true;
|
saveBtn.disabled = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (changes.includes('subdomain') || changes.includes('port') || changes.includes('ip') || changes.includes('tailscale')) {
|
|
||||||
const response = await secureFetch('/api/v1/services/update', {
|
const response = await secureFetch('/api/v1/services/update', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
oldSubdomain,
|
oldSubdomain,
|
||||||
newSubdomain,
|
newSubdomain,
|
||||||
|
name: newName || currentEditService.name,
|
||||||
port: newPort || currentEditService.port,
|
port: newPort || currentEditService.port,
|
||||||
ip: newIp,
|
ip: newIp,
|
||||||
tailscaleOnly
|
tailscaleOnly,
|
||||||
|
logo: newLogo || undefined
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -77,14 +80,14 @@
|
|||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
throw new Error(result.error || 'Failed to update service');
|
throw new Error(result.error || 'Failed to update service');
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Update local APPS array
|
// Update local APPS array to match
|
||||||
const appIndex = window.APPS.findIndex(a => a.id === oldSubdomain);
|
const appIndex = window.APPS.findIndex(a => a.id === oldSubdomain);
|
||||||
if (appIndex !== -1) {
|
if (appIndex !== -1) {
|
||||||
window.APPS[appIndex] = {
|
window.APPS[appIndex] = {
|
||||||
...window.APPS[appIndex],
|
...window.APPS[appIndex],
|
||||||
id: newSubdomain,
|
id: newSubdomain,
|
||||||
|
name: newName || window.APPS[appIndex].name,
|
||||||
port: newPort || window.APPS[appIndex].port,
|
port: newPort || window.APPS[appIndex].port,
|
||||||
ip: newIp,
|
ip: newIp,
|
||||||
tailscaleOnly,
|
tailscaleOnly,
|
||||||
@@ -92,27 +95,6 @@
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update services via API
|
|
||||||
await secureFetch('/api/v1/services', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
id: newSubdomain,
|
|
||||||
name: currentEditService.name,
|
|
||||||
port: newPort || currentEditService.port,
|
|
||||||
ip: newIp,
|
|
||||||
logo: newLogo || currentEditService.logo,
|
|
||||||
tailscaleOnly,
|
|
||||||
containerId: currentEditService.containerId,
|
|
||||||
appTemplate: currentEditService.appTemplate
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
// If subdomain changed, remove old entry
|
|
||||||
if (newSubdomain !== oldSubdomain) {
|
|
||||||
await secureFetch(`/api/v1/services/${oldSubdomain}`, { method: 'DELETE' });
|
|
||||||
}
|
|
||||||
|
|
||||||
closeServiceEditModal();
|
closeServiceEditModal();
|
||||||
window.buildGrid();
|
window.buildGrid();
|
||||||
window.refreshAll();
|
window.refreshAll();
|
||||||
|
|||||||
@@ -12,12 +12,19 @@
|
|||||||
<!-- Service Info -->
|
<!-- Service Info -->
|
||||||
<div style="display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--card-bg); border-radius: 8px;">
|
<div style="display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--card-bg); border-radius: 8px;">
|
||||||
<img id="edit-service-logo-preview" src="" alt="" style="width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: var(--bg);" />
|
<img id="edit-service-logo-preview" src="" alt="" style="width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: var(--bg);" />
|
||||||
<div>
|
<div style="flex: 1;">
|
||||||
<div id="edit-service-name-display" style="font-weight: 600; font-size: 1.1rem;"></div>
|
|
||||||
<div id="edit-service-url-display" class="text-muted-sm"></div>
|
<div id="edit-service-url-display" class="text-muted-sm"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Display Name -->
|
||||||
|
<div>
|
||||||
|
<label for="edit-service-name" class="form-label-accent-sm">
|
||||||
|
Display Name
|
||||||
|
</label>
|
||||||
|
<input type="text" id="edit-service-name" class="form-input-md" placeholder="Service name shown on dashboard" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Subdomain -->
|
<!-- Subdomain -->
|
||||||
<div>
|
<div>
|
||||||
<label for="edit-subdomain" class="form-label-accent-sm">
|
<label for="edit-subdomain" class="form-label-accent-sm">
|
||||||
|
|||||||
@@ -166,16 +166,18 @@ async function getCSRFToken() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Secure fetch wrapper that automatically adds CSRF token to state-changing requests
|
* Secure fetch wrapper that automatically adds CSRF token to state-changing requests.
|
||||||
|
* If the server returns a CSRF error (403 with DC-100/DC-101), automatically
|
||||||
|
* refreshes the token and retries once.
|
||||||
* @param {string} url - URL to fetch
|
* @param {string} url - URL to fetch
|
||||||
* @param {Object} options - Fetch options
|
* @param {Object} options - Fetch options
|
||||||
* @returns {Promise<Response>} Fetch response
|
* @returns {Promise<Response>} Fetch response
|
||||||
*/
|
*/
|
||||||
async function secureFetch(url, options = {}) {
|
async function secureFetch(url, options = {}) {
|
||||||
const method = (options.method || 'GET').toUpperCase();
|
const method = (options.method || 'GET').toUpperCase();
|
||||||
|
const needsCsrf = !['GET', 'HEAD', 'OPTIONS'].includes(method);
|
||||||
|
|
||||||
// Add CSRF token for state-changing methods
|
if (needsCsrf) {
|
||||||
if (!['GET', 'HEAD', 'OPTIONS'].includes(method)) {
|
|
||||||
try {
|
try {
|
||||||
const token = await getCSRFToken();
|
const token = await getCSRFToken();
|
||||||
options.headers = {
|
options.headers = {
|
||||||
@@ -192,7 +194,26 @@ async function secureFetch(url, options = {}) {
|
|||||||
options = { ...options, signal: AbortSignal.timeout(15000) };
|
options = { ...options, signal: AbortSignal.timeout(15000) };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const response = await fetch(url, options);
|
||||||
|
|
||||||
|
// Auto-retry once on CSRF failure (token may have been rotated by TOTP re-auth)
|
||||||
|
if (needsCsrf && response.status === 403) {
|
||||||
|
try {
|
||||||
|
const body = await response.clone().json();
|
||||||
|
if (body.error && (body.error.includes('DC-100') || body.error.includes('DC-101'))) {
|
||||||
|
csrfToken = null; // Clear cached token
|
||||||
|
const freshToken = await getCSRFToken();
|
||||||
|
options.headers = { ...options.headers, 'X-CSRF-Token': freshToken };
|
||||||
|
// New signal for retry (old one may have been consumed)
|
||||||
|
options.signal = AbortSignal.timeout(15000);
|
||||||
return fetch(url, options);
|
return fetch(url, options);
|
||||||
|
}
|
||||||
|
} catch (_) {
|
||||||
|
// If clone/json fails, return original response
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ===== API CALL HELPERS =====
|
// ===== API CALL HELPERS =====
|
||||||
|
|||||||
@@ -75,6 +75,10 @@
|
|||||||
|
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
errorEl.textContent = '';
|
errorEl.textContent = '';
|
||||||
|
// Update cached CSRF token from TOTP response (server rotates it on login)
|
||||||
|
if (data.csrfToken) {
|
||||||
|
csrfToken = data.csrfToken;
|
||||||
|
}
|
||||||
hideTotpOverlay();
|
hideTotpOverlay();
|
||||||
// Check if redirected here from another service
|
// Check if redirected here from another service
|
||||||
const redirect = safeSessionGet('totp_redirect');
|
const redirect = safeSessionGet('totp_redirect');
|
||||||
|
|||||||
Reference in New Issue
Block a user