危険なMarkdownをサニタイズする

[morioprog]

概要

markedは標準だと危険なMarkdownも許してしまうので直したい

該当ファイル

• pages/post/new.tsx
• components/CommentCard.tsx
• components/PostCard.tsx

タスク

• DOMPurifyを導入する
  • yarn add dompurify @types/dompurify
• utils/md2html.tsのようなものを作る
  • 内部でmarkedの結果をDOMPurifyに渡す
  • 以後、Markdownを変換する際はこれをimportする

参考

• https://github.com/markedjs/marked#warning--marked-does-not-sanitize-the-output-html-please-use-a-sanitize-library-like-dompurify-recommended-sanitize-html-or-insane-on-the-output-html-
• https://koredana.info/blog/react-md-editor/