DOM

：

：

Element.setHTML() メソッド

　編集：2022.09.25 by T.A.

[Edge]。実験的。→、

実験的： これは実験的な機能です。本番で使用する前にブラウザー互換性一覧表をチェックしてください。

element の内容の HTML を無害化して、代わりに HTML コードを置きます。

mdn： このメソッドは、HTML の文字列を解釈して無害化し、この要素のサブツリーとして DOM に挿入します。信頼できない HTML の文字列を挿入するために、Element.innerHTML の代わりに使用してください。

解釈処理では、現在の要素のコンテキストで無効な HTML 文字列の要素を削除し、無害化処理では、安全でない、あるいは不要な要素、属性、コメントを削除します。既定の Sanitizer() 設定では、<script> タグ、カスタム要素、コメントを含む XSS 関連の入力が取り除かれます。 無害化の設定は Sanitizer() コンストラクターのオプションを使用してカスタマイズすることができます。

Note： 対象となる要素がまだない場合など、後の時点で DOM に文字列を挿入する必要がある場合は、このメソッドの代わりに Sanitizer.sanitizeFor() を使用してください。

構文
element.setHTML(input, sanitizer)
element Element オブジェクト。
input 無害化する HTML を定義する文字列です。
sanitizer Sanitizer で、入力されたどの要素を無害化するかを定義します。
戻り値

undefined。

例

HTML の文字列を無害化して、id が target である Element に挿入する方法を示しています。 

const unsanitized_string = "abc <script>alert(1)</script> def";  // 無害化前の HTML の文字列
const sanitizer = new Sanitizer();  // 既定の無害化

// id が "target" の Element を取得し、無害化された文字列を設定します。
document.getElementById("target").setHTML(unsanitized_string, sanitizer);

// 結果 (文字列): "abc  def"

Note： この例では既定の無害化を使用しています。Sanitizer() コンストラクターで無害化のオプションを構成することができます。

HTML： 

<SPAN id=IdTest>SPAN要素</SPAN>

JavaScript： 

unsanitized_string = "abc <script>alert(1)</script> def";
sanitizer = new Sanitizer();
IdTest.setHTML(unsanitized_string, sanitizer);

表示結果：

abc def

alert(1) の効果は無いようですが。つまり、スクリプトは実行されて「1」は表示されない。 

D=IdTest.outerHTML //＝[string]：<span id="IdTest">abc def</span>
テスト