需要鼠标单击的输入字段

Question

我正在构建一个简单的 HTML 页面，我有一个输入字段，后跟一个搜索按钮；这是代码：

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

我目前正在编写 javascript 以将一些操作分配给按钮和输入字段，当时我认为添加需要光标处于打开状态的功能是个好主意开始搜索的字段。我会更好地解释它：如果有人想搜索某些东西，它将看起来就像一个普通的输入字段并像那样工作。然而，如果有人试图启动一个自动提交表单的脚本，它就会像没有插入任何输入一样。

例如，如果有人试图注入此脚本：

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

搜索将开始，但不会保存 "Some stuff" 字符串，就好像用户没有在搜索字段中写入就单击了搜索按钮。此外，添加行

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

也应该什么也不做，这样将光标放在字段中的唯一方法就是用户手动操作。

我想知道是否有可能制作这样的东西；我已经设法使用 EventListener 将搜索字段设为空白，但我不知道如何让脚本辨别用户是否将光标放在该字段上。

我不想使用 JQuery，但也可以。任何想法都会被大大接受。谢谢

Answer 1

在那种情况下，程序需要保留状态。我会这样做...

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

通常，这些解决方案都不会阻止使用浏览器的机器人（运行s javascript 的机器人）。没有 100% 的解决方案，但有比检查某物是否有焦点更强大的解决方案。记住 javascript 环境是完全可以从浏览器端控制的。例如，要通过您的安全措施，我所要做的就是将相关输入的状态更改为 data-validated="true" 并且您的安全措施将崩溃。

不过，浏览器厂商已经考虑到了这种可能性，为大家提供了一个鲜为人知的解决方案。查看来自鼠标单击或击键的事件数据。可以生成此事件数据。在旧版浏览器中，仅通过使用 new Event() 就可以更轻松地欺骗事件，但现在现代浏览器对键盘和鼠标使用特定事件。使这些欺骗变得非常困难的部分是，如果存在只读的属性。更具体地说，有一个名为 "trusted" 的事件属性无法由 javascript 设置。如果你欺骗 MouseEvent 或 KeyboardEvent，"trusted" 属性设置为 false，但如果你使用实际鼠标或键盘 "trusted" 设置为 true。

关于 isTrusted 属性的信息：https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

注意： 这也不是 100%，因为机器人可以运行一个 keyboard/mouse 宏来创建真正的 "trusted" 事件。然而，它确实使系统更难破解，因为很多人不知道这个安全技巧，而且大多数机器人不会内置 mouse/keyboard 控制。如果你遇到使用 mouse/keyboard 的机器人，你减少了安全竞争环境，可以对事件和接口使用情况进行进一步分析。

如果您将此方法与其他方法（如浏览器指纹识别等）结合使用，它会使您的整体反机器人安全性更加强大，并阻止更多可能的机器人。

编辑： 不要只使用这种方法和其他方法，混淆你的代码，这样任何攻击者都将不得不花时间去混淆和处理一堆标记不当的代码函数和加密字符串，如果他们想了解您的安全性如何工作的话。

需要鼠标单击的输入字段

Input fields needing mouse click

javascript

html

validation

input

anti-bot