需要鼠标点击的输入字段

Question

I'm building a simple HTML page, and I have an input field followed by a search button; this is the code:

<input type="text" id="sfield" placeholder="Write something">
<button id="search">Search!</button>

I'm currently writing the javascript to assign some actions to the button and to the input field, when I thought that it would be a good idea to add a feature that needs the cursor to be on the field for the search to start. I'll explain it better: if someone wants to search something, it will appear just like a normal input field and work like that. However, if someone tries to launch a script for auto-submitting the form, it'll act like no input was inserted.

For example, if someone tries to inject this script:

document.getElementById('sfield').value="Some stuff";
document.getElementById('search').click();

the search would start but the "Some stuff" string wouldn't be saved, as if the user clicked the search button without writing in the search field. Furthermore, adding the line

    document.getElementById('sfield').focus();

should also do nothing, so that the only way to put the cursor in the field would be a manual action by the user.

I'm wondering if it's possible to make such thing; I already managed to get the search field blank with EventListener, but I don't have a clue about making the script discern whether the user put the cursor on the field or not.

I'd prefer not using JQuery but it's ok also with it. Any idea would be greatly accepted. Thanks.

Answer 1

In that case, the program needs to retain state. I'd do it like this...

http://jsbin.com/hopicucuyi/edit?js,console,output

<input type="text" id="sfield" placeholder="Write something" data-validated = "false">
<button id="search">Search!</button>

<script>
   const inputField = document.getElementById('sfield');
const searchButton = document.getElementById('search');

inputField.onfocus = () => {
    inputField.setAttribute("data-validated", "true") 
}
searchButton.onclick = () => {
    const isValidated = inputField.getAttribute("data-validated");
    console.log('Is Validated: ' + isValidated);
}
</script>

Answer 2

Generally neither of these solutions will stop a bot that uses a browser (which is a bot that runs javascript). There is no 100% solution, but there are stronger solutions than checking if something has focus or not. Remember the javascript environment is completely controllable from the browser side of things. For instance, all I would have to do to get past your security is change the state of the input in question to data-validated="true" and your security falls apart.

However, the browser vendors have taken this possibility into account and provide you with a little-known solution. Look at the event data coming from a mouse click or a keystroke. This event data can be generated. It used to be easier in the older browsers to spoof an event just by using new Event() , but now modern browsers use specific events for keyboard and mouse. The part that makes spoofing these very hard is that in the event there are properties that are read-only . More specifically there is an event property called "trusted" that cannot be set by javascript. If you spoof a MouseEvent or KeyboardEvent , the "trusted" property is set to false, but if you use the actual mouse or keyboard "trusted" is set to true.

Info on the isTrusted property here: https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

Note: this is also not 100% as the bot can run a keyboard/mouse macro that creates genuine "trusted" events. However, it does make the system much harder to crack as many people dont know about this security trick, and most bots will not have mouse/keyboard control built in. If you encounter a bot that uses mouse/keyboard, you've reduced the security playing-field and further analysis of the events and interface usage can take place.

If you combine this method with other methods like browser fingerprinting etc. it makes your overall anti-bot security that much stronger and discourages many more possible bots.

Edit: Don't just use this method and others, obfuscate your code so that any attacker will have to take the time to deobfuscate and wade through a bunch of poorly labeled functions and encrypted strings if they want to see how your security works.