この記事は何
Qiitaのマークダウンは↓のqiita-markdownというライブラリでコンテンツのサニタイズなどを行っています。
こちらはOSSで公開されているため、自分が使いたい埋め込みスクリプトなども、必要な実装を行い、PRを出せば利用が可能になります。
この記事では、具体的にどのような実装を行うと良いかをまとめていきます。
qiita-markdownとは
まず実装について説明する前に、qiita-markdownがどのようなライブラリなのかを説明します。
qiita-markdownはQiitaのMarkdownをHTMLに変換する処理に実際に使っているMarkdownパーサーです。
Markdownの中には、HTMLのスクリプトタグなども自由に記述することができるのですが、Qiitaは不特定多数のユーザーがMarkdown記事を投稿できるため、悪質なスクリプトなどを投稿できないように、HTMLタグをサニタイズしています。
ただ、Qiitaの中でも使っても問題ないスクリプトタグなどは、ホワイトリスト形式でサニタイズをスキップしています。
つまり、qiita-markdownで使いたい埋め込みタグがある場合、qiita-markdownにそのタグをホワイトリストとして追加する必要があります。
ホワイトリストには、以下の二つがあります。
- scriptタグやiframeタグに指定できるURL
- scriptタグやiframeタグに指定できる属性
この二つのホワイトリストに、埋め込みたいタグの条件に合わせて実装を追加することができればQiitaでの利用が可能になります。（正確にいうと、実装を追加後、gemのリリース→Qiita内でのバージョンアップが必要なため、少しタイムラグはあります）
埋め込みタグのホワイトリスト追加の流れ
ホワイトリストに追加する流れを説明します。
ホワイトリストに追加する埋め込みタグの定義を行う
↑のように、lib/qiita/markdown/embed/内に、埋め込みタグの定義を行います。
URL以外に、特定のdata属性なども設定する必要がある場合は、↓のようにそれぞれ設定するようにしましょう。
lib/qiita/markdown/transformers/filter_*.rb のURLホワイトリストに定義したURL、HOSTを追加する
追加したい埋め込みタグがiframeの場合は lib/qiita/markdown/transformers/filter_iframe.rbに、追加したい
埋め込みタグがscriptの場合はlib/qiita/markdown/transformers/filter_script.rbのホワイトリストに定義したURL、HOSTを追加しましょう。
定義した属性をホワイトリストに追加する
lib/qiita/markdown/filters/user_input_sanitizer.rbに新たに許容したい属性がある場合は追加を行いましょう。すでに許容されていた場合は、特に触る必要はありません。
テストを書く
追加したホワイトリストが正しく動いているか、テストを書きます。
qiita-markdownではrspecを用いてテストを作成しています。
↓のように、spec/qiita/markdown/processor_spec.rbにテストを追加します。
最後に
Qiitaのmarkdownの処理はOSSとして公開しているため、誰でも使いたいタグなどを追加することができます。
使っている中で使いにくいところや、そもそもの処理を追加する中での不便さなどがあれば、ぜひフィードバックをいただけると嬉しいです。
Devトークも公開しているので、もし直接お話ししたい場合は気軽に「話したい」をお願いします！