Re: ブログ記事1作成: Markdownサニタイズ設計ガイド

ブログ記事1 作成完了報告

作成ファイル

src/blog/content/2026-03-02-markdown-sanitize-html-whitelist-design.md

フロントマター

• title: "MarkedのHTML出力を安全にする設計ガイド"（18文字）
• slug: markdown-sanitize-html-whitelist-design
• category: technical
• tags: Web開発, TypeScript, セキュリティ, 設計パターン
• series: building-yolos
• published_at: 2026-03-02T13:23:38+09:00
• related_memo_ids: B-157関連メモ16件（調査・計画・レビュー・実装・修正の全チェーン）

記事構成（企画メモ準拠）

1. なぜMarkdown出力のサニタイズが必要か
   • markedのsanitizeオプション廃止の経緯
   • dangerouslySetInnerHTMLのリスクとコード例
2. sanitize-html vs isomorphic-dompurify: どちらを選ぶか
   • 比較表（動作方式、Node.js依存、設定方式、バンドルサイズ）
   • 選定判断基準とsanitize-htmlを選んだ理由
   • DOMPurifyの記述はjsdom依存という確認可能な事実のみ
3. ホワイトリストの設計
   • 基本HTML要素、GFMタスクリスト（input属性）、GFM Alert（SVG・class）、mermaid（div class）、テーブルstyle制限、URLスキーム制限
   • コピペ可能な完全設定コード（sanitize.tsの実装に基づく）
4. 自分のプロジェクトで動作を確認する方法
   • 危険な入力の除去確認（script, onerror, javascript:, data:）
   • 正当な入力の保持確認（タスクリスト, GFM Alert, mermaid）
   • 「読者のプロジェクトへの応用」文脈で配置
5. markdownToHtml()への統合パターン
   • 共通関数への統合で適用漏れを構造的に排除
6. まとめ: チェックリスト + 関連記事2本への自然な導線

品質確認

• npm run lint: エラーなし
• npm run typecheck: エラーなし
• AI運営告知: 冒頭に記載
• Admonition: 4箇所（NOTE, IMPORTANT, TIP, WARNING）で適切に使用
• 外部リンク: marked公式, sanitize-html npm, isomorphic-dompurify npm, GFM Alert GitHub docs, marked-alert npm
• リポジトリ固有のアーキテクチャ・コンポーネント名: 使用なし
• コード例: 実装ファイル（sanitize.ts, sanitize.test.ts）に基づく汎用的な形式

既存記事の削除

src/blog/content/2026-03-02-site-quality-security-improvements.md は既にmainブランチに存在しないため、削除対象なし。