Tienes ya tu web lista, perfectamente diseñada y con horas de trabajo detrás. La pones en marcha con toda la ilusión del mundo y, cuando recibes y abres ilusionado tu primer formulario de conversión, lo que encuentras es un mensaje en ruso o turco del que no alcanzas a entender ni su estructura. ¿Te suena? Tranquilo, no estás solo.
¿Por qué a mi? ¿Por qué me llega SPAM?
El envío de mensajes publicitarios o fraudulentos en masa es más antiguo casi que la propia red, pero a pesar de ello sigue siendo más habitual de lo que a todos nos gustaría. Generalmente se realizan de forma automática por bots que buscan o bien inundar de publicidad media web o bien con intereses más oscuros. Porque sí, el spam no solo es un incordio; puede ser también peligroso y contener enlaces maliciosos o tentativas de phishing. Y, claro, llegados a este punto, te preguntarás…
¿Qué es el Phishing?
El phishing es un tipo de estafa en la red en la que el atacante intenta engañar al usuario a través de un email, sms etc. A través del cual busca obtener datos o información sensible: datos bancarios, personales, datos secretos de la compañía…
En definitiva, el spam en formularios es una práctica con la que lamentablemente nos vamos a encontrar con frecuencia y que además de ser molesta puede ser peligrosa. Es por ello necesario contar con herramientas para poder bloquear a los bots encargados de enviarlo o para que la web pueda automáticamente filtrar y desechar los formularios tóxicos. Y ese es el objetivo de este artículo.
¿Qué es un honeypot y cómo incluirlo en mi web?
La primera de las herramientas y una de las más comúnmente utilizadas es el honeypot. Se trata simplemente de una ‘trampa’ para los bots, un campo ficticio oculto para los usuarios web que incluimos en el formulario y que, por tanto, nadie salvo un bot que lo vea en el código podrá cumplimentar.
De este modo, el servidor es capaz de discernir qué formularios desechar (todos aquellos en los que se el campo ‘honeypot’ está relleno).
Cómo Incluir un Honeypot en Elementor
Añadir un Honeypot en Elementor es un proceso muy sencillo, con lo que merece la pena probarlo. Basta con seleccionar el formulario donde queremos incluir el honeypot y añadir un nuevo campo de tipo ‘Honeypot’ que ya viene predefinido:
Incluir un honeypot en contact Form
Para ContactForm, lo mejor es utilizar un plugin adicional, ya que no incluye la opción de añadir un honeypot de forma nativa. Este, por ejemplo, es uno de los más utilizados:
Una vez descargado y activado, deberemos acceder a uno de nuestros formularios e introducir este código en cualquier parte del mismo:
[honeypot honeypot-field]
Sencillo, ¿No?
Incluir un honeypot en wpform
Si te ha parecido sencillo incluir un honeypot en elementor o contactform, entonces hacerlo con wpform te parecerá tirado, porque ya viene incluido por defecto. Puedes activarlo / desactivarlo en el campo Settings – General, pero por defecto la opción “Enable anti-spam honeypot” viene activada para dotar de una capa adicional de seguridad a tus formularios.
Incluir un honeypot en una web HTML
Si no utilizas un CMS como WordPress y quieres incluir un honeypot en el código HTML de tu página, una forma posible de hacerlo sería la siguiente:
<form method=»POST» action=»procesar.php»>
<input type=»text» name=»nombre» placeholder=»Tu nombre» required>
<input type=»email» name=»email» placeholder=»Tu email» required>
<textarea name=»mensaje» placeholder=»Tu mensaje» required></textarea>
<!– Campo honeypot oculto con CSS –>
<div style=»display:none;»>
<label>Si ves esto, déjalo vacío</label>
<input type=»text» name=»website» autocomplete=»off»>
</div>
<button type=»submit»>Enviar</button>
</form>
En el nombre del campo, utiliza algo poco sospechoso tipo ‘website’, ‘url’, ‘phone2’ etc.
No uses type = “hidden” ya que los bots suelen ignorarlo.
Ventajas de Incluir Honeypot en los Formularios
Se trata de una medida de seguridad sencilla que podemos implementar en poco tiempo en nuestros formularios. La implementación, a diferencia de reCAPTCHA por ejemplo, es invisible para el usuario, lo que ofrece siempre una mejor UX. El usuario no tendrá que realizar ninguna acción más que enviar el formulario de la manera habitual.
Se trata además de una solución ligera. Como veremos más adelante, soluciones como reCAPTCHA son soluciones más pesadas que pueden llegar a ralentizar la velocidad de la web. Con un honeypot no tendremos por qué preocuparnos de la velocidad de la web
¿Qué es reCAPTCHA?
Otra opción para proteger formularios de envíos fraudulentos o spam es la inclusión de reCAPTCHA en los mismos. Se trata de un servicio de Google diseñado específicamente para este fin, permitiendo detectar si quien está interactuando con un formulario es un humano o un robot.
Tipos de reCAPTCHA
En función de la tecnología que implementan y cómo interactúan con el usuario, actualmente hay fundamentalmente tres versiones diferentes de reCAPTCHA:
v2: Típica Casilla de ‘No soy un Robot”, que puede incluir el ‘juego’ de tener que elegir entre diferentes imágenes (p. ejemplo semáforos, coches etc.)
v2 Invisible: Funcionamiento similar al v2 pero sin mostrar casilla o similar al usuario.
v3: La última versión disponible hasta la fecha (publicada ya en 2018) funciona de un modo distinto. En vez de realizar una prueba al usuario para discernir si se trata de un humano o de un bot, en palabras de la propia Google, investiga la actividad que ha tenido un usuario en diferentes páginas de tu sitio web y puede identificar patrones de atacantes de forma más precisa. Con v3 el sistema evalúa con una puntuación de riesgo las interacciones de la web y asigna un valor del 0 al 1 en base al comportamiento del usuario que permite entrever qué probabilidad hay de que se trate de un bot. En función de cómo
Entonces, ¿Es mejor reCAPTCHA v3 que v2?
Cada versión de reCAPTCHA, como hemos visto, tiene sus ventajas y sus inconvenientes. Por lo tanto, decantarse por una u otra opción dependerá en gran medida de las necesidades concretas del proyecto o web que tengamos entre manos.
Como usuarios llevamos mucho tiempo conviviendo con reCAPTCHA v2 por lo que la experiencia de UX, aunque empeore, no lo hace de forma dramática.
La v3 de reCAPTCHA no interfiere en modo alguno con la UX, pero su funcionamiento puede llegar a ser algo más errático dependiendo de la puntuación de riesgo que asignemos.
Cómo Configurar reCAPTCHA en WordPress
Para configurar reCAPTCHA, deberemos acceder a Google Cloud y crear un nuevo proyecto. Lo mejor para ello es hacerlo a través de esta URL.
Una vez dentro, deberemos escoger qué versión queremos implementar, introducir el dominio que queremos proteger, darle un nombre al proyecto nuevo de Google Cloud Platform y darle a enviar. Sencillo, ¿No?
La herramienta automáticamente generará las dos claves (API KEY y SECRET KEY) que deberemos usar en el constructor que tengamos en la web para terminar de configurarlo:
Cómo Incluir reCAPTCHA en Elementor
Incluir ReCaptcha en Elementor es muy sencillo. Basta con acceder a la sección de Ajustes > Integraciones e introducir la ApiKey y la SecretKey que nos ha proporcionado la herramienta:
En función de si el reCAPTCHA que hemos configurado era de v2 o v3, rellenaremos una u otra sección de Elementor.
Por último, deberemos crear un campo de reCAPTCHA en el formulario que queramos proteger, de nuevo con una u otra opción dependiendo del tipo de versión escogida:
Cómo incluir reCAPTCHA en wpForm
El procedimiento con Wpform es muy similar. Tiene también una sección de reCAPTACHA dentro de su pestaña de ajustes donde deberemos incluir las claves obtenidas:
Como en el caso anterior con Elementor, deberemos aplicar la protección en los formularios que queramos a través de un campo nuevo:
Configurar reCAPTCHA en Contact Form
El proceso de configuración de reCAPTCHA en Contact form sería igual:
- Acceder a Contact > Integración
- En sección reCAPCTHA, hacer click en ‘Configurar Integración”
- Introducir las claves
- Ahora, dependiendo si estás usando reCAPTCHA v3 o v2:
Para v3 (invisible, sin checkbox): no necesitas añadir nada en el formulario, ya se activa automáticamente.
Para v2 («No soy un robot» checkbox): debes añadir manualmente el shortcode [recaptcha] en tu formulario, donde quieras que salga el captcha.
Una última recomendación: Validar reCAPTCHA
Es habitual que, una vez configurada la herramienta, desde la propia herramienta de Google Cloud se nos pida validar la implementación de reCAPTCHA a través de una solicitud POST
Esto, usando las diferentes alternativas que hemos visto a lo largo del artículo, no es necesario. Tanto Elementor como wpForms o ContactForm validarán la integración de forma automática. No obstante, como siempre es recomendable confirmar que nuestro trabajo no ha sido en balde, es recomendable realizar un envío de prueba a través de uno de los formularios protegidos con reCAPTCHA para confirmar que que el estado del proyecto reCAPTCHA en Google Cloud pasa a ‘Habilitado’.
