innerHTML アプリケーション_HTML/Xhtml_Web ページの制作

blank のブログ: http://www.planabc.net/
innerHTML 属性の使用は、HTML 要素のコンテンツを完全に置き換える簡単な方法を提供するため、非常に一般的です。もう 1 つの方法は、DOM レベル 2 API (removeChild、createElement、appendChild) を使用することです。しかし、明らかに、innerHTML を使用して DOM ツリーを変更するのは、非常に簡単で効果的な方法です。ただし、innerHTML にはそれ自体の問題がいくつかあることに注意する必要があります。

HTML 文字列に遅延としてマークされたスクリプト タグ (

) が含まれている場合、innerHTML 属性が誤って処理されると、Internet Explorer でスクリプト インジェクション攻撃が発生する可能性があります。 innerHTML を設定すると、イベント ハンドラーが登録されている既存の HTML 要素が破壊され、一部のブラウザーでメモリ リークの潜在的なリスクが発生します。

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

作成したばかりの要素への参照を取得することはできません。これらの参照を取得するには、(DOM API を使用して) コードを手動で追加する必要があります。 すべてのブラウザーのすべての HTML 要素に innerHTML 属性を設定できるわけではありません (たとえば、Internet Explorer では、テーブルの行要素に innerHTML 属性を設定できません)。

私は、innerHTML 属性の使用に関連するセキュリティとメモリの問題のほうが心配です。明らかに、これは新しい問題ではなく、これらの問題のいくつかについて解決策を見つけ出した才能ある人々がすでにいます。
Douglas Crockford は、HTML 要素がイベント ハンドラーを登録し、ガベージ コレクターがこれらの HTML 要素に関連付けられたメモリを解放できるようにすることによって発生する一部の循環参照を破壊するクリーンアップ関数を作成しました。
HTML 文字列から script タグを削除するのは、見た目ほど簡単ではありません。正規表現は目的の効果を達成できますが、それがすべての可能性をカバーしているかどうかを知るのは困難です。私の解決策は次のとおりです。 <script>/</script>[^>]*>[Ss]*?]*>/ig

ここで、これら 2 つの手法を 1 つの setInnerHTML 関数に結合し、setInnerHTML 関数を YUI の YAHOO.util.Dom にバインドしましょう。
YAHOO.util.Dom.setInnerHTML = function (el, html) {
el = YAHOO.util.Dom.get(el);
if (!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;
}
}
}
a = o.childNodes;
if (a) {
l = a.length; for (i = 0; i c = o.childNodes[i];
// 子ノードをクリアします
argument.callee(c);
// YUI の addListener を通じて要素に登録されているすべてのリスナーを削除します
YAHOO.util.Event.purgeElement(c);
}
}
})(el);
// HTML 文字列からスクリプトを削除し、innerHTML 属性を設定します <script> el.innerHTML = html.replace(/</script>[^>]*>[Ss]*?
]*>/ig, " ");
// 最初の子ノードの参照を返します
return el.firstChild;
};
この関数が他に行うべきことがある場合、または正規表現に何かが欠けている場合は、お知らせください。 <script>明らかに、Web ページに悪意のあるコードを挿入する方法は他にもたくさんあります。 setInnerHTML 関数は、すべての A グレードのブラウザーでの <br /> タグの実行動作のみを正規化します。信頼できない HTML コードを挿入する場合は、必ず最初にサーバー側でフィルタリングしてください。これを実行できるライブラリは数多くあります。 <script defer>&hellip;</script>原文: "The 問題 With innerHTML" by Julien Lecomte