innerHTML アプリケーション

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実装コード

推薦する

アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス

目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...

主要ブラウザとそのカーネルの紹介

トライデント コア: IE、MaxThon、TT、The World、360、Sogou Brows...

TypeScript デコレータ定義

目次1. コンセプト1.1 定義1.2 デコレータファクトリー1.3 デコレータの組み合わせ1.4 ...

MySQL遅延スレーブを導入するメリットのまとめ

序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...

Nginx レイヤー 4 負荷分散構成ガイド

1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...

XHTML 入門チュートリアル: シンプルな Web ページの作成

1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...

WeChat アプレットのカスタム下部ナビゲーション バー コンポーネント

この記事の例では、WeChatアプレットの下部ナビゲーションバーコンポーネントの具体的な実装コードを...

CentOS 6 は Docker を使用して Redis マスター スレーブ データベース操作例を展開します

この記事では、Docker を使用して Centos6 に Redis マスター/スレーブ データベ...

Vue-Routerのルート設定の詳しい説明

目次導入ルート内のオブジェクト属性パス: 文字列コンポーネント: コンポーネント | () =>...

ブラウザのURLの前に小さなアイコンを表示する方法

多くのウェブサイトを閲覧すると、ブラウザのアドレスバーの前に小さなアイコンがあり、ブラウザのタブの位...

ウェブサイトのテキストはまだデザインする必要がありますか?

多くの人が、ウェブサイト上のテキストはデザインする必要があるのか​​と疑問に思うかもしれません。多く...

VMware Workstation のインストール Linux システム

始める段階から初心者になるまで、Linux オペレーティング システムは不可欠です。最初のステップは...

Linux でリモート MySQL データベースを手動で展開する方法の詳細な説明

1. mysql をインストールします。次のコマンドを実行して、YUM ソースを更新します。 rpm...

Linux でパスワードの有効期限を表示および設定する方法

適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...

Vue ベースの円形スクロールリスト機能を実装する

注: 親コンテナーに高さと :data='Array' および overfolw:h...