Construye un reino de honeypot efectivo

Los Honeypots son campos utilizados por los desarrolladores para evitar envíos de spam.

En 2025, todavía están trabajando.

entonces no necesitas Código de verificación U otras mecánicas molestas.

Pero debes configurar algunos trucos para que los robots de spam no puedan detectar los campos de tu honeypot.

usa esto

Creé un Honeypot Elemento Eso es todo lo que mencioné a continuación. Entonces puedes simplemente importarlos y usarlos así:

<script>
  import { Honeypot } from '@splendidlabz/svelte'
</script>

<Honeypot name="honeypot-name" />

Alternativamente, si usa Astro, puede hacer lo siguiente:

---
import { Honeypot } from '@splendidlabz/svelte'
---

<Honeypot name="honeypot-name" />

Pero ya que estás leyendo esto, estoy seguro de que te estás preguntando cuáles son los pasos necesarios.

Evite que los robots detecten honeypots

Hay dos cosas que debes hacer aquí. No Hacer:

1. no usar <input type=hidden>.
2. No utilice CSS en línea para ocultar honeypots.

Los robots de hoy son lo suficientemente inteligentes como para saber que se trata de trampas y las saltan.

Necesitas hacer lo siguiente:

1. usar un text sitio.
2. Utilice CSS para ocultar este campo, es decir No cola.

Un ejemplo de trabajo sencillo es este:

<input class="honeypot" type="text" name="honeypot" />

<style>
  .honeypot {
    display: none;
  }
</style>

Actualmente, habrá <style> La etiqueta cerca del honeypot parece funcionar. Pero es posible que no quieras hacer esto en el futuro (más sobre esto a continuación).

mejora innecesaria

Es posible que hayas visto estas otras mejoras en varios artículos sobre honeypot:

• aria-hidden Evitar que los lectores de pantalla utilicen este campo
• autocomplete=off y tabindex="-1" Evitar que este campo sea seleccionado

<input ... aria-hidden autocomplete="off" tabindex="-1" />

Nada de esto es necesario porque display: none Ya ha hecho lo que se supone que deben hacer estos atributos..

Mejoras preparadas para el futuro

Los bots son cada día más inteligentes, por lo que no subestimaría la posibilidad de que capturen el contenido que creamos anteriormente. Por lo tanto, aquí hay algunos pasos que podemos tomar hoy para preparar nuestros honeypots para el futuro:

1. Usa algo que parezca legal name Valores de atributos como website o mobile En lugar de un nombre obvio de honeypot, p. spam o honeypot.
2. Utilice nombres de clases CSS que suenen legales, como .form-helper en lugar de algo tan obvio como esto .honeypot.
3. Coloque el CSS en otro archivo para que estén más separados y sea más difícil vincularlos entre el CSS y los campos del honeypot.

La idea básica es engañar a los robots de spam para que entren en este territorio «legítimo».

<input class="form-helper" ... name="occupation" />

<!-- Put this into your CSS file, not directly in the HTML -->
<style>
  .form-helper {
    display: none;
  }
</style>

Existe una buena posibilidad de que el bot no pueda diferenciar entre campos de honeypot y otros campos legítimos.

Más mejoras

Necesita mejorarse en los siguientes aspectos <form> En lugar de una granja de miel.

La idea básica es detectar si es probable que la entrada sea provocada por humanos. Hay muchas formas de hacer esto, y todas requieren JavaScript:

1. detectó un mousemove Algo pasó en alguna parte.
2. Detecta eventos de teclado en alguna parte.
3. Asegúrate de que la mesa no se llene rápidamente (porque la gente no trabaja tan rápido).

Ahora, la forma más fácil de usarlos (siempre recomiendo la forma más fácil que conozco) es usar este Form Elemento he creado Laboratorio brillante:

<script>
  import { Form, Honeypot } from '@splendidlabz/svelte'
</script>

<Form>
  <Honeypot name="honeypot" />
</Form>

Si usa Astro, necesita habilitar JavaScript usando directivas del lado del cliente:

---
import { Form, Honeypot } from '@splendidlabz/svelte'
---

<Form client:idle>
  <Honeypot name="honeypot" />
</Form>

Si usa JavaScript simple u otros marcos, puede usar preventSpam Utilidad para realizar una triple verificación por usted:

import { preventSpam } from '@splendidlabz/utils/dom'

let form = document.querySelector('form')
form = preventSpam(form, { honeypotField: 'honeypot' })

form.addEventListener('submit', event => {
  event.preventDefault()
  if (form.containsSpam) return
  else form.submit()
})

Y si no quieres utilizar nada de lo anterior, la idea es utilizar JavaScript para detectar si el usuario ha realizado algún tipo de interacción en la página:

export function preventSpam(
  form,
  { honeypotField = 'honeypot', honeypotDuration = 2000 } = {}
) {
  const startTime = Date.now()
  let hasInteraction = false

  // Check for user interaction
  function checkForInteraction() {
    hasInteraction = true
  }

  // Listen for a couple of events to check interaction
  const events = ('keydown', 'mousemove', 'touchstart', 'click')
  events.forEach(event => {
    form.addEventListener(event, checkForInteraction, { once: true })
  })

  // Check for spam via all the available methods
  form.containsSpam = function () {
    const fillTime = Date.now() - startTime
    const isTooFast = fillTime < honeypotDuration
    const honeypotInput = form.querySelector(`(name="${honeypotField}")`)
    const hasHoneypotValue = honeypotInput?.value?.trim()
    const noInteraction = !hasInteraction

    // Clean up event listeners after use
    events.forEach(event =>
      form.removeEventListener(event, checkForInteraction)
    )

    return isTooFast || !!hasHoneypotValue || noInteraction
  }
}

mejor forma

Estoy preparando una solución para hacer que los elementos de formulario HTML sean más fáciles de usar. Contiene los elementos estándar que conoce, pero tiene una sintaxis fácil de usar y es de fácil acceso.

Algo como esto:

• forma
• Mielero
• Entrada de texto
• área de texto
• radio
• caja
• cambiar
• grupo de botones
• ETC.

Esta es una página de destino Si estás interesado en esto. Me encantaría compartir algo contigo pronto.

Resumir

Hoy en día, existen algunos trucos para hacer que los honeypots funcionen. Probablemente, la mejor manera sea engañar a los robots de spam haciéndoles creer que su honeypot es un campo real. Si no desea engañar a los bots, puede utilizar los otros mecanismos de detección de bots que definimos anteriormente.

¡Espero que hayas aprendido mucho y hayas obtenido algo útil!