0

JavaScript を使用して、ドキュメント内のすべてのインライン イベント ハンドラーの登録を、それらが発生する前にインターセプトしたいと考えています。ドキュメントの静的ノード (つまり、スクリプトによって動的に挿入されないノード) の場合、インライン イベント ハンドラーを削除して、外部イベント ハンドラーに変換したいと考えています (外部ハンドラーとはnode.AddEventListener、JavaScript から関数を直接呼び出すことを意味します)。ただし、動的ノードの場合は、インライン イベント ハンドラーをそのままにしておきたいと思います (動的ノードは、JavaScript を使用して挿入されたノードです)。

例えば：

<body>
<img onerror="alert(1)" />
<script>
document.getElementById("a").innerHTML = "<img onerror='alert(2)'/>";
</script>
<div id="a"></div>
</body>

上記の例では、alert(2) エラー イベントをインラインのままにして、alert(1) エラー イベントを外部イベントに変換したいと考えています。インライン イベント ハンドラーを外部イベント ハンドラーに変換する方法は知っていますが、1) インライン ハンドラーが "登録" されて実際に起動される前にインターセプトする方法がわかりません。2) 静的ノードと動的ノードのハンドラーを区別します。

これが難しい問題であることは理解していますが、ヘルプ/コメントは素晴らしいでしょう:)

4

2 に答える 2

0

他のインラインイベントハンドラーが起動または登録される前に監視できる便利なDOMイベントが2つあります。window.onloadまたはDOMContentLoadedイベントのいずれかを監視する必要があります。

イベントは、onloadすべてのリソース（CSS、JS、画像など）を含むすべてのページコンテンツが発生したときに発生します。 DOMContentLoaded一方、ドキュメントの読み込みが完了したとき（DOMの準備ができているとき）に起動されますが、依存するリソースは起動されません。意味HTMLマークアップ、テキスト、スタイルの準備ができています。

jQueryには、この目的のためにクロスブラウザーの.ready（）イベントがあります。

$(document).ready(function() {
    // do something when the DOM is ready.
});

onerrorイベントの前に中断することができます。javascript（およびjQuery）を介して要素を簡単に操作したい場合は、要素にIDまたはクラスを割り当てる必要があります<img id="img1" onerror="alert(1)" />。onerrorしたがって、イベントで発生するアラートを取り除きたいとしましょう。たとえば、これを行うことができます。

$(document).ready(function() {
    $('#img1').unbind('error');
    //OR $('img').first().unbind('error'); 
            //to get the first image element from your actual code
});

errorこれにより、要素のイベントのハンドラーが削除（バインド解除）されますimg1。すべての画像からエラーイベントハンドラーを削除する場合は、次のようにします。

$('img').unbind('error');

古いエラーイベントを削除して新しいエラーイベントを特定の要素に割り当てる場合：

$('#img1').unbind('error').error(function(event){
    // do stuff...
});

2番目の質問に答えるには; 静的なイベントハンドラーと動的に追加されたイベントハンドラーを実際に区別することはできません。ただし、動的ハンドラーが追加される行の前にコードを配置するだけです。

お役に立てれば。

于 2013-01-16T13:12:30.143 に答える
0

インライン イベントの登録を傍受する方法はわかりませんが、インライン スクリプトの実行を傍受することは可能です。

ブラウザはインライン イベントを制御するためのインターフェイスを提供していませんが、インライン イベントは W3C 仕様に準拠した DOM イベントでもあります。次の実装を理解するには、HTML DOM API でのイベントの伝播に関する知識が必要です:バブリングとキャプチャ、イベント伝播の 2 つの方法。

上記の記事によると、すべてのブラウザー (IE<9 を除く) には、2 段階のイベント処理があります。イベントは最初にダウンします。これは、キャプチャーと呼ばれ、次にバブルアップします。この動作は、W3C 仕様で標準化されています。そのため、イベントを親ノードにバインドすることにより、ノードのインライン イベントが発生する前に、キャプチャ段階でノードのインライン イベントをインターセプトできます。例えば：

<img src="" onerror="alert('Yahoo!');" id="target" />
<script>
    document.addEventListener('error', function(e) {
        var element = e.target;
        if (element.id == "target") {
            e.stopImmediatePropagation();
            console.log("The alert is intercepted.");
        }
    }, true);
</script>

上記のドキュメントにバインドするイベントは、img.onerror の前に実行されe.stopImmediatePropagation()、現在のイベントのそれ以上の伝播を防ぎます。したがって、インラインの onerror イベントが発生する可能性はありません。

参考： http: //fex.baidu.com/blog/2014/06/xss-frontend-firewall-1/

于 2015-01-29T16:00:57.557 に答える