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?
2 Answers
Answers 1
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>Answers 2
If you look at the event param passed to the function on a click, or whatever other event, you can look for the following which is a telltale sign that the clicker ain't human...
event.originalEvent === undefined From what you've said I'd use the following to track clicks...
$(document).on("click", function(event){ if(event.originalEvent === undefined){ //not hooman }else{ //hooman } }); 
0 comments:
Post a Comment