From 04a4ef9c85c2f20e2a89ee79492602bccf69e1e7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 19 Apr 2026 20:18:55 +0000
Subject: [PATCH] =?UTF-8?q?fix(community):=20CR=20fixes=20=E2=80=94=20sani?=
 =?UTF-8?q?tize=20OG=20cover=20URLs=20+=20Hero=20=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=8E=BB=E5=B5=8C=E5=A5=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot CR 指出的两条：

PR #315 Hero.tsx:119 —— <a> 包 <button> 是嵌套交互元素（HTML 无效 + a11y 问题）
  修法：把 <Link> 直接渲染成按钮样式，不再嵌套 <button>

PR #316 LinkCard.tsx:52 / admin/community/page.tsx:143 —— OG 封面 URL
  直接进 <img src> 没过白名单。
  修法：用 lib/url-safety.ts 的 sanitizeMediaUrl 兜底，拦 javascript:/data: 协议
  （后端 UrlNormalizer 是第一道防线，前端 sanitize 是 defense-in-depth）
---
 app/admin/community/page.tsx     | 32 ++++++++++++++++++--------------
 app/components/Hero.tsx          | 15 ++++++---------
 app/feed/components/LinkCard.tsx |  7 +++++--
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/app/admin/community/page.tsx b/app/admin/community/page.tsx
index e78a129..04d4bc8 100644
--- a/app/admin/community/page.tsx
+++ b/app/admin/community/page.tsx
@@ -14,7 +14,7 @@
 import { useEffect, useState } from "react";
 import { AdminGuard } from "@/app/admin/events/AdminGuard";
 import type { SharedLinkView } from "@/app/feed/types";
-import { sanitizeExternalUrl } from "@/lib/url-safety";
+import { sanitizeExternalUrl, sanitizeMediaUrl } from "@/lib/url-safety";
 import { approveLink, listPendingLinks, rejectLink } from "./lib";
 
 export default function AdminCommunityPage() {
@@ -134,19 +134,23 @@ function AdminCommunityInner() {
                     图床防盗链会检查 Referer，非本站来源返回"未经允许"裂图。
                     next/image 的 remotePatterns 限制外站域名也一并规避。 */}
                 <div className="w-full md:w-40 aspect-[16/9] flex-shrink-0 bg-neutral-100 dark:bg-neutral-900 relative overflow-hidden">
-                  {link.ogCover ? (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                      src={link.ogCover}
-                      alt={link.ogTitle ?? link.url}
-                      referrerPolicy="no-referrer"
-                      className="absolute inset-0 w-full h-full object-cover"
-                    />
-                  ) : (
-                    <span className="absolute inset-0 flex items-center justify-center text-3xl font-bold text-neutral-400">
-                      {link.host[0]?.toUpperCase() ?? "?"}
-                    </span>
-                  )}
+                  {(() => {
+                    // defense-in-depth：过 sanitizeMediaUrl 拦 javascript:/data: 协议
+                    const safeCover = sanitizeMediaUrl(link.ogCover);
+                    return safeCover ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={safeCover}
+                        alt={link.ogTitle ?? link.url}
+                        referrerPolicy="no-referrer"
+                        className="absolute inset-0 w-full h-full object-cover"
+                      />
+                    ) : (
+                      <span className="absolute inset-0 flex items-center justify-center text-3xl font-bold text-neutral-400">
+                        {link.host[0]?.toUpperCase() ?? "?"}
+                      </span>
+                    );
+                  })()}
                 </div>
 
                 {/* 中：元信息 */}
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index fa1fa2d..41506bf 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -94,29 +94,26 @@ export async function Hero() {
               <p className="font-body text-sm mb-6 opacity-80">
                 {t("join.body")}
               </p>
-              {/* 双阅读入口：严肃文档 + 社区随手分享，视觉同构；投稿动作已在 Hero 左侧 Contribute/ShareLink */}
+              {/* 双阅读入口：严肃文档 + 社区随手分享，视觉同构；投稿动作已在 Hero 左侧 Contribute/ShareLink。
+                  直接把 <Link> 渲染成按钮样式，避免 <a><button> 嵌套交互元素（HTML 无效 + 键盘/a11y 问题）。 */}
               <div className="flex flex-col gap-3">
                 <Link
                   href="/docs/learn/ai"
-                  className="block w-full"
+                  className="block w-full py-3 border border-[var(--background)] font-sans text-xs uppercase tracking-widest text-center hover:bg-[var(--background)] hover:text-[var(--foreground)] transition-all cursor-pointer"
                   data-umami-event="navigation_click"
                   data-umami-event-region="hero_cta"
                   data-umami-event-label="Access Articles"
                 >
-                  <button className="w-full py-3 border border-[var(--background)] font-sans text-xs uppercase tracking-widest hover:bg-[var(--background)] hover:text-[var(--foreground)] transition-all cursor-pointer">
-                    {t("cta.access")}
-                  </button>
+                  {t("cta.access")}
                 </Link>
                 <Link
                   href="/feed"
-                  className="block w-full"
+                  className="block w-full py-3 border border-[var(--background)] font-sans text-xs uppercase tracking-widest text-center hover:bg-[var(--background)] hover:text-[var(--foreground)] transition-all cursor-pointer"
                   data-umami-event="navigation_click"
                   data-umami-event-region="hero_cta"
                   data-umami-event-label="Community Feed"
                 >
-                  <button className="w-full py-3 border border-[var(--background)] font-sans text-xs uppercase tracking-widest hover:bg-[var(--background)] hover:text-[var(--foreground)] transition-all cursor-pointer">
-                    {t("cta.feed")}
-                  </button>
+                  {t("cta.feed")}
                 </Link>
               </div>
             </div>
diff --git a/app/feed/components/LinkCard.tsx b/app/feed/components/LinkCard.tsx
index 7a71bcc..cd1c639 100644
--- a/app/feed/components/LinkCard.tsx
+++ b/app/feed/components/LinkCard.tsx
@@ -10,6 +10,7 @@ import { useTranslations } from "next-intl";
 import type { SharedLinkView } from "@/app/feed/types";
 import { ReportButton } from "@/app/feed/components/ReportButton";
 import { Badge } from "@/components/ui/badge";
+import { sanitizeMediaUrl } from "@/lib/url-safety";
 
 interface LinkCardProps {
   link: SharedLinkView;
@@ -27,6 +28,8 @@ function getHostInitial(host: string): string {
 
 export function LinkCard({ link, categoryLabel, isLoggedIn }: LinkCardProps) {
   const t = useTranslations("feed.card");
+  // defense-in-depth：过白名单协议拦 javascript:/data:，后端 UrlNormalizer 是第一道，这里是第二道
+  const safeOgCover = sanitizeMediaUrl(link.ogCover);
 
   return (
     <li className="group border border-[var(--foreground)] hover:border-[#CC0000] transition-colors duration-150 flex flex-col">
@@ -39,14 +42,14 @@ export function LinkCard({ link, categoryLabel, isLoggedIn }: LinkCardProps) {
         aria-label={link.ogTitle ?? link.url}
       >
         {/* OG 封面 / 占位块 */}
-        {link.ogCover && !link.ogFetchFailed ? (
+        {safeOgCover && !link.ogFetchFailed ? (
           // next/image 全站 unoptimized:true，用 img 即可（与 events 页一致）。
           // referrerPolicy="no-referrer"：微信 mmbiz.qpic.cn 防盗链会检查 Referer，
           // 非 mp.weixin.qq.com 来源直接返回"未经允许使用"裂图；不发 Referer 时
           // 反而放行（微信客户端内打开文章浏览器也不发 Referer）。
           // eslint-disable-next-line @next/next/no-img-element
           <img
-            src={link.ogCover}
+            src={safeOgCover}
             alt={link.ogTitle ?? link.host}
             referrerPolicy="no-referrer"
             className="w-full aspect-[16/9] object-cover border-b border-[var(--foreground)]"