innerHTML アプリケーション

ブランクのブログ: http://www.planabc.net/
innerHTML プロパティは、HTML 要素の内容を完全に置き換える簡単な方法を提供するため、非常によく使用されます。別の方法としては、DOM レベル 2 API (removeChild、createElement、appendChild) を使用する方法があります。しかし、innerHTML を使用して DOM ツリーを変更するのは非常に簡単で効果的な方法であることは明らかです。ただし、innerHTML には独自の問題があることに注意する必要があります。

HTML 文字列に defer としてマークされたスクリプトタグ (<script defer>…</script>) が含まれている場合、innerHTML 属性が適切に処理されないと、Internet Explorer でスクリプトインジェクション攻撃が発生する可能性があります。 innerHTML を設定すると、イベントハンドラーが登録されている既存の HTML 要素が破壊され、一部のブラウザーでメモリリークが発生する可能性があります。
他にも言及する価値のある小さな欠点がいくつかあります。

作成した要素への参照を取得することはできません。それらの参照を取得するには、コードを手動で追加する必要があります (DOM API を使用)。すべてのブラウザのすべての HTML 要素に innerHTML プロパティを設定することはできません (たとえば、Internet Explorer では、テーブル行要素に innerHTML プロパティを設定することはできません)。
私は、innerHTML プロパティの使用に関連するセキュリティとメモリの問題をより懸念しています。明らかに、これらは新しい問題ではなく、すでにこれらの問題のいくつかを回避する方法を考え出した賢明な人々がいます。
Douglas Crockford 氏は、HTML 要素に登録されたイベントハンドラーによって発生する循環参照を解消し、ガベージコレクターがこれらの HTML 要素に関連付けられたメモリを解放できるようにするクリーンアップ関数を作成しました。
HTML 文字列からスクリプトタグを削除するのは、見た目ほど簡単ではありません。正規表現は期待どおりの動作をする可能性がありますが、すべての可能性がカバーされているかどうかを知ることは困難です。これが私の解決策です:
/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig
ここで、これら 2 つの手法を 1 つの setInnerHTML 関数に組み合わせ、setInnerHTML 関数を YUI の YAHOO.util.Dom にバインドしてみましょう。
YAHOO.util.Dom.setInnerHTML = 関数 (el, html) {
el = YAHOO.util.Dom.get(el);
if (!el || typeof html !== 'string') {
null を返します。
}
// 循環参照を解除する
(関数 (o) {
var a = o.attributes、i、l、n、c;
もし（a）{
l = a.長さ;
(i = 0; i < l; i = 1) の場合 {
n = a[i].名前;
if (typeof o[n] === 'function') {
o[n] = null;
}
}
}
o.childNodes を継承します。
もし（a）{
l = a.長さ;
(i = 0; i < l; i = 1) の場合 {
c = o.childNodes[i];
// 子ノードをクリアする
引数.callee(c);
// YUI の addListener を通じて要素に登録されたすべてのリスナーを削除します
YAHOO.util.Event.purgeElement(c);
}
}
})(エル);
// HTML文字列からスクリプトを削除し、innerHTMLプロパティを設定します
el.innerHTML = html.replace(/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig, "");
// 最初の子ノードへの参照を返す
el.firstChild を返します。
};
この関数に必要な他のものがある場合、または正規表現に何か不足しているものがある場合は、お知らせください。
明らかに、Web ページに悪意のあるコードを挿入する方法は他にもたくさんあります。 setInnerHTML 関数は、すべての A グレードブラウザーでのみ <script> タグの実行動作を正規化します。信頼できない HTML コードを挿入する予定がある場合は、まずサーバー上でフィルタリングするようにしてください。これを実行できるライブラリは多数あります。
元記事: Julien Lecomte による innerHTML の問題

<<: MySQL が暗黙のデフォルト値を処理する方法

>>: Dockerコンテナ内で2つのプロセスを開始するときのDockerfile実装コード