Og: クエリパラメータにタイトルを渡すときはエスケープする (#46)

2RiniaR · Sep 28, 2024 · 25a31df · 25a31df
1 parent 426284d
commit 25a31df
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/app/api/og/route.tsx b/app/api/og/route.tsx
@@ -8,7 +8,12 @@ export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
   const font = await fs.readFile(path.join(process.cwd(), "assets", "mplus-2c-medium.ttf"));
   return new ImageResponse(
-    <OgImage title={searchParams.get("title") ?? ""} thumbnail={searchParams.get("thumbnail") ?? undefined} />,
+    (
+      <OgImage
+        title={decodeURIComponent(searchParams.get("title") ?? "")}
+        thumbnail={searchParams.get("thumbnail") ?? undefined}
+      />
+    ),
     {
       fonts: [
         {

diff --git a/app/pages/[slug]/page.tsx b/app/pages/[slug]/page.tsx
@@ -27,7 +27,7 @@ export const generateMetadata = async ({ params }: Props) => {
       siteName: siteName,
       type: "article",
       images: {
-        url: `${siteUrl}/api/og?title=${data.title}${data.thumbnail?.url !== undefined ? `&thumbnail=${data.thumbnail.url}` : ""}`,
+        url: `${siteUrl}/api/og?title=${encodeURIComponent(data.title)}${data.thumbnail?.url !== undefined ? `&thumbnail=${data.thumbnail.url}` : ""}`,
         width: 1200,
         height: 630
       }

diff --git a/app/preview/pages/page.tsx b/app/preview/pages/page.tsx
@@ -23,7 +23,7 @@ export const generateMetadata = async ({ searchParams }: Props) => {
       siteName: siteName,
       type: "article",
       images: {
-        url: `${siteUrl}/api/og?title=${data.title}${data.thumbnail?.url !== undefined ? `&thumbnail=${data.thumbnail.url}` : ""}`,
+        url: `${siteUrl}/api/og?title=${encodeURIComponent(data.title)}${data.thumbnail?.url !== undefined ? `&thumbnail=${data.thumbnail.url}` : ""}`,
         width: 1200,
         height: 630
       }

diff --git a/components/ArticleShare.tsx b/components/ArticleShare.tsx
@@ -24,7 +24,7 @@ export const ArticleShare = ({ article, displayMessage }: Props) => {
       <div className={styles.elementRoot}>
         <ExternalLink
           aria-label="X(旧Twitter)にポスト"
-          href={`https://twitter.com/intent/tweet?url=${url}&text=${title}`}
+          href={`https://twitter.com/intent/tweet?url=${url}&text=${encodeURIComponent(title)}`}
           className={styles.element}
         >
           <Image src={twitterLogo} alt="X(旧Twitter)" width={24} className={styles.icon} />
@@ -38,7 +38,7 @@ export const ArticleShare = ({ article, displayMessage }: Props) => {
         </ExternalLink>
         <ExternalLink
           aria-label="はてなブックマークに登録"
-          href={`https://b.hatena.ne.jp/add?mode=confirm&url=${url}&title=${title}`}
+          href={`https://b.hatena.ne.jp/add?mode=confirm&url=${url}&title=${encodeURIComponent(title)}`}
           className={styles.element}
         >
           <Image src={hatenabookmarkLogo} alt="はてなブックマーク" width={24} className={styles.icon} />