I have always wondered why the button click could be simulated using the document.element.click() event. I mean if only we could ensure that any click event that originates must be a click event because of user interaction, it would make life just a step better right ! So many form submits under malicious circumstances could be avoided. [For the technically informed: Of course there are workarounds that need other mechanisms in place]. A sample code of how this can be done is here
So this week I was working on the HTML5's full screen API. I am not a major audio/visual person so I have not had the pleasure of exploring this API before. I was planning on hosting a presentation online. Like many of us I chose to use JS to write this 'modern' presentation. In my computer, I generally use the presentation mode of chromium thereby making it a good solution without the need to use the terrible api of HTML5. It is not terrible because of the specification. The specification for the fullscreen API seems to be one of the best in the entire HTML5 draft. However, NOT EVEN ONE of the major browsers seem to have the desire to implement the native (non browser specific) calls yet. The experimental ones are crazy to a fault because each of them seem to have their own spellings for FullScreen vs Fullscreen. I hence got a tad fed up of writing the whole list with their variations and went on to a well written piece of code Screenfull. Just to clarify, the fullscreen mode was initially conceived to allow 'individual elements' to go to full screen like an image in full screen or so a video or so on. However, since the document itself is a element in HTML, the API also applies to the entire document.
Just to clarify, the fullscreen mode was initially conceived to allow 'individual elements' to go to full screen like an image in full screen or so a video or so on. However, since the document itself is a element in HTML, the API also applies to the entire document.
Initially everything worked great. Then like any other programmer I got a bit carried away - went on to some random sites and used the console to add the script to make the page go full screen. Alas, this was not to be. The full screen just was not working. I was damn surprised at the outcome and went to implement an auto-fullscreen mode for my presentation to be triggered when the page loads (body onload event). This was not to be either. So I ended up frustrated for a full half-hour before realizing that the code actually works when it is under the button click event.
So I finally realized (and confirmed with a bit of binging and googling), that the fullscreen event is indeed triggered only upon user interaction to avoid malicious nature of the exploits. This was even more interesting. So I went on to check how this 'user interaction' was defined. I tried using the fullscreen event as a triggered click.
In HTML, the button (or any other element for that matter) can have various actions performed when a user clicks it. (For the technically informed: there are so many more events but lets not go there). So these buttons can have more than one action to perform based on the point in time. There are listeners which enable multiple functions to register for these events and perform actions when the event occurs.
So I tried using the document.element.click() which is a simulated click according to the HTML specification. However, Chrome did nothing. This was BRILLIANT. They have made use of knowing if the user clicked the button in such a beautiful and wonderful manner.
They have made use of knowing if the 'user actually clicked the button' in such a beautiful and wonderful manner.
I could see the function being called on my console log but Chrome would not even generate a violation error message or anything whatsoever. [For the technically informed: This is a great thing but I do wish there would be a notification in the log in a similar way as when something violates the security policy of the page].
Note: Update - Firefox seems to have a similar behavior too.
I just wish there could be a way to use this inbuilt functionality. Of course I would be trying to change the humongous chromium source code to use it for my research purposes but this is a functionality that can be promoted with a small data- tag or the innumerable ways I can think of. Let me explain why this excites me. The problem of clickjacking aside, the click simulation or any other event trigger causes a lot of things to happen. Imagine your bank's page. These pages use a lot of delicately tuned mechanisms for security. The url submit has event listeners that deobfuscate tokens, sign requests etc., The URL itself contains dynamic tokens such as the CSRF token which are gradually becoming harder to find even with a page parser (in real time) because of some server side mechanisms. However, you can ride the system by clicking the button because at the end of it all is a simple user action which triggers the whole process. The button click through javascript has been a curse for this very reason. {In truth though, it is a very nice feature for developers especially during automated testing.}
I just wish there could be a way to use this inbuilt functionality to avoid automated clicks.
Such a wonderful functionality that is already implemented should be accessible to developers. It could be a step forward in the right direction towards improving JavaScript's security mechanisms. This would be a trivial thing to do for the browsers at this point and hence must be strongly recommended by all developers and security professionals alike to be part of the specification. All comments on how to proceed on making this possible would be highly appreciated.
Assuming it would be implemented as a type of button or via an attribute, how would one prevent malicious hacker from turning the feature off for that button?
The full screen feature does not have this problem because it just does not go full screen if there was not physical click...