How to prevent robots from automatically filling up a form?

web-development

honeypot

bot-prevention

security-checks

byAnton Shumikhin·Oct 22, 2024

The honeypot field technique is a stealth way to catch bots. An extra form field, invisible to humans can trap most bots which will fill it in.

<form id="myForm" action="submit">
  <!-- Honeypot: bots fill, users ignore -->
  <input id="honeypot" type="text" name="_hidden" style="opacity:0; position:absolute; top:0; left:-5000px;"/>
  <!-- Visible fields -->
  <input type="text" name="user" />
  <input type="submit" />
</form>
<script>
  // This is the equivalent of putting mousetraps with cheese
  document.getElementById('myForm').addEventListener('submit', function(e) {
    if(document.getElementById('honeypot').value !== '') {
      e.preventDefault(); // Gotcha, bot!
    }
  });
</script>

If _hidden is filled out on submission, ignore it as bot activity.

Enhanced techniques for bot prevention

Time-based analysis

Compare the timestamp when the form was accessed to when it was submitted. If it's too fast, it's likely a bot.

session_start();
// Clock starts ticking...
$_SESSION['form_started'] = time();

// Later, when submission arrives:
$duration = time() - $_SESSION['form_started'];
if ($duration < 5) { // Anything less than 5 seconds? Bot Alert!
  // Too fast, must be a bot
}

Non-JavaScript users

For users with JavaScript disabled, use a noscript tag to instruct them to leave the honeypot field blank.

<noscript>Keep this field blank, it's a secret mission</noscript>
<input type="text" name="_hidden" />

Mastering CSS hiding

Get creative with CSS to make the field invisible but not display:none.

._hidden { 
  // Hide & Seek champion
  position: absolute;
  left: -9999px;
}

Dynamic form seeking

As a secondary defense, Load the form with AJAX. But be aware it's not effective if JavaScript is disabled.

function loadForm() {
  // Fetch and display the form
}
// Even bots hate queues
if (window.addEventListener) window.addEventListener("load", loadForm, false);
else if(window.attachEvent) window.attachEvent("onload", loadForm);