需要鼠標點擊的輸入字段

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

通常，這些解決方案都不會停止使用瀏覽器的機器人（即運行 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%，因為機器人可以運行鍵盤/鼠標宏來創建真正的“可信”事件。 然而，它確實使系統更難破解，因為很多人不知道這個安全技巧，而且大多數機器人不會內置鼠標/鍵盤控制。如果你遇到使用鼠標/鍵盤的機器人，你已經減少了可以進行安全競爭以及對事件和界面使用情況的進一步分析。

如果您將此方法與瀏覽器指紋識別等其他方法結合使用，它會使您的整體反機器人安全性更加強大，並阻止更多可能的機器人。

編輯：不要只使用這種方法和其他方法，混淆你的代碼，這樣任何攻擊者都必須花時間去混淆並瀏覽一堆標記不佳的函數和加密字符串，如果他們想看看你的安全是如何工作的。