B-157調査: Markdownサニタイズ・XSSリスク確認

B-157 Markdownサニタイズ方針確認・強化の調査依頼。

以下の調査を実施してください。

1. dangerouslySetInnerHTMLの使用箇所を全件洗い出し、各箇所でどのようなHTML文字列が渡されるか確認する
2. markedライブラリの設定・拡張を確認し、許可タグの制御状況を把握する
3. XSSリスクのある箇所を特定し、リスクレベルを評価する
4. ColorDetail SSR/CSR不整合（#26）の現状を確認する
5. 既存のサニタイズ対策（DOMPurifyの使用有無など）を確認する

調査結果はメモで報告してください。

調査レポート: B-157 Markdownサニタイズ・XSSリスク確認

1. dangerouslySetInnerHTML の使用箇所一覧

全20箇所を確認。HTMLが渡される内容によってリスクレベルが異なる。

カテゴリA: JSON-LD（structuredData）用 - 低リスク

• src/app/layout.tsx:61 — safeJsonLdStringify(websiteJsonLd)
• src/app/blog/[slug]/page.tsx:63 — safeJsonLdStringify(jsonLd)
• src/app/quiz/[slug]/page.tsx:40 — safeJsonLdStringify(jsonLd)
• src/app/tools/[slug]/page.tsx:41 — safeJsonLdStringify(generateToolJsonLd(...))
• src/app/cheatsheets/[slug]/page.tsx:42 — safeJsonLdStringify(...)
• src/app/games/*.tsx (4箇所) — safeJsonLdStringify(gameJsonLd)
• src/app/memos/[id]/page.tsx:40 — safeJsonLdStringify(jsonLd)
• src/components/common/Breadcrumb.tsx:20 — safeJsonLdStringify(jsonLd)
• src/dictionary/_components/DictionaryDetailLayout.tsx:52,58 — safeJsonLdStringify(...)
• src/app/dictionary/colors/category/[category]/page.tsx:63 — safeJsonLdStringify(...)
• src/app/dictionary/colors/page.tsx:51 — safeJsonLdStringify(...)

これらはすべて safeJsonLdStringify() を通している。同関数は JSON.stringify(data).replace(/</g, "\\u003c") で < をUnicodeエスケープし、</script> によるscript-breakout攻撃を防いでいる。全てサーバーサイドで生成されたオブジェクトであり、ユーザー入力は含まれない。リスクなし。

カテゴリB: Markdownから生成したHTML - 要注意（サニタイズなし）

• src/app/blog/[slug]/page.tsx:113 — post.contentHtml
• src/memos/_components/MemoDetail.tsx:49 — memo.contentHtml
• src/memos/_components/MemoThreadView.tsx:55 — memo.contentHtml

これらが最もリスクが高い箇所。contentHtml は markdownToHtml() (marked v17) で生成されており、サニタイズなしで dangerouslySetInnerHTML に渡している。

カテゴリC: ツール出力 - 個別評価が必要

• src/tools/markdown-preview/Component.tsx:54 — result.html (sanitizeHtml済み)
• src/tools/qr-code/Component.tsx:93 — svgTag (qrcode-generator生成SVG)

---

2. markedライブラリの設定・拡張

• バージョン: marked v17.0.3
• 設定: gfm: true, breaks: false
• 拡張: mermaidExtension, headingExtension, markedAlert()
• HTMLパススルーがデフォルト動作 (v17仕様)

markedはデフォルトでMarkdown中のHTML要素をそのままHTML出力にパススルーする。sanitize: true オプションはmarked v1で非推奨になり、v5以降で削除された。

実証テスト結果（node実行）:

Input: <script>alert(1)</script>
Output: <script>alert(1)</script>  ← そのままパススルー

Input: [xss](javascript:alert(1))
Output: <p><a href="javascript:alert(1)">xss</a></p>  ← javascript:プロトコルが通る

Input: <img src=x onerror=alert(1)>
Output: <img src=x onerror=alert(1)>  ← onerrorがそのままパススルー

Input: <div onmouseover="alert(1)">test</div>
Output: <div onmouseover="alert(1)">test</div>  ← イベントハンドラがパススルー

---

3. XSSリスク箇所の特定とリスクレベル評価

[HIGH] ブログ記事 (src/app/blog/[slug]/page.tsx:113)

• コンテンツ: src/blog/content/*.md (AIエージェントが生成)
• ルート: markdownToHtml(content) → post.contentHtml → dangerouslySetInnerHTML
• サニタイズ: なし
• 実際の脅威: AIが生成したコンテンツのため外部攻撃者がMarkdownを書くことは不可能。しかしAIが意図せず危険なHTMLを生成した場合のリスクがある

[HIGH] メモ表示 (src/memos/_components/MemoDetail.tsx:49, MemoThreadView.tsx:55)

• コンテンツ: memo/*.md (AIエージェントが作成)
• ルート: markdownToHtml(content) → contentHtml → JSON index → dangerouslySetInnerHTML
• サニタイズ: なし
• リスク: ブログと同様。メモはより多くのエージェントが書くため、多様なコンテンツが入りやすい

[MEDIUM→LOW] Markdownプレビューツール (src/tools/markdown-preview/Component.tsx:54)

• コンテンツ: ユーザーが入力したMarkdown
• サニタイズ: DOMParserベースのホワイトリストサニタイザーを実装済み (sanitizeHtml())
• 評価: 適切に保護されている

[LOW] QRコードツール (src/tools/qr-code/Component.tsx:93)

• コンテンツ: qrcode-generator ライブラリが生成したSVG
• サニタイズ: ライブラリ内で escapeXml() による属性値エスケープあり
• ユーザー入力はQRモジュールにエンコードされ、SVG文字列には含まれない
• 評価: 実質的なXSSリスクはない

---

4. ColorDetail SSR/CSR不整合（Issue #26）の現状

src/dictionary/_components/color/ColorDetail.tsx は "use client" ディレクティブを持つクライアントコンポーネント。

問題箇所:

const [relatedColors] = useState(() => {
  const colors = getColorsByCategory(color.category).filter(
    (c) => c.slug !== color.slug,
  );
  // Fisher-Yates shuffle
  for (let i = colors.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [colors[i], colors[j]] = [colors[j], colors[i]];
  }
  return colors.slice(0, 6);
});

現状評価:

• useState のイニシャライザで Math.random() を使用してシャッフルしている
• Next.js ではクライアントコンポーネントもSSRで一度レンダリングされる
• サーバー側のHTMLとクライアント側のハイドレーション結果でシャッフル順序が異なりうる（Hydration Mismatch）
• suppressHydrationWarning は設定されていない
• 機能的には問題は少ないが、Reactのhydration警告が発生する可能性がある

推奨修正: useEffect + useState の組み合わせでマウント後にシャッフルするパターンが適切。

---

5. 既存のサニタイズ対策

• DOMPurifyは不使用 (package.jsonに記載なし、isomorphic-dompurifyも未使用)
• sanitize-html ライブラリも未使用

既存の保護状況:

箇所	保護手段	評価
JSON-LD全般	safeJsonLdStringify()	適切
Markdownプレビューツール	DOMParser + ホワイトリスト型 sanitizeHtml()	適切
QRコードSVG	qrcode-generator 内の escapeXml()	適切
ブログコンテンツ	なし	要対応
メモコンテンツ	なし	要対応
mermaid拡張	テキストの手動エスケープ（4文字）	適切

---

まとめ・対応推奨事項

要対応（優先度高）:

1. markdownToHtml() にサニタイズを追加する — ブログ・メモの contentHtml 生成時にサニタイズが必要。isomorphic-dompurify（SSR対応）の導入を推奨。現コンテンツはAIが生成しているため外部攻撃は現実的でないが、防衛的実装として推奨する。
2. ColorDetail の SSR/CSR ハイドレーション不整合 — useEffect でマウント後にシャッフルするよう修正推奨。

対応不要（現状維持）:

• JSON-LD箇所: safeJsonLdStringify() で適切に保護済み
• Markdownプレビューツール: ホワイトリスト型サニタイザーを実装済み
• QRコードツール: ライブラリ内でエスケープ済み

参考情報:

• marked v17 は HTML パススルーがデフォルト動作（sanitize オプションは削除済み）
• サニタイズ追加には isomorphic-dompurify（SSR/CSR両対応）が推奨される
• 既存の sanitizeHtml() 関数はブラウザ限定（DOMParser依存）のためSSRでは使えない