0

サードパーティのサイトで割り当てられた JavaScript イベントとアクションを検出できる方法 (実装または理論上) はありますか?

If I am injecting JavaScript into a foreign site and want to avoid overwriting onsubmit, onclick, onfocus and other such events, is there any way to detect and extend such callbacks rather than overwrite them?

Ideas I've had:

  • run the site in a headless browser or JavaScript engine before hand to capture all executed JavaScript
  • parse the JavaScript on the fly and hope the third party JavaScript conforms to my parser's expectations
4

2 に答える 2

4

既存のイベント ハンドラーを上書きせずに新しいイベント ハンドラーを追加するだけの場合は、 (古いバージョンの IE の場合) 、 などを設定する代わりにoraddEventListener()を使用して、以前のイベント ハンドラーに影響を与えずに新しいイベント ハンドラーを追加できます。attachEvent().onclick.onsubmit

イベントを追加するための簡単なクロス ブラウザー関数を次に示します。

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

通常の JavaScript から既存の DOM オブジェクトに問い合わせて、addEventListenerまたはを介し​​てインストールされた通常の JavaScript イベント ハンドラーがどのオブジェクトにあるかを確認するクロス ブラウザーの方法はありませんattachEvent。イベント ハンドラーが jQuery と共にインストールされている場合は、この手法で問い合わせることができます。

すべてのイベント ハンドラーをリストするプロパティを追加するために行われた将来の仕様作業がいくつかありますが、まだ実装されているかどうかはわかりません。詳細については、こちらをご覧ください。

onclick、onsubmit、などでインストールされたイベント ハンドラーの場合onfocus、既存のすべての DOM 要素をチェックして、これらのイベントにハンドラーが割り当てられている要素を確認し、必要に応じてそれらをフックできます。

// add other events here you are interested in
var events = ["onclick", "onsubmit", "onfocus", "onblur"];
var elems = document.getElementsByTagName("*"), item;
for (var i = 0; i < elems.length; i++) {
    item = elems[i];
    for (var j = 0; j < events.length; j++) {
        if (item[events[j]]) {
            console.log("event handler for " + events[j]);
        }
    }
}
于 2012-10-02T01:07:40.677 に答える
1

addEventListenerとのプロトタイプを変更することで、実際に必要なものを取得できますattachEvent。

// intercept events cross browser
var method;
if (HTMLElement.prototype.addEventListener) {
  method = 'addEventListener';
} else {
  method = 'attachEvent';
}
HTMLElement.prototype.realAddEventListener = HTMLElement.prototype[method];
HTMLElement.prototype[method] = function(a,b,c) {
  console.log('here are all the events being added:', arguments);
  this.realAddEventListener(a,b,c);
};

もちろん、これを他のページ スクリプトの前にページに追加することが重要ですが、jQuery などのライブラリの後または前に追加することはできますが、prototype.js とプロトタイプで競合する可能性があります。

また、javascript コンソールでonclicks実行して見つけることができるイベントのセット全体を確認することもできます。console.dir(document.createElement('a'))

于 2012-10-02T05:13:43.423 に答える