Menu
I'm trying to develop a library that try to detect auto-click on a page. The library will be imported on several different pages, some will have jquery, some other will not, or will have other different libraries, so my solution should be vanilla javascript.
the goal is to have several security layers, and the first one will be in javascript, this library will not be the only counter measure against auto-click, but should provide as much informations as possible.
The idea is to intercept all click and touch events that occur on the page, and if those events are script generated, something will happen (should be a ajax call, or setting a value on a form, or setting a cookie or something else, this is not important at this stage).
I've write a very simple script that checks for computer generated clicks:
(function(){
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
try{
document.querySelector('body').addEventListener('click', function(evt) {
console.log("which", evt.which);
console.log("isTrusted", evt.isTrusted);
}, true); // Use Capturing
}catch(e){
console.log("error on addeventlistener",e);
}
}
}
}());
I saw this working on a html page without any other js in it, but since I added this javascript to test the auto-click detection simply "nothing" happens, and with nothing I mean both autoclick and detection. The same code as follow, if used in the console, is working fine, and events are intercepted and evaulated. this is the script used:
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
//1 try
el = document.getElementById('target');
if (el.onclick) {
el.onclick();
} else if (el.click) {
el.click();
}
console.log("clicked")
}
//2 try
var d = document.createElement('div'); d.style.position = 'absolute'; d.style.top = '0'; d.style.left = '0'; d.style.width = '200px'; d.style.height = '200px'; d.style.backgroundColor = '#fff'; d.style.border = '1px solid black'; d.onclick = function() {console.log('hello');}; document.body.appendChild(d);
}
the html page is very simple:
<body>
<h1>Hello, world!</h1>
<div id="target"> aaaaa </div>
</body>
and for test purposes I added the detection library in head, while the "autoclick" code is just behind the </body> tag.
I guess the problem is in "how I attach the event handler", or "when", so what I'm asking is what can I do to intercept clicks events "for sure", the idea is to intercept clicks on every element, present and future, I don't want to prevent them, just be sure to intercept them somehow. Of course I cannot intercept those events that has been prevented and do not bubble, but I'd like to "try" to have my js "before" any other.
Do you have some idea about this?
jsfiddle of example
612
There is no API to detect if an autoclicker is running. All autoclickers use accessibility services to emulate clicks, and there is an API that allows you to detect if any accessibility service is running.
Theoretically, the website can't tell between the auto click and a human click. The hyperlink or object will respond the same. Both clicks register the same value or input. But the determining whether it's a human or not isnt when the click happens, but everything before the click.
They can do - the technology to detect the clicks is simple, while distinguishing a human from a bot is hard. You see them mostly on games sites, to prevent automation and cheating, and also on some other sorts of sites that have an incentive for doing it, like ones that pay you to click on ads.
Or, on your keyboard, press Alt + Shift + s. Advanced. Under “Accessibility,” select Manage accessibility features. Under “Mouse and touchpad,” turn on Automatically click when the mouse cursor stops.
Using document.onreadystatechange will only work as expected in simple scenerios when no other third party libraries are included. Wrap you code inside the native DOMContentLoaded event.
document.addEventListener("DOMContentLoaded",function(){
document.body.addEventListener('click', function(evt) {
if (evt.target.classList.contains('some-class')) {} // not used
console.log("which", evt.which);
console.log("isTrusted", evt.isTrusted);
}, true);
//this is the autoclick code!
el = document.getElementById('target');
if (el.onclick) {
el.onclick();
} else if (el.click) {
el.click();
}
console.log("clicked")
});<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="target"> aaaaa </div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
