Question

I’m thinking about ways of managing the behaviour of JavaScript on the client.

Suppose at the top of my HTML page, I have…

<script>

var XMLHttpRequest = function () {
   this.send = function() {
     alert(args.toString());
   }

};

Is it subsequently possible (on the same page) to access the native XMLHttpRequest object?

(obviously, from a security viewpoint this is not the best way to prevent XSS – that’s not the question).

Answer 1

Since XMLHttpRequest is a property of the window object, you should still be able to access it through that.

You have not actually overwritten it, you have only shadowed the native property of window so any time you try to call XMLHttpRequest in the scope of your declaration, your overridden version will be encountered first in the scope chain and therefore executed. If you explicity access window.XMLHttpRequest you will bypass your overridden version and access the native one directly:

var XMLHttpRequest = function() {
   console.log('example');
}
var request = new XMLHttpRequest(); //Calls the above function
var request2 = new window.XMLHttpRequest(); //Calls the native function

Note that if you had not declared your version with the var keyword, you would actually have overridden the native function, and in that case you can get it back (but not in Internet Explorer) by deleting the new property:

delete window.XMLHttpRequest;

Edit

I just realised the above is slightly misleading. If you omit the var keyword, you don’t actually overwrite the original function, you are still just shadowing it. That is because the original function is declared on the prototype of the window constructor.