概要
Markdownエディタを作るとき、marked.jsは簡単に使えるので「markedでMarkdownエディタつくってみた」ができるのですが、設定をしないとスクリプトを埋め込まれてしまうので設定しましょう。
=== 2021/03/11 追記 ===
これ書いたときはXSSの理解が浅く、今見るとかなり説明が危ない気がしたのと、「marked.js XSS」で検索すると一番上に来てけっこう参照されているようなので追記しました。
参考資料
必ず『安全なウェブサイトの作り方』を参照して対策を行ってください。
安全なウェブサイトの作り方 改訂第７版
https://www.ipa.go.jp/files/000017316.pdf
問題
たとえば以下のmarkdownをmarkedに通してQiitaのエディタみたくリアルタイムにHTMLを生成すると、アラートが表示されてしまいます。
# タイトル
<script>alert('aaa');</script>
これを悪用すればいろいろされてしまうので、markedの設定をちゃんとしましょう。
===2021/03/11 追記===
「自分が書いたものを自分で編集する」分には問題にはならないので上の説明は正確ではないです。
XSSは「誰かが入力したものをほかの人が参照する」という場合に問題になります。
例えば、あるユーザーが書いた記事をその人以外が編集できるような機能を作ったとします。そのとき、記事に「個人情報の入力を促す画面を(JSでゴリゴリ作って)表示して、入力内容をajaxで送るコード」が書かれていて、対策がされていなかったらそれが実行されてしまいます。
まぁそんな怪しげな画面に入力する人はいないかもしれませんが、そういうことができてしまうというのが危ないわけです。
で、「対策としてmarked.js側の設定でやりましょう」というのがこの記事の本旨なんですが、marked.jsでやる以前に参考資料で挙げた『安全なウェブサイトの作り方』の根本的な対策をしましょう。
Markdownエディタの機能としてはHTMLの入力は許可しなくていいはず(と私は思う)なので、
- 『1.5.1 HTMLテキストの入力を許可しない場合の対策』
- 『1.5.3 全てのウェブアプリケーションに共通の対策』
の根本的解決を参照してください。
これをやったうえで次項のmarkedの設定もしないと片手落ちになります。
markedの設定
公式のREADMEを見るといろいろ設定値がありますが、とりあえずsanitizeだけはやりましょう。これでscriptタグの内容がプレーンテキストになります。
marked.setOptions({
sanitize: true,
});
まとめ
「markedでMarkdownエディタつくってみた」という記事をちらほら見かけますが、設定をなにもしていないのが結構ありますので、上述のようにsanitizeの設定だけはしましょう。