Merge pull request #77 from ZHANGTIANYAO1/fix/webui-referrer-policy-csrf

fix(web): referrer-policy same-origin 修复扫码登录不弹二维码 + cookie 无法保存

src/web/middleware/csrf.test.ts

@@ -55,4 +55,19 @@ describe("csrfOriginCheck middleware", () => {
       .set("Referer", "https://evil.com/some/path");
     expect(res.status).toBe(403);
   });
+
+  // Documents the server side of the QR-login outage: a `no-referrer` document
+  // policy makes the browser send the literal `Origin: null` on same-origin
+  // POSTs, which this guard cannot parse a host from and therefore rejects.
+  // The fix lives in the frontend (referrer policy -> same-origin); this test
+  // pins the gate behavior so the interaction stays understood. See
+  // src/web/referrer-policy.test.ts.
+  it('rejects POST with the literal Origin: "null" (no-referrer downgrade)', async () => {
+    const res = await request(app)
+      .post("/")
+      .set("Host", "example.com")
+      .set("Origin", "null");
+    expect(res.status).toBe(403);
+    expect(res.body).toEqual({ error: "bad origin" });
+  });
 });

src/web/referrer-policy.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Regression guard for the QR-login / cookie-save outage (and in fact every
+ * mutating WebUI action). On 2026-05-27 the WebUI-auth feature added the
+ * same-origin CSRF gate `app.use("/api", csrfOriginCheck)` in server.ts, and
+ * the same day a `<meta name="referrer" content="no-referrer">` was added to
+ * web/index.html so cross-origin CDN cover thumbnails would load.
+ *
+ * Those two changes conflict: per the WHATWG Fetch "Append a request Origin
+ * header" algorithm, the `no-referrer` policy sets the Origin header to the
+ * literal string "null" on same-origin non-GET requests. csrfOriginCheck then
+ * fails to parse a host (`new URL("null")` throws) and returns 403 "bad
+ * origin", so POST /api/auth/qrcode (and every other POST/PUT/DELETE under
+ * /api/* except /api/session/*) never reaches its handler.
+ *
+ * `same-origin` is the correct policy: it keeps the real Origin on same-origin
+ * requests (CSRF passes) while still sending no Referer cross-origin (CDN
+ * thumbnails keep loading). Never switch this back to `no-referrer`.
+ */
+describe("frontend referrer policy (CSRF / Origin-header regression)", () => {
+  const indexHtmlPath = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    "../../web/index.html"
+  );
+  const html = fs.readFileSync(indexHtmlPath, "utf-8");
+
+  const referrerMeta = html.match(
+    /<meta\s+name=["']referrer["']\s+content=["']([^"']+)["']\s*\/?>/i
+  );
+
+  it("declares a referrer policy meta tag", () => {
+    expect(referrerMeta).not.toBeNull();
+  });
+
+  it("uses same-origin (NOT no-referrer, which sends Origin: null and 403s every POST)", () => {
+    expect(referrerMeta?.[1]).toBe("same-origin");
+  });
+
+  it("does not contain no-referrer anywhere in the document head", () => {
+    expect(html).not.toMatch(/content=["']no-referrer["']/i);
+  });
+});

web/index.html

@@ -3,6 +3,18 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Bilibili / NetEase / QQ image CDNs reject requests whose Referer is not on
+       their whitelist, so we must not leak a Referer cross-origin. "same-origin"
+       does exactly that: full Referer for our own requests, none for cross-origin
+       ones — so cover thumbnails (<img> AND CSS background-image) still load.
+       Do NOT switch this back to "no-referrer": per the WHATWG Fetch spec
+       ("Append a request Origin header") no-referrer downgrades the Origin header
+       to the literal string "null" on same-origin non-GET requests. The /api/*
+       CSRF guard (src/web/middleware/csrf.ts) then can't parse a host from it and
+       responds 403 "bad origin", silently breaking EVERY POST/PUT/DELETE — QR
+       login, cookie save, playback controls, bot management, user admin, etc.
+       "same-origin" keeps the real Origin on same-origin requests, so CSRF passes. -->
+  <meta name="referrer" content="same-origin">
   <title>TSMusicBot</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap" rel="stylesheet">

web/src/components/Player.vue

@@ -27,10 +27,10 @@
       <div class="player-left" @click="toggleLyrics">
         <CoverArt :url="currentSong.coverUrl" :size="40" />
         <div class="song-info">
-          <div class="song-name">{{ currentSong.name }}</div>
+          <div class="song-name" :title="currentSong.name">{{ currentSong.name }}</div>
           <div class="song-artist">
             <span v-if="showBotBadge" class="bot-badge">{{ activeBot?.name }}</span>
-            {{ currentSong.artist }}
+            <span class="artist-name" :title="currentSong.artist">{{ currentSong.artist }}</span>
           </div>
         </div>
       </div>
@@ -310,6 +310,8 @@ function cycleMode() {
 
 .song-info {
   min-width: 0;
+  flex: 1;
+  overflow: hidden;
 }
 
 .song-name {
@@ -326,6 +328,16 @@ function cycleMode() {
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.artist-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
 }
 
 .bot-badge {

web/src/views/Home.vue

@@ -379,6 +379,7 @@ onMounted(() => {
 
 .daily-card {
   cursor: pointer;
+  min-width: 0;
 }
 
 .daily-name {