Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect if button click real user or triggered by a script

Is there any method that enables me to detect whether a button click was performed by a real user and not some automated method (javascript) that a user has loaded onto their browser developer console or other browser developer tool?

I tried the following methods suggested in various stackoverflow posts but none of them appear to work. REF: How to detect if a click() is a mouse click or triggered by some code?

Script Detection methods tried and failed:

mybutton.click(function (e) {
    if (!e.which) {
        //Triggered by code NOT Actually clicked
        alert(' e.which - not a real button click')
    } else if ('isTrusted' in e && !e.isTrsuted) {
        //Triggered by code NOT Actually clicked
        alert(' e.isTrusted - not a real button click')
    } else if (e.originalEvent === undefined) {
        //Triggered by code NOT Actually clicked
        alert(' e.originalEvent - not a realbutton click')
    }
    //                  else if (!e.focus) {
    //                      //triggered  // does not detect e.focus on a real btn click
    //                      alert(' e.focus - not a realbutton click')
    //                  }
    else {
        // Button hopefully clicked by a real user and not a script
    }
})

If I run the following script to trigger the button click from the Chrome browser console none of the methods above traps it as being triggered by a script.

var button = document.getElementById("btnSubmit");
button.click();

==========================================================================

Thank you for all your responses and thanks to stackoverflow for providing such a great site that facilitates so much knowledge sharing and for saving us techies an untold number of hours.

It appears that I still do not have reliable method. All 3 browsers (FF, IE & Chrome) provide a developer/console interfaces for a user to run/inject a javascript on my webpage. It appears that each browser flavor traps some event property values a little differently. For example: Chrome traps the difference between a script activated cick and a real user with e.screenX but in IE: e.screenX has the same value for both a script click (synthetic) and a user button click

The following detection methods either did not work at all or are inconsistent across the different browsers: e.which e.isTrsuted e.originalEvent (event.source != window) (e.distance != null)

The mousedown event appears to be only triggered by a real user button click, but I have to assume there is some script method to emulate a mousedown in addition to a button click event

$(me.container + ' .mybutton').mousedown(function (e) { 
    alert('mouseisdown real button click'); 
}

If anyone can figure out a reliable method that works across multiple browsers, that detects the difference between a synthetic (script) button click and a button click by a user, you will deserve superhero status.

like image 725
user151402 Avatar asked Feb 10 '13 03:02

user151402


2 Answers

when a button click happens through the mouse, the event e usually has the mouse pointer location recorded. Try something like :

   if(e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0){
     alert("real button click");
   }
like image 177
Raja Avatar answered Oct 23 '22 08:10

Raja


No, it's not possible in all cases.

As other answers mentioned, you can look for the mouse coordinates (clientX/Y and screenX/Y), and if they're not present, you can assume it was probably not a human-generated action.

But, if the user tabs onto the button and uses the space bar to click it, or otherwise clicks it without using a mouse, the coordinates will also be zero, and this method will incorrectly determine it to be a scripted click.

Also, if the script uses dispatchEvent instead of click, coordinates can be given to the event. In this case, this method will incorrectly identify it as a user-generated click.

// This will produce what appears to be a user-generated click.
function simulateClick(element) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 110, 111, 10, 11, false, false, false, false, 0, null);
  element.dispatchEvent(evt);
}

http://jsfiddle.net/bYq7m/

like image 42
Dagg Nabbit Avatar answered Oct 23 '22 08:10

Dagg Nabbit