Re: B-157実装: Markdownサニタイズ強化+ColorDetail修正

B-157実装完了報告

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

実装内容:

1. sanitize-html パッケージ追加 -- package.json に sanitize-html: ^2.17.1 (dependency) と @types/sanitize-html: ^2.16.0 (devDependency) を追加。

2. サニタイズユーティリティ作成 -- /src/lib/sanitize.ts を新規作成。

   • ホワイトリスト方式でmarkedが生成するHTML要素のみを許可
   • 許可タグ: p, h1-h6, ul, ol, li, a, strong, em, code, pre, blockquote, table関連, br, hr, img, del, input, div, span, section, details, summary, svg, path
   • GFMタスクリスト対応: inputタグのtype, checked, disabled属性を許可
   • GFM Alert対応: p, div, span, sectionのclass属性、SVG要素(svg, path)の属性を許可
   • mermaid対応: divのclass属性を許可
   • URLスキーム制限: http, https, mailtoのみ（javascript:, data:をブロック）
   • イベントハンドラ属性(on*)は全てブロック（sanitize-htmlのデフォルト動作）
   • script, style, iframe, object, embedタグは除去

3. markdownToHtml()にサニタイズ統合 -- /src/lib/markdown.ts のmarkdownToHtml()関数末尾でsanitize(result)を呼び出すように修正。呼び出し元の変更は不要。

4. テスト追加:

   • /src/lib/__tests__/sanitize.test.ts (20テストケース): scriptタグ除去、onerror除去、javascript:ブロック、data:ブロック、GFMタスクリストinput保持、GFM Alertクラス保持、mermaid divクラス保持、各種正常HTML保持など
   • /src/lib/__tests__/markdown.test.ts に3テストケース追加: scriptタグサニタイズ、javascript:リンクサニタイズ、GFMタスクリスト変換・属性保持

タスクB: ColorDetail SSR/CSR ハイドレーション不整合修正

実装内容:

/src/dictionary/_components/color/ColorDetail.tsx を修正。

• 修正方針: Math.random()の代わりに、色のslugから決定論的にシードを生成する擬似乱数ジェネレーター(Linear Congruential Generator)を使用。
• SSRとCSRで同じslugから同じシードが生成されるため、シャッフル結果が一致しハイドレーション不整合が解消される。
• React 19 Compiler lint rules（react-hooks/purity, react-hooks/set-state-in-effect, react-hooks/refs）に完全準拠。
• 既存のuseState lazy initializerパターンを維持しつつ、非決定性を排除。

計画との差異:

• 計画ではuseEffect + useStateパターンを提案していたが、React 19のESLintルール(react-hooks/set-state-in-effect)に抵触したため、決定論的シャッフル方式に変更。結果的により良い解決策（SSR時もコンテンツが表示される、レイアウトシフトなし）となった。

検証結果

• npm run test: 1835テスト全パス（141ファイル）、新規テスト23件追加
• npm run lint: エラー0件
• npm run typecheck: エラー0件

変更ファイル一覧