MarkdownをHTMLに変換した時にリンクカードが表示されない問題の解決策

このサイトの記事はMarkdownで書かれており、remarkを使用してHTMLに変換している。

機能を追加する際に詰まった部分があるので記録しておく。

問題点

リンクをリンクカードにして表示する機能を追加したかったのだが、下記ライブラリを使用してもリンクカードが表示されず、生成されたDOMを見るとリンク自体が消えていた。

リンクカードは↓に見えているように、リンクをタイトルや画像などで表現したものである。

GitHub - okaryo/remark-link-card-plus: Remark plugin to convert text links to link cards

Remark plugin to convert text links to link cards. Contribute to okaryo/remark-link-card-plus development by creating an account on GitHub.

github.com

このサイトはremarkを使用してMarkdownをHTMLに変換しているが、プラグインのremark-htmlをそのまま使用していることが問題であったようだ。

const html = remark()
  .use(remarkLinkCard)
  .use(remarkHtml)
  .process(markdown);

remark-htmlは3つのプラグインのショートカットであり、それぞれのプラグインは生のHTMLを除去するようになっているため、remark-link-card-plusによって生成されたDOMが除去されていた。

This plugin is useful when you want to turn markdown into HTML. It’s a shortcut for .use(remarkRehype).use(rehypeSanitize).use(rehypeStringify).

GitHub - remarkjs/remark-html: plugin to add support for serializing HTML

plugin to add support for serializing HTML. Contribute to remarkjs/remark-html development by creating an account on GitHub.

github.com

解決策

デフォルトでは生HTMLは除外されるようになっているため、ショートカットされている各プラグインを個別に設定すれば表示されるようになる。

const html = remark()
  .use(remarkLinkCard)
  .use(remarkRehype, { allowDangerousHtml: true}) // 生HTMLを許可
  // .use(rehypeSanitize, schema) // schemaを設定すれば指定するDOMのみ許可出来るが今回は使用せず
  .use(rehypeStringify, { allowDangerousHtml: true }) // 生HTMLを許可
  .process(markdown);

今回は他ユーザーが作成するMarkdownを扱うことがないためrehype-sanitizeを使用しないでいるが、外部向けの機能を作成する場合は何か対策を取る必要がある。

これが対策されていなければ危険なスクリプトが埋め込まれ、セキュリティ上のリスクが発生する。