HTMLコードのサニタイズ

Question

データベースからデータを読み込んで表示するWebページがありますが、その中にHTMLを含む可能性があるデータの問題が見つかりました。私のデータベースで

I持って、次の3つのエントリ：

ボブ

ジル

<button onClick="alert('hi')">Click me!</button> 

今、私は、データを取得し、それを表示し、上のクリックイベントがあり、私のHTMLページを持っています各エントリは次のようになります。

<div onClick="DoSomething()"> 
    <a>Bob</a> 
</div> 

マイコードが削除されています花茎の文字ので<は、私が最後のエントリを取得し、私が終わるまでは正常に動作します<

次のようになります。

<div onClick="DoSomething()"> 
    <a>&lt;button onClick="alert('hi')"&gt;Click me too!&lt;/button&gt;</a> 
</div> 

予想通り、私は見るでしょうので、それが表示されます。

<button onClick="alert('hi')">Click me too!</button> 

をが、それはまた、 "ハイ"を表示しようとしているクリックイベントがあるはずです。

名前で定義されているonClickを安全に止めることができますが、周囲のdivにonClickイベントが残っていることを知っている人はいますか？

データベースに追加できる名前を制限することはできません。

Answer 1

何が起きているのかがわかります。

<div onclick="DoSomething()" DispName="&lt;button onClick="alert('hi')"&gt;Click me too!&lt;/button&gt;"> 
    <div>&lt;button onClick="alert('hi')"&gt;Click me too!&lt;/button&gt;</div> 
<div> 

私のonclickイベントが呼び出されたときに、私が使用します。私は、私は例えば、その上にカスタム属性がDISPNAMEと呼ば作成し、その中にアイテムの名前を入れていた項目名を保持するHTML要素を作成する場合.getAttribute（ "DispName"）クリックして値を取得すると仮定したエンティティで<ボタンonClick = "alert（ 'hi'）" >私もクリックしてください！ < /ボタン>私が戻ってきたのは、化身化されていないテキスト<button onClick="alert('hi')">Click me too!</button>でした。

DOMにHTML要素を追加するとすぐに、DispNameの値がDOMによってunsanitizedされていると思います。アトリビュートにないサニタイズされたスクリプトは、期待通りに残されています。

誰でもこれを確認できるのかどうかはわかりませんが、DispNameの値を試してみると不正なスクリプトが実行される理由がわかりました。