空白のブログ：http：//www.planabc.net/
innerHTML属性の使用は、HTML要素のコンテンツを完全に交換する簡単な方法を提供するため、非常に人気があります。別の方法は、DOMレベル2 API（RemoveChild、CreateElement、AppendChild）を使用することです。しかし、innerhtmlを使用してDOMツリーを変更することが非常に簡単で効果的な方法であることは明らかです。ただし、innerhtmlにはそれ自体にいくつかの問題があることを知る必要があります。
他にもいくつかの小さな欠点がありますが、それは言及する価値があります。
私は、innerhtmlプロパティの使用に関連するセキュリティとメモリの問題にもっと関心があります。明らかに、これは新しい問題ではなく、これらの問題のいくつかを回避している人々がすでにいます。
Douglas Crockfordは、HTML要素登録イベント処理機能によって引き起こされるいくつかのループ参照を中止し、これらのHTML要素に関連付けられたメモリを自由なメモリできるようにするクリーンアップ機能を書きます。
HTML文字列からスクリプトタグを削除することは、見た目ほど簡単ではありません。正規表現は望ましい効果を達成できますが、すべての可能性がカバーされているかどうかを知ることは困難です。これが私の解決策です：
/<script [^>]*> [/s/s]*？<// script [^>]*>/ig
次に、2つの手法を別のSetinnerhtml関数に組み合わせて、setinnerhtml関数をyahoo.util.domに結合します。
yahoo.util.dom.setinnerhtml = function（el、html）{
el = yahoo.util.dom.get（el）;
if（！el || typeof html！== 'string'）{
nullを返します。
}
//円形リファレンスを中止します
（function（o）{
var a = o.attributes、i、l、n、c;
if（a）{
l = a.length;
for（i = 0; i <l; i = 1）{
n = a [i] .name;
if（typeof o [n] === 'function'）{
o [n] = null;
}
}
}
a = o.childnodes;
if（a）{
l = a.length;
for（i = 0; i <l; i = 1）{
c = o.childnodes [i];
//クリアチャイルドノード
arguments.callee（c）;
// YuiのAddListenerを介して要素に登録されたすべてのリスナーを削除します
yahoo.util.event.purgeelement（c）;
}
}
}）（el）;
// html文字列からスクリプトを削除し、innerhtmlプロパティを設定します
el.innerhtml = html.replace（/<script [^>]*> [/s]*？<// script [^>]*>/ig、）;
//最初の子ノードへの参照を返します
return el.firstchild;
};
この関数には、正規表現に他の何かまたは不足しているものがある場合は、私に知らせてください。
明らかに、Webページに悪意のあるコードを注入する他の多くの方法があります。 Setinnerhtml関数は、すべてのAグレードブラウザーでの<script>タグの実行動作のみを正規化できます。信頼できないHTMLコードを挿入する準備ができている場合は、最初にサーバー側でフィルタリングしてください。これを行うことができるライブラリがすでにたくさんあります。
オリジナルテキスト：Julien Lecomteの「Innerhtmlの問題」