aryansingh/muse
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add single-user GitHub OAuth, hardened for internet exposure

Browse Source 
muse drives a download client and writes to the media library, so exposing it
publicly needs more than a login form.

It fails closed. Auth is on unless MUSE_AUTH=off is set explicitly, and when
it is on with incomplete config the app refuses to start rather than serving
open. The mode worth engineering against is not a broken login page, it is a
misconfigured deploy quietly publishing an unauthenticated download client.

Sessions are server-side: the cookie carries a 256-bit random token and
nothing else, and only its SHA-256 is stored. There is no signed payload to
get subtly wrong, a stolen database yields no usable cookies, and logout
revokes for real. The allowlist is re-checked on every request so removing a
user takes effect immediately rather than at session expiry.

OAuth state is compared with secrets.compare_digest, so a callback the user
did not initiate is rejected. MUSE_BASE_URL comes from config rather than
X-Forwarded-* because those headers are attacker-controllable and this one is
a redirect target.

CSP is default-src 'self' with no unsafe-inline, which is why the stylesheet
and script moved out of index.html into static files -- an injected <script>
now cannot execute. Also frame-ancestors 'none', base-uri 'none', nosniff,
DENY, no-referrer and HSTS. FastAPI's /docs, /redoc and /openapi.json are
disabled so the login page does not hand out a map of every endpoint.

/healthz is the only unauthenticated route and returns a bare ok, so the
container healthcheck works without leaking anything.

Verified: misconfigured auth refuses to boot; unauthenticated / redirects and
/api/* returns 401; a forged state is rejected 400; a junk cookie is 401; a
valid session for a non-allowlisted user is 401; all headers present; and the
UI renders with no CSP violations in the console.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
aryansinghandClaude Opus 5 committed 2026-08-04 12:09:51 -05:00
1 parent 10ccc282d4
commit bc46fd80b3
6 files changed
+486 -187
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/app.css
+68
View File
@@ -0,0 +1,68 @@
:root{
--bg:#0f1115; --panel:#171a21; --line:#252a34; --fg:#e7e9ee;
--dim:#8b93a3; --accent:#5b8cff; --ok:#3fb950; --err:#f85149; --warn:#d29922;
}
@media (prefers-color-scheme:light){
:root{--bg:#f6f7f9;--panel:#fff;--line:#e2e5ea;--fg:#12151a;--dim:#5f6672;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
header{position:sticky;top:0;z-index:5;background:var(--bg);
border-bottom:1px solid var(--line);padding:14px 18px}
.wrap{max-width:900px;margin:0 auto}
h1{margin:0 0 10px;font-size:17px;letter-spacing:.2px}
h1 small{color:var(--dim);font-weight:400;font-size:13px;margin-left:8px}
form{display:flex;gap:8px}
input{flex:1;padding:11px 13px;border-radius:9px;border:1px solid var(--line);
background:var(--panel);color:var(--fg);font-size:15px}
input:focus{outline:2px solid var(--accent);outline-offset:-1px}
button{padding:11px 18px;border-radius:9px;border:0;background:var(--accent);
color:#fff;font-weight:600;cursor:pointer;font-size:15px}
button:disabled{opacity:.5;cursor:default}
main{padding:18px}
.row{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;
border:1px solid var(--line);background:var(--panel);margin-bottom:8px}
.row img{width:48px;height:48px;border-radius:6px;object-fit:cover;
background:var(--line);flex:none}
.meta{flex:1;min-width:0}
.t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s{color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.get{background:transparent;border:1px solid var(--accent);color:var(--accent);
padding:7px 14px;font-size:14px}
.get.done{border-color:var(--ok);color:var(--ok)}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);
margin:26px 0 10px;display:flex;align-items:center;gap:10px}
h2 .count{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
details{margin-top:10px}
summary{cursor:pointer;color:var(--dim);font-size:13px;user-select:none}
summary:hover{color:var(--fg)}
textarea{width:100%;min-height:120px;margin-top:9px;padding:11px 13px;
border-radius:9px;border:1px solid var(--line);background:var(--panel);
color:var(--fg);font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
resize:vertical}
textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.hint{color:var(--dim);font-size:12px;margin-top:7px}
.bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;
margin-top:10px}
.bar i{display:block;height:100%;background:var(--accent);transition:width .4s}
.retry{background:transparent;border:1px solid var(--line);color:var(--dim);
padding:5px 11px;font-size:12px;font-weight:400}
.skipped{color:var(--err);font-size:12px;margin-top:8px}
.pill{font-size:12px;padding:2px 9px;border-radius:99px;border:1px solid var(--line);
color:var(--dim);white-space:nowrap}
.pill.imported{color:var(--ok);border-color:var(--ok)}
.pill.failed{color:var(--err);border-color:var(--err)}
.pill.downloading,.pill.searching,.pill.queued{color:var(--warn);border-color:var(--warn)}
.empty{color:var(--dim);padding:22px;text-align:center}
/* Inline style="" attributes are blocked by the strict CSP (style-src 'self'
with no 'unsafe-inline'), so anything that used to be inline lives here.
Setting .style from JS is unaffected -- CSP governs markup, not the CSSOM. */
.btnrow{display:flex;gap:9px;align-items:center;margin-top:9px}
.bar i{width:0}
.hidden{display:none}
.who{float:right;font-weight:400;font-size:12px;color:var(--dim)}
.who a{color:var(--dim);margin-left:9px}
.who a:hover{color:var(--fg)}
static/app.js
+121
View File
@@ -0,0 +1,121 @@
// Who is signed in, plus a logout link. Hidden entirely when MUSE_AUTH=off.
fetch('/api/me').then(r => r.json()).then(d => {
if (d.user) document.getElementById('who').innerHTML =
'signed in as ' + d.user.replace(/[&<>"]/g, '') + ' <a href="/auth/logout">log out</a>';
}).catch(() => {});
const $ = s => document.querySelector(s);
const esc = s => (s??'').replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
$('#f').onsubmit = async e => {
e.preventDefault();
const q = $('#q').value.trim();
if (!q) return;
$('#go').disabled = true;
$('#results').innerHTML = '<div class="empty">searching MusicBrainz&hellip;</div>';
try {
const r = await fetch('/api/search?q=' + encodeURIComponent(q));
const { results } = await r.json();
render(results);
} catch (err) {
$('#results').innerHTML = '<div class="empty">search failed: ' + esc(err.message) + '</div>';
}
$('#go').disabled = false;
};
function render(list) {
if (!list || !list.length) {
$('#results').innerHTML = '<div class="empty">no matches</div>';
return;
}
$('#results').innerHTML = list.map((x, i) => `
<div class="row">
${x.cover ? `<img src="${esc(x.cover)}" loading="lazy" onerror="this.style.visibility='hidden'">`
: '<img>'}
<div class="meta">
<div class="t">${esc(x.title)}</div>
<div class="s">${esc(x.artist)}${x.album ? ' &middot; ' + esc(x.album) : ''}${x.year ? ' &middot; ' + esc(x.year) : ''}</div>
</div>
<button class="get" data-i="${i}">Get</button>
</div>`).join('');
$('#results').querySelectorAll('.get').forEach(b => {
b.onclick = async () => {
const x = list[+b.dataset.i];
b.disabled = true; b.textContent = '…';
await fetch('/api/request', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(x)
});
b.textContent = 'Queued'; b.classList.add('done');
poll();
};
});
}
$('#imprun').onclick = async () => {
const text = $('#bulk').value.trim();
if (!text) return;
const b = $('#imprun');
b.disabled = true; b.textContent = 'Queueing…';
$('#impout').innerHTML = '';
try {
const r = await fetch('/api/import', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text })
});
const d = await r.json();
$('#impout').innerHTML =
`<div class="hint">Queued ${d.queued.length}.</div>` +
(d.skipped.length
? `<div class="skipped">Skipped ${d.skipped.length}: ` +
d.skipped.map(s => esc(s.line) + ' (' + esc(s.why) + ')').join('; ') + '</div>'
: '');
if (d.queued.length) $('#bulk').value = '';
poll();
} catch (e) {
$('#impout').innerHTML = '<div class="skipped">import failed: ' + esc(e.message) + '</div>';
}
b.disabled = false; b.textContent = 'Queue all';
};
async function poll() {
try {
const { jobs, counts, pending } = await (await fetch('/api/jobs')).json();
const active = (counts.queued || 0) + (counts.searching || 0) + (counts.downloading || 0);
const done = counts.imported || 0;
$('#qcount').textContent = active
? `${active} in flight${pending ? ` · ${pending} waiting` : ''}`
: (done ? `${done} imported` : '');
// Progress only means something during a batch.
const bar = $('#bar'), total = active + done;
bar.classList.toggle('hidden', !(active && total));
if (active && total)
bar.firstElementChild.style.width = (done / total * 100).toFixed(1) + '%';
$('#jobs').innerHTML = jobs.length ? jobs.map(j => `
<div class="row">
<div class="meta">
<div class="t">${esc(j.title)}</div>
<div class="s">${esc(j.artist)}${j.detail ? ' &middot; ' + esc(j.detail) : ''}</div>
</div>
${j.state === 'failed'
? `<button class="retry" data-id="${esc(j.id)}">Retry</button>` : ''}
<span class="pill ${esc(j.state)}">${esc(j.state)}</span>
</div>`).join('') : '<div class="empty">nothing requested yet</div>';
$('#jobs').querySelectorAll('.retry').forEach(b => {
b.onclick = async () => {
b.disabled = true;
await fetch('/api/retry/' + b.dataset.id, { method: 'POST' });
poll();
};
});
} catch {}
}
poll();
setInterval(poll, 4000);
static/index.html
+6 -183
View File
@@ -4,70 +4,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>muse</title>
<style>
:root{
--bg:#0f1115; --panel:#171a21; --line:#252a34; --fg:#e7e9ee;
--dim:#8b93a3; --accent:#5b8cff; --ok:#3fb950; --err:#f85149; --warn:#d29922;
}
@media (prefers-color-scheme:light){
:root{--bg:#f6f7f9;--panel:#fff;--line:#e2e5ea;--fg:#12151a;--dim:#5f6672;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
header{position:sticky;top:0;z-index:5;background:var(--bg);
border-bottom:1px solid var(--line);padding:14px 18px}
.wrap{max-width:900px;margin:0 auto}
h1{margin:0 0 10px;font-size:17px;letter-spacing:.2px}
h1 small{color:var(--dim);font-weight:400;font-size:13px;margin-left:8px}
form{display:flex;gap:8px}
input{flex:1;padding:11px 13px;border-radius:9px;border:1px solid var(--line);
background:var(--panel);color:var(--fg);font-size:15px}
input:focus{outline:2px solid var(--accent);outline-offset:-1px}
button{padding:11px 18px;border-radius:9px;border:0;background:var(--accent);
color:#fff;font-weight:600;cursor:pointer;font-size:15px}
button:disabled{opacity:.5;cursor:default}
main{padding:18px}
.row{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;
border:1px solid var(--line);background:var(--panel);margin-bottom:8px}
.row img{width:48px;height:48px;border-radius:6px;object-fit:cover;
background:var(--line);flex:none}
.meta{flex:1;min-width:0}
.t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s{color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.get{background:transparent;border:1px solid var(--accent);color:var(--accent);
padding:7px 14px;font-size:14px}
.get.done{border-color:var(--ok);color:var(--ok)}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);
margin:26px 0 10px;display:flex;align-items:center;gap:10px}
h2 .count{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
details{margin-top:10px}
summary{cursor:pointer;color:var(--dim);font-size:13px;user-select:none}
summary:hover{color:var(--fg)}
textarea{width:100%;min-height:120px;margin-top:9px;padding:11px 13px;
border-radius:9px;border:1px solid var(--line);background:var(--panel);
color:var(--fg);font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
resize:vertical}
textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.hint{color:var(--dim);font-size:12px;margin-top:7px}
.bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;
margin-top:10px}
.bar i{display:block;height:100%;background:var(--accent);transition:width .4s}
.retry{background:transparent;border:1px solid var(--line);color:var(--dim);
padding:5px 11px;font-size:12px;font-weight:400}
.skipped{color:var(--err);font-size:12px;margin-top:8px}
.pill{font-size:12px;padding:2px 9px;border-radius:99px;border:1px solid var(--line);
color:var(--dim);white-space:nowrap}
.pill.imported{color:var(--ok);border-color:var(--ok)}
.pill.failed{color:var(--err);border-color:var(--err)}
.pill.downloading,.pill.searching,.pill.queued{color:var(--warn);border-color:var(--warn)}
.empty{color:var(--dim);padding:22px;text-align:center}
</style>
<link rel="stylesheet" href="/static/app.css">
<script src="/static/app.js" defer></script>
</head>
<body>
<header><div class="wrap">
<h1>muse <small>search a song &rarr; it lands in Navidrome</small></h1>
<h1>muse <small>search a song &rarr; it lands in Navidrome</small>
<span class="who" id="who"></span></h1>
<form id="f">
<input id="q" placeholder="artist, song title&hellip;" autocomplete="off" autofocus>
<button id="go">Search</button>
@@ -81,7 +24,7 @@ Juice WRLD - Lucid Dreams
Tory Lanez - The Color Violet
Or paste a Deezer album / playlist URL to expand it."></textarea>
<div style="display:flex;gap:9px;align-items:center;margin-top:9px">
<div class="btnrow">
<button id="imprun" type="button">Queue all</button>
<span class="hint" id="imphint">Top Deezer match is taken automatically &mdash; check the list below.</span>
</div>
@@ -92,129 +35,9 @@ Or paste a Deezer album / playlist URL to expand it."></textarea>
<main class="wrap">
<div id="results"></div>
<h2>Requests <span class="count" id="qcount"></span></h2>
<div class="bar" id="bar" style="display:none"><i style="width:0"></i></div>
<div class="bar hidden" id="bar"><i></i></div>
<div id="jobs"><div class="empty">nothing requested yet</div></div>
</main>
<script>
const $ = s => document.querySelector(s);
const esc = s => (s??'').replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
$('#f').onsubmit = async e => {
e.preventDefault();
const q = $('#q').value.trim();
if (!q) return;
$('#go').disabled = true;
$('#results').innerHTML = '<div class="empty">searching MusicBrainz&hellip;</div>';
try {
const r = await fetch('/api/search?q=' + encodeURIComponent(q));
const { results } = await r.json();
render(results);
} catch (err) {
$('#results').innerHTML = '<div class="empty">search failed: ' + esc(err.message) + '</div>';
}
$('#go').disabled = false;
};
function render(list) {
if (!list || !list.length) {
$('#results').innerHTML = '<div class="empty">no matches</div>';
return;
}
$('#results').innerHTML = list.map((x, i) => `
<div class="row">
${x.cover ? `<img src="${esc(x.cover)}" loading="lazy" onerror="this.style.visibility='hidden'">`
: '<img>'}
<div class="meta">
<div class="t">${esc(x.title)}</div>
<div class="s">${esc(x.artist)}${x.album ? ' &middot; ' + esc(x.album) : ''}${x.year ? ' &middot; ' + esc(x.year) : ''}</div>
</div>
<button class="get" data-i="${i}">Get</button>
</div>`).join('');
$('#results').querySelectorAll('.get').forEach(b => {
b.onclick = async () => {
const x = list[+b.dataset.i];
b.disabled = true; b.textContent = '…';
await fetch('/api/request', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(x)
});
b.textContent = 'Queued'; b.classList.add('done');
poll();
};
});
}
$('#imprun').onclick = async () => {
const text = $('#bulk').value.trim();
if (!text) return;
const b = $('#imprun');
b.disabled = true; b.textContent = 'Queueing…';
$('#impout').innerHTML = '';
try {
const r = await fetch('/api/import', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text })
});
const d = await r.json();
$('#impout').innerHTML =
`<div class="hint">Queued ${d.queued.length}.</div>` +
(d.skipped.length
? `<div class="skipped">Skipped ${d.skipped.length}: ` +
d.skipped.map(s => esc(s.line) + ' (' + esc(s.why) + ')').join('; ') + '</div>'
: '');
if (d.queued.length) $('#bulk').value = '';
poll();
} catch (e) {
$('#impout').innerHTML = '<div class="skipped">import failed: ' + esc(e.message) + '</div>';
}
b.disabled = false; b.textContent = 'Queue all';
};
async function poll() {
try {
const { jobs, counts, pending } = await (await fetch('/api/jobs')).json();
const active = (counts.queued || 0) + (counts.searching || 0) + (counts.downloading || 0);
const done = counts.imported || 0;
$('#qcount').textContent = active
? `${active} in flight${pending ? ` · ${pending} waiting` : ''}`
: (done ? `${done} imported` : '');
// Progress only means something during a batch.
const bar = $('#bar'), total = active + done;
if (active && total) {
bar.style.display = 'block';
bar.firstElementChild.style.width = (done / total * 100).toFixed(1) + '%';
} else {
bar.style.display = 'none';
}
$('#jobs').innerHTML = jobs.length ? jobs.map(j => `
<div class="row">
<div class="meta">
<div class="t">${esc(j.title)}</div>
<div class="s">${esc(j.artist)}${j.detail ? ' &middot; ' + esc(j.detail) : ''}</div>
</div>
${j.state === 'failed'
? `<button class="retry" data-id="${esc(j.id)}">Retry</button>` : ''}
<span class="pill ${esc(j.state)}">${esc(j.state)}</span>
</div>`).join('') : '<div class="empty">nothing requested yet</div>';
$('#jobs').querySelectorAll('.retry').forEach(b => {
b.onclick = async () => {
b.disabled = true;
await fetch('/api/retry/' + b.dataset.id, { method: 'POST' });
poll();
};
});
} catch {}
}
poll();
setInterval(poll, 4000);
</script>
</body>
</html>