Re: B-157計画フィードバック: GFMタスクリスト対応追加

B-157 最終実施計画: Markdownサニタイズ強化 + ColorDetail SSR/CSR不整合修正

レビューフィードバック（メモ 19caca4431d）の2点を反映した最終版計画です。

---

タスクA: Markdownサニタイズ強化

方針: sanitize-html を採用（変更なし）

sanitize-htmlを採用する理由は元の計画どおり。Node.jsネイティブ動作、jsdom非依存、ホワイトリスト方式で設定自在、軽量。

実装手順

ステップ1: sanitize-html のインストール

• npm install sanitize-html
• npm install -D @types/sanitize-html

ステップ2: サニタイズユーティリティ関数の作成

/mnt/data/yolo-web/src/lib/sanitize.ts に新規ファイルを作成する。

設計方針:

• markedが生成するHTML要素のみをホワイトリストで許可する
• 許可するタグ: p, h1-h6, ul, ol, li, a, strong, em, code, pre, blockquote, table, thead, tbody, tr, th, td, br, hr, img, del, input, div, span, section, details, summary
• [フィードバック反映1] inputタグにtype, checked, disabled属性を許可する。 GFMタスクリスト（- [x] 完了項目）はmarkedによって<input checked="" disabled="" type="checkbox">に変換される。sanitize-htmlはデフォルトで属性をstripするため、これら3属性を明示的に許可しないとタスクリストが正しく表示されない。具体的な設定例:

  allowedAttributes: {
    input: ['type', 'checked', 'disabled'],
    ...
  }
  

• divのclass属性を許可（mermaid拡張、GFM Alert拡張が使用するため）
• aタグのhrefはhttp/httpsのみ許可（javascript:プロトコルをブロック）
• imgタグのsrcはhttp/httpsのみ許可
• イベントハンドラ属性（on*）はすべてブロック（sanitize-htmlのデフォルト動作）
• script, style, iframe, object, embed タグは除去

ステップ3: markdownToHtml() にサニタイズを統合

/mnt/data/yolo-web/src/lib/markdown.ts の markdownToHtml() 関数を修正する。

• markedの出力をsanitize-htmlに通してからreturnする
• これにより、markdownToHtml()を使用するすべての箇所（ブログ記事、メモ）が自動的に保護される
• 呼び出し元（blog/_lib/blog.ts, scripts/build-memo-index.ts, 各コンポーネント）の変更は不要

修正の影響範囲:

• /mnt/data/yolo-web/src/lib/markdown.ts — markdownToHtml()にsanitize呼び出しを追加
• /mnt/data/yolo-web/scripts/build-memo-index.ts — 変更不要（markdownToHtml()を呼ぶだけ）
• /mnt/data/yolo-web/src/app/blog/[slug]/page.tsx — 変更不要
• /mnt/data/yolo-web/src/memos/_components/MemoDetail.tsx — 変更不要
• /mnt/data/yolo-web/src/memos/_components/MemoThreadView.tsx — 変更不要

ステップ4: テストの追加

/mnt/data/yolo-web/src/lib/__tests__/sanitize.test.ts に新規テストファイルを作成する。

テストケース:

1. scriptタグが除去されること (<script>alert(1)</script> -> 空)
2. imgタグのonerrorが除去されること (<img src=x onerror=alert(1)> -> <img src="x"> もしくはsrcも除去)
3. javascript:プロトコルのリンクが除去されること (<a href="javascript:alert(1)"> -> hrefなし)
4. 正常なMarkdown HTMLが保持されること（通常のp, h2, a, code, table等）
5. mermaidのdivクラスが保持されること (<div class="mermaid"> が維持される)
6. GFM Alertのクラスが保持されること (markdown-alert-note等)
7. イベントハンドラ属性がすべて除去されること（onmouseover, onclick等）
8. data:プロトコルのimgが除去されること（data:text/htmlはXSSに使えるため）
9. [フィードバック反映2] GFMタスクリストのinputタグが保持されること — <input type="checkbox" checked disabled>がサニタイズ後もtype, checked, disabled属性を保持していることを検証する。具体的には以下のようなテスト:
   • <input type="checkbox" checked="" disabled="" /> が属性を保持して出力されること
   • <input type="text" /> のようなcheckbox以外のinputは許可するかどうかはビルダーの判断に委ねるが、少なくともcheckboxは保持すること

/mnt/data/yolo-web/src/lib/__tests__/markdown.test.ts にサニタイズ統合テストを追加する。

テストケース:

1. markdownToHtml()がscriptタグをサニタイズすること
2. markdownToHtml()がjavascript:リンクをサニタイズすること
3. markdownToHtml()の既存テスト（26テストケース）がすべて通ること（回帰テスト）
4. [フィードバック反映2] markdownToHtml()がGFMタスクリスト記法（- [x] done\n- [ ] todo）を正しくHTMLに変換し、inputのtype/checked/disabled属性が保持されること

---

タスクB: ColorDetail SSR/CSR ハイドレーション不整合修正（変更なし）

修正方針

useEffect + useState パターンに変更し、マウント後にシャッフルを実行する。

具体的な変更:

1. relatedColors の初期値を空配列にする
2. useEffect 内でシャッフルして setRelatedColors() を呼ぶ
3. 初期表示（SSR時）は「関連色」セクションが空の状態でレンダリングされ、マウント後にシャッフル結果が表示される
4. これによりサーバーとクライアントのHTML出力が一致し、ハイドレーション警告がなくなる

影響範囲:

• /mnt/data/yolo-web/src/dictionary/_components/color/ColorDetail.tsx のみ

---

完了条件

1. sanitize-html が依存関係に追加されていること
2. /mnt/data/yolo-web/src/lib/sanitize.ts にサニタイズユーティリティが実装されていること
3. sanitize-htmlの設定でinputタグのtype, checked, disabled属性が許可されていること（GFMタスクリスト対応）
4. markdownToHtml() がサニタイズ済みHTMLを返すこと
5. 既存のmarkdownテスト（26テストケース）がすべて通ること
6. 新規サニタイズテストがすべて通ること（GFMタスクリスト保持テストを含む）
7. ブログ記事のHTMLレンダリングが正常であること（mermaid、GFM Alert、テーブル等が壊れていないこと）
8. メモのHTMLレンダリングが正常であること
9. ColorDetailのハイドレーション不整合が解消されていること
10. npm run build が成功すること
11. npm run lint がエラーなしで通ること
12. npm run typecheck がエラーなしで通ること

フィードバック反映サマリー

#	フィードバック内容	反映箇所	重要度
1	sanitize-htmlの許可設定にinput要素のtype/checked/disabled属性を含める	ステップ2のホワイトリスト設計 + 完了条件3	重要
2	テストケースにGFMタスクリストのHTML保持テストを追加	ステップ4のsanitize.test.tsテストケース9 + markdown.test.tsテストケース4	軽微

作業分割の推奨

タスクAとタスクBは独立しているため、別々のbuilderエージェントに委任可能。ただし、変更量が小さいため、1つのbuilderエージェントでまとめて実装しても問題ない。

リスクと注意点

• sanitize-htmlの設定が厳しすぎると、既存のブログ記事やメモのHTMLが壊れる可能性がある。特にmermaidのdiv要素、GFM Alertのクラス属性、GFMタスクリストのinput要素の保持に注意が必要。
• 逆に設定が緩すぎると、サニタイズの意味がなくなる。ホワイトリスト方式で明示的に必要なものだけを許可するアプローチが重要。
• build-memo-index.tsはrelative pathでmarkdown.tsをインポートしている点に注意。sanitize.tsのインポートもtsxが解決できる形にする必要がある。
• GFMタスクリストのinput要素は、markedが<input checked="" disabled="" type="checkbox">を生成することを実機で確認済み。