Prevent button from being clicked programmatically

Question

I have the following button:

<input type="button" disabled onClick=document.location.href="?hash=blabla" tabindex="-1" class="btn btn-transparent btn-xs cbut0" />

Now the button is disabled and using another script to re-enable it on mouse-over event, however it seems users can still click the button programmatically by loading a simple external javascript such as:

window.onload = setTimeout(function(){
$('input.btn.btn-transparent').click();
}, 10000);

Is there any way to prevent this behavior, somehow making sure the button is clicked on by a mouse and not by some script?

I found some leads at Disabled button still fires using ".click()" but failed to implement it in my case.

Answer 1

You can make use of isTrusted property of event. Have a look at MDN.

The isTrusted read-only property of the Event interface is a boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via dispatchEvent.

Demo

function changeHash(event) {
  if (event.isTrusted) {
    alert("Trusted");
  } else {
    alert("Programmatically triggered");
  }
}

function triggerClick() {
  document.getElementById('btn').click();
}

<input type="button" id="btn" onClick="changeHash(event)" tabindex="-1" class="btn btn-transparent btn-xs cbut0" value="change">

<button onclick="triggerClick()">Trigger click</button>

Below is the sample code to check whether the event is trusted event.

if ('isTrusted' in event) {
  if (event.isTrusted) {
    alert('The ' + event.type + ' event is trusted.');
  } else {
    alert('The ' + event.type + ' event is not trusted.');
  }
} else {
  alert('The isTrusted property is not supported by your browser');
}

So with this code you can change your code like below to get it working.

HTML

<input type="button" disabled onClick = "changeHash()" tabindex="-1" class="btn btn-transparent btn-xs cbut0" />

JS

changeHash(event) {
  if (event.isTrusted) {
    document.location.href = "?hash=blabla"
  } else {
    event.preventDefault();
  }
}

Workaround for event.isTrusted is to check for eventX and eventY properties as shown below

changeHash(event) {
  if (event.screenX && event.screenY && event.screenX != 0 && event.screenY != 0) {
    document.location.href = '?hash=blabla';
  } else {
    event.preventDefault();
  }
}