如何在第三方网站上检测JavaScript事件

Question

Is there any way (implemented or just in theory) that one could detect javascript events and actions assigned on a third party site?

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

Answer 1

If you just want to add new event handlers without overwriting the existing event handlers, you can use addEventListener() or attachEvent() (for older versions of IE) instead of setting .onclick , .onsubmit , etc... to add a new event handler without affecting the previous event handlers.

Here's a simple cross browser function to add an event:

// 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));   
        });
    }
}

There is no cross browser way that I'm aware of from regular javascript to interrogate existing DOM objects to see which ones have regular javascript event handlers installed via addEventListener or attachEvent . If the event handlers are installed with jQuery, they can be interrogated via this technique .

There is some future spec work that has been done to add a property that would list all the event handlers, but I am not sure it is implemented yet. You can read more about that here .

For event handlers installed with onclick , onsubmit , onfocus , etc..., you can check all existing DOM elements to see which ones have handlers assigned for those events and you can then hook them if you want to.

// 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]);
        }
    }
}

Answer 2

You can actually get what you want by changing the prototype of addEventListener and 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);
};

Of course, it's important that this is added into the page before any other page scripts, but it can come after or before libraries like jQuery, but might have conflicts on the prototype with prototype.js, not sure.

You'll also want to check for onclicks and the whole set of events, which you can find by running console.dir(document.createElement('a')) in a javascript console.