フォーマットを許可するJavaScriptエディタでのサニタイズの処理方法

Question

多くのエディタでは、現在、フォーマットが提供されています。私がDOMで見ることから、HTMLを追加するだけです。しかし、ユーザーが適用した書式設定を失うことなく、このような入力をどのように消毒しますか？

など。

<strong class="markup--strong markup--p-strong">text</strong>

をしかし、あなたは、ユーザーが自分でそれを入力した場合、レンダリングしたいとは思わないでしょう：太字クリックすると、追加されます。それではどう違うの？また、マークダウンでスタイルを設定するだけでなく、ユーザーが自分のマークダウンを入力してもブラウザでアクセスできるようにしていない場合は、それが違うでしょうか？

私が考えることができる1つの方法は、すべてのHTML特殊文字をエスケープすることですが、それは奇妙に思えます。あなたが知っている限り、それを出力するときだけ内容を消毒する

Answer 1

あなたはクライアント側の検証が改ざんされやすいので、Vipinが述べたようにサーバーサイドの消毒剤を使用します。 OWASP（Open Web Application Security Project）には、java-html-sanitizerのように使用できるいくつかのガイドとサニタイザがあります。

コンセプトに関する一般的な要約については、のセクションSanitizeをお読みください。

Answer 2

次の例のように、他の文字とホワイトリストされた要素を置き換えることができます：

​​

を次に、あなたが他のすべてのHTMLを削除します。 onmouseover = "alert（1）"に注意してください。本当にシンプルに保ってください。

ユーザー入力をレンダリングするときも注意してください。コードとして追加するだけではありません。代わりにそれを解析し、JavaScriptを使用して要素を作成します。 innerHTMLは使用しないでください。ただし、.innerTextとdocument.createElement（）は使用しないでください。