Disable JavaScript execution from console

Most modern browser today offers developer tools either as part of browser engine (like Chrome Developer Tools in Google Chrome) or as extension mechanism (like firebug in Mozilla Firefox). These tools are certainly in a way responsible for making JavaScript a much matured language because they provide a powerful tool to debug through the script. Those shortcut keys (F8, F10, F11 etc), which use to work in powerful IDEs, was almost a privilege to other programming languages have finally arrived to JavaScript developers. Matter of no debate, powerful debugging tools is a mandate for any programming language to become mature enough to attract wide audience from developer community.

However as the debugging, which is open for all (remember, it is attached to browser and not to a particular IDE), gets more and more popular, anyone can write script snippet using console and get it executed in the host application environment (i.e., the web page which is being displayed in the browser). Obviously this cannot be considered as security threat since the user who is trying to execute any script snippet has execution permission. For example, if user has no permission to view account statement for other user, he/she cannot do so via executing script using console since the permission are governed by backing server code.

In certain cases, it is still possible that you may want to disable any kind of script execution via console for your web application due to business demands. For the practical reason, neither you can configure user’s browser to disable console nor ask them to stop using console (both won’t work, billions of user and why would they listen to you?)

In such case, the only practical possibility would be to host code in your web application which disallows any script execution via console. Wow! First question, is that even possible? How?

Yes, that’s kind of possible and which is what I am going to explain now. Let’s take example of Google Chrome Developer tools.

Chrome developer tools takes anything which is typed in to console as an input and simply passes it to evaluate function to run it in the host application environment. Before doing so, they create a property “_commandLineAPI” in console object and whole script gets executed in with block as

with ((window && window.console && window.console._commandLineAPI) || {}) {
// your script here.
}

Now seeing what we have above, it is very easy to say that the only way to stop execution of “script code typed in console” is to throw an exception before that.

A simplest way would be to save the console object in a function variable and define console property in window object with accessor/mutators (i.e., get/set). In get function, we could simply check if the property attached by chrome developer tool exists and if yes, throw exception (obviously which is not handled by anyone and hence stops execution of further code).

Here’s the full code snippet

<script type="'text/javascript'">
(function(){

    var _z = console;
    Object.defineProperty( window, "console", {
	get : function(){
	    if( _z._commandLineAPI ){
		throw "Sorry, Can't exceute scripts!";
            }
	    return _z; 
	},
	set : function(val){
	    _z = val;
	}
    });

})();
</script>

With the above script added in your web application, try launching console and execute any script. You would notice the following message in console (and yes, typed in script in console did not get executed!)

Script Execution Using Chrome Developer Tools

Whoa!!!

Selecting ExtJS Grid Row using Watir

Grid is the most powerful widget in ExtJS and it becomes tricky at times to write test cases using Watir. One of the instance which I faced was selection of any row in grid with watir script.

From the script, I tried to find the DIV element of grid for the row using the class tag and fired the click event

$browser.div( :class => "x-grid3-row", :index => 10 ).click 

The script immediatley highlighted 10th row in grid but did not get selected (Normally Grid row changes appearance when it gets selected). I tried the other way (firing mousedown event, thinking it would work ) as

$browser.div( :class => "x-grid3-row", 
                   :index => 10 ).fire_event( "onmousedown" )

Still no luck! It looked like as if grid is not responding to the events.

On debugging the issue, I found that whenever “mousedown” or “click” events are being fired from watir scripts, they were cascading “rowmousedown” or “rowclick” event appropriately to the Grid. But the function which changes the css class of row to be selected was not getting called. Again Why?

Stepping further, found the statement in RowSelectionModel class from where the event is simply ignored (as if nothing had happened)

Class - RowSelectionModel
handleMouseDown : function(g, rowIndex, e){
   if(e.button !== 0 || this.isLocked()){
      return;
   };

It seems that value of button property was not equal to ZERO when fired from watir script. However when I use mouse, button value is ZERO.

Why ExtJS has this comparison check for button property of Event? My guess is that ExtJS developer wanted to handle only those event which are being generated by clicking mouse. If the event was generated from Mouse, property button of event will definitely have the value as per the W3C standard or Microsoft standard ( which is obviously not the case with the events generated from watir scripts).

The question now, how do we generate mouse event using our watir scripts? Cause from watir library, there is no way to fire mouse event directly.

Solution to the above problem is to add the module as mentioned in Watir Wiki . Include the module in your script and modify your test statement as

$browser.div( :class => "x-grid3-row", :index => 10 ).left_click

It works perfectly!!!

for me, this is definitely elegant as I was trying to execute javascript code from watir script to select the row as

$browser.document.parentWindow.eval( 
      "Ext.getCmp( 'gridId' ).getSelectionModel().selectRow( 10 ) ")

On a side note, I have not heard of many instance where folks are praising Microsoft for implementing feature which is not according to the standard and still makes sense (specially true with Internet Explorer). Read the “Miscellaneous Properties” section in W3C Dom Events page for details of Event’s Button property. From the page

The Microsoft implementation is the only one that makes sense.