リッチテキストエディタを利用する場合で、サーバー側にアップロードする場合のXSS対策について

Question

現在、リッチテキストエディタを利用したウェブサイトを構築しようと検討しています。
私が利用を予定しているのはquill.jsという商業利用も制限がないものになります。

<form>
 <div id="editor"  style="height: 200px;"></div>
 <input type="hidden" name="main" id="editor-input">
 <button type="submit" name="subbtn">投稿する</button>
<form>

<script>
var editor = document.getElementById('editor');
var editorInput = document.getElementById('editor-input');
 
var quill = new Quill(editor, {
  theme: 'snow'
});
 
quill.on('text-change', function(delta, oldDelta, source) {
  var editorHtml = editor.querySelector('.ql-editor').innerHTML;
  editorInput.value = editorHtml;
});
<script/>

上記のようにhiddenを用意してあげて、最終的にJSを使ってテキストに変更がある度に値を格納しているんのですが、その後submitでサーバーサイドにあげる際に問題となります。もちろん<タグ>を残したままデータベースに格納することはその後出力する際にXSSのリスクに晒されるため、無害化しなければならないと考えているのですが、特に上記quillのドキュメンテーションやガイドを読む限り、サーバーにあげる場合の無害化する方法については、何らの記載がありません。
quill.js以外でも一般的にリッチテキストエディタを利用してサーバーにアップする場合には、想定されるタグを全てリストとして準備してこれを無害化・変換してアップロードする方法を自分自身で準備するのが一般的なのでしょうか？

「リッチテキストエディタ　サーバーアップロード」、「quill php」など、いろいろ検索しても、これといったものが見つからなかったため、実務的にみなさまがどのように対応されているかを知りたくご質問させていただきました。

Answer 1

想定されるタグを全てリストとして準備してこれを無害化・変換してアップロードする方法を自分自身で準備するのが一般的なのでしょうか？

そうですね、許可するタグ・属性はホワイトリストで規定する必要があります（ブラックリストでやると、古いブラウザで使えるものや最新のものを取り逃すことが考えられます）。

そのようなフィルタリングライブラリも、探せばあるかと思います。

Comments

[pegy]

有難うございます。kawax様のように出力時のみホワイトリストを使用するというお考えでしょうか？
一方レンタルサーバーによってはそもそもタグ付き文字列がdb格納を認めない場合もあるようですので、その場合格納時から対策が必要にもなろうかとは思います。
宜しくお願い申し上げます。

[maisumakun]

そもそも論にはなりますが、Quillは本来のデータ構造があるもの（で、そのままフォーム送信するためのものではない）なので、innerHTMLでHTMLを取り出して、という使い方そのものが本筋から外れていることは指摘しておきます。

> 一方レンタルサーバーによってはそもそもタグ付き文字列がdb格納を認めない場合もあるようですので

そんなでたらめな「セキュリティ対策のような、まともに使えない処理」を施しているレンタルサーバを使う方が悪いです。

[pegy]

重ねて有難うございます。
レンタルサーバーの仕様については、やはり考えづらいのでもう一度調べてみます。

本当に申し訳ございません。前段のそもそも論の文脈がどうしても理解出来なかったのですが、構造を持っているため、innerHTMLを使わずにそのまま取得すれば良いじゃないか、という意味でしょうか？

また、最後に格納時、出力時の無害化のタイミングについて、実務的なアドバイスを理由を含めてご教示願えますでしょうか？サーバーの仕様は、上記の通り曖昧なコメントをしてしまい、誠に申し訳ございません。一旦その観点はご放念ください。
宜しくお願い申し上げます。

[maisumakun]

> 構造を持っているため、innerHTMLを使わずにそのまま取得すれば良いじゃないか、という意味でしょうか？

そうですね。HTMLとして取り出してしまえば再編集も困難になりますので、「Quillのデータ構造」で保存して引き回せるのならそのほうが望ましいです。

[pegy]

理解出来ました、有難うございます。
無害化の格納時、出力時のタイミングは申し訳ございません、自分で今一度調べて考えてみます。

Answer 2

DBに保存してるだけなら危険はない。
絶対に許可すべきではないタグはこの段階で消してもいいけど、基本的には入力時には余計なことは何もしなくていい。
大事なのは出力時のエスケープ。

Comments

[pegy]

有難うございます。格納時、出力時またはいずれに於いても変換すべき説もあるのですが、実際には確かに出力時に意図しない動作をしなければ問題はない認識です。一般的にscriptタグ以外絶対許可すべきでないものとして、一般的に認識されているものはあるのでしょうか？

Answer 3

具体的に入力して試しましたか？

<script>alert("hoge");</script>

のように入力しても editorInput.value は

"<p>&lt;script&gt;alert('hoge');&lt;/script&gt;</p>"

のようになるようですが…。

Comments

[pegy]

コメントありがとうございます。結果は確かに仰る通りでした。
まだまだ不案内で申し訳ないのですが、quill.onメソッドの中で実際に無害化されており、結果scriptタグは変換され、pタグは残っているという事でしょうか？
ただ、それが正しいとしてもサーバーサイドでも無害化処理は入れなければならないという認識なのですが、如何でしょうか？

[maisumakun]

> ただ、それが正しいとしてもサーバーサイドでも無害化処理は入れなければならないという認識なのですが、如何でしょうか？

そのとおりです。攻撃者はフォームを使わずに任意のHTMLを送信可能です。

[mather]

p タグは残っている、というよりリッチエディタが p タグを付与しています。(表示されるテキストエリアにはpタグは直接は入力していません）
なんにせよ、任意のデータはPOSTリクエストで送信可能です。リッチエディタが付与するタグ以外の送信を禁じるのであれば、送られてきたデータ(HTML)をサーバーサイドで精査して拒否するしか無いと思います。

[pegy]

承知を致しました、時間を頂きアドバイスをくださり誠に有難うございました。
宜しくお願い申し上げます。