js innerHTML_javascript スキルに関するいくつかの問題の解決策

ただし、innerHTML には独自の問題がいくつかあることを知っておく必要があります。

1. HTML 文字列に defer としてマークされたスクリプト タグ (
) が含まれている場合、innerHTML 属性が適切に処理されない場合、 Internet Explorer に表示され、スクリプト インジェクション攻撃を引き起こします。
2. innerHTML を設定すると、イベント ハンドラーが登録されている既存の HTML 要素が破壊されるため、一部のブラウザーではメモリ リークの潜在的なリスクが発生する可能性があります。

他にも、言及する価値のある小さな欠点がいくつかあります。

1. 作成したばかりの要素への参照を取得できないため、それらの参照を取得するにはコードを手動で追加する必要があります (DOM を使用)。 API)。
2. すべてのブラウザーのすべての HTML 要素に innerHTML 属性を設定することはできません (たとえば、Internet Explorer では、テーブルの行要素に innerHTML 属性を設定できません)。
私は、innerHTML 属性の使用に関連するセキュリティとメモリの問題のほうが心配です。明らかに、これは新しい問題ではなく、これらの問題のいくつかについて解決策を見つけ出した才能ある人々がすでにいます。

Douglas Crockford は、HTML 要素登録イベント ハンドラーによって発生する一部の循環参照を解除し、ガベージ コレクター (ガベージ コレクター) がこれらの HTML 要素に関連付けられたメモリを解放できるようにするクリーンアップ関数を作成しました。
<script>…</script> HTML 文字列から script タグを削除するのは、見た目ほど簡単ではありません。正規表現は目的の効果を達成できますが、それがすべての可能性をカバーしているかどうかを知るのは困難です。これが私の解決策です:
/<script>]*>[Ss]*?</script>[^>]*>/ig
ここで、これら 2 つの手法を 1 つの setInnerHTML 関数に結合し、setInnerHTML 関数をバインドしましょう。 YUI の YAHOO.util.Dom:
YAHOO.util.Dom.setInnerHTML = function (el, html) {
el = YAHOO.util.Dom.get(el ); | typeof html !== 'string') {
return null;
}
// 循環参照を中止します
(function (o) {

var a = o.attributes , i, l, n, c;
if (a) {
l = a.length;
for (i = 0; i n = a [i].name; if (typeof o[n] === '関数') {
o[n] = null; > 0; i c = o.childNodes[i];

// 子ノードをクリアします
argument.callee(c); YUI を通じて要素上のすべてのリスナーを登録します。 addListener > // HTML 文字列からスクリプトを削除し、innerHTML 属性を設定します
el.innerHTML = html.replace(/
]*>[Ss]*?
]*>/ig, "" ; 式に不足がある場合はお知らせください。

明らかに、Web ページに悪意のあるコードを挿入する方法は他にもたくさんあります。 setInnerHTML 関数は、すべての A グレードのブラウザーでの
タグの実行動作のみを正規化します。信頼できない HTML コードを挿入する場合は、必ず最初にサーバー側でフィルタリングしてください。これを実行できるライブラリは数多くあります。