Detener los bots con Javascript

Resumen rápido

es una técnica práctica para detener el spam, pero también es inaccesible. Usar Javascript para eliminar atributos de formulario críticos, cargar contenido de formulario de forma dinámica y reemplazar los botones de envío puede ser una alternativa efectiva que mantiene la accesibilidad de sus sitios.

Anteriormente había utilizado. NET MVC como marco para el sitio web de CANAXESS. El formulario de contacto tenía que ser accesible y no podía depender de ningún complemento que afectara negativamente la capacidad de un usuario para comunicarse con nosotros. El formulario tenía un campo de formulario oculto CSS utilizando la técnica honeypot y la lógica del lado del servidor que rechazaba todos los envíos si el campo del formulario contenía datos.

La teoría es que los bots no pueden entender qué es un campo legítimo y qué no, por lo que el bot identifica y completa todos los campos de entrada y envía el formulario. Si el campo contiene datos, asumimos que como un usuario no ha podido navegar al campo de formulario oculto, un usuario no ha enviado el formulario y descarta toda la entrada.

Las técnicas de Honeypot siempre se identifican como una forma efectiva de detener los correos electrónicos no deseados y para mí la técnica funcionó bien para reducir el spam a un nivel manejable al día. Dentro de mi cliente de correo, seleccionaría todos los correos electrónicos no deseados y los eliminaría en masa, todo bastante sencillo si consume mucho tiempo.

Pasar a Netlify #

Como parte del cambio de infraestructura, el sitio web de CANAXESS se trasladó a Netlify, lo que significaba que la técnica de filtrado de spam existente en la que se basaba tendría que repensarse, ya que el sitio anterior estaba construido en.NET y alojado en un entorno. NET.

Inicialmente opté por no usar protección contra el spam y solo ver cómo fue. Como era de esperar, las publicaciones de spam llegaron gruesas y rápidas.

Uso de un honeypot #

Netlify proporciona una función de honeypot que sigue la misma técnica de usar un campo de entrada oculto y, si este se rellena previamente, todos los correos electrónicos se envían a la carpeta de correo no deseado.

<form name="contactSubmission" data-netlify="true" 
netlify-honeypot="bot-field">
<input class="actual-hidden" name="bot-field" tabindex="-1">

La técnica funcionó muy eficazmente; ningún correo electrónico legítimo llegó a la carpeta de correo electrónico normal.

Pero la carpeta de spam contaba otra historia. Había páginas de resultados de spam, donde anteriormente podía seleccionar todos los correos electrónicos en masa y eliminar, el enfoque de Netlify significaba que solo se devolvían 10-20 correos electrónicos a la vez con la paginación utilizada para pasar a los siguientes diez correos electrónicos. No había función de eliminación masiva y tuve que eliminar las individuales.

Esto fue increíblemente lento y tedioso. Escribí un bookmarklet de Javascript que esperaba que hiciera más fácil marcar todos los controles de casilla de verificación en la página y eliminar todos los registros.

Desafortunadamente, la lógica de la página no reconocía que mi bookmarklet había interactuado físicamente con cada control y no permitía la selección de todos los correos electrónicos en masa.

Tampoco podía estar seguro de si los correos electrónicos en la carpeta de spam eran falsos positivos, correos electrónicos incorrectamente identificados, lo que significaba que tenía que rastrear todos los correos electrónicos para confirmar.

Descuento de re #

Netlify proporciona Google re e inicialmente consideré su uso ya que los correos electrónicos aumentaban diariamente.

Sin embargo, la percepción de una empresa de accesibilidad web que utiliza un método inaccesible conocido para que las personas se pongan en contacto con ellos no era una buena imagen.

He escrito anteriormente sobre lo terrible que es una técnica para socavar la accesibilidad de un sitio web y pensé que si no podía resolver este problema, qué esperanza hay para los demás.

Decidí programar mi salida.

Hacer que el formulario sea menos atractivo para los bots #

Necesitaba que el formulario de contacto se viera menos como un formulario de contacto y menos atractivo para los bots. Comencé a eliminar el atributo method en el elemento de formulario. Si no hay un atributo method, pensé que el formulario no se podría enviar.

<form name="contactSubmission" data-netlify="true" 
netlify-honeypot="bot-field">

Desafortunadamente, a pesar de que el atributo se eliminó, Netlify aplicó el atributo method de nuevo en el formulario mientras se implementaba el sitio y esto fue algo que no pude controlar.

<form name="contactSubmission" method="post">

Usando jQuery para eliminar un atributo #

Decidí usar Javascript (jQuery) para eliminar dinámicamente el atributo method después de cargar la página. Con el evento jQuery ready, se selecciona el elemento de formulario y se elimina el atributo method.

$(function(){
$("#contactSubmission").removeAttr("method");
});

Luego necesité una forma de agregar el atributo de nuevo al elemento del formulario antes de enviarlo. Tuve que agregarlo de nuevo en una secuencia para asegurarme de que el atributo existe antes de que se envíe el formulario, de lo contrario, el formulario se producirá un error y el usuario se encontrará con un formulario de contacto roto, ¡difícilmente ideal!

Reemplazando el botón enviar #

Además, había decidido eliminar el botón submit también. Calculando si no había un botón submit, el formulario no se puede enviar a través de un navegador sin cabeza (si los spammers usaron esa técnica), ya que se parece menos a un formulario de contacto y más a una colección de campos de entrada.

El envío de formularios se realizaría a través de un elemento regular button solo mediante programación.

<input type="button" value="Contact CANAXESS" 
class="contactForm-button submit">

Agregar el atributo method al enviar #

El botón regular tenía un controlador de eventos click que agregó el atributo method y el valor al elemento form.

Cuando se hace clic en el botón, se agrega el atributo, pero puede haber casos en los que la sincronización de los elementos del script ocurre de forma contraria a lo que quería.

Para superar esto, agregué un intervalo de temporizador. Esto comprueba repetidamente el elemento de formulario para el atributo method cada 100 milisegundos, si no existe el atributo method, el formulario no se envía.

$("input.contactForm-button").click(function(){
$("#contactSubmission").attr("method", "post");
var checkExist = setInterval(function(){ 
var attr = $("#contactSubmission").attr("method");
if (typeof attr !== typeof undefined && attr !== false)
{
$("#contactSubmission").submit();
clearInterval(checkExist);
}
}, 100);
});

El envío de formularios solo se produce cuando existe el atributo method, y esto ocurriría mediante programación. Una vez enviado el formulario, el temporizador de intervalos finalizaría.

clearInterval(checkExist);

Pensé que esta era una forma bastante efectiva de diseñar un formulario de contacto para detener bots, pero mi confianza no iba a durar. Volví unas horas más tarde para encontrar correos electrónicos no deseados que se estaban recopilando de nuevo.

El envío de formularios se realiza a través de HTTP #

Y luego me di cuenta, los bots probablemente ni siquiera visitan la página a través del navegador, no les importa todo el script jQuery que se ejecuta en el lado del cliente eliminando elementos.

El atributo method existe cuando se carga la página, y desde allí es un simple raspado del HTML y el envío del formulario a través de una publicación HTTP sin interactuar con la página.

Y esta comprensión fue la que me hizo identificar la técnica que no sólo frenar el spam de correo electrónico, pero en detenerlos. Desde que aplicé esta técnica no he tenido correos electrónicos, ninguno, nada.

Separar la página del formulario #

La técnica consiste en cargar el fragmento del formulario a través de Javascript después de que la página se haya cargado. Darse cuenta de que los robots de spam probablemente no están usando un navegador sin cabeza para navegar por la página de contacto y enviar el formulario, en su lugar, hice que el formulario solo apareciera cuando la página se cargó desde un navegador.

La página de contacto representada en el navegador es una página, pero en realidad se compone de dos partes. La página principal con un marcador de posición para el componente del formulario y el contenido del formulario en sí.

<div></div>

Cargar el formulario en la página cargar #

Cuando se carga la página, un evento listo para jQuery carga el fragmento de formulario adicional en el contenedor de formulario DIV casi de inmediato.

La página de fragmento de formulario nunca es identificada por un bot, ya que la página inicial que el bot está viendo no tiene ningún elemento de formulario, esto solo se carga después de que la página se haya cargado a través de Javascript.

<script>
$(function(){
$("#formContainer").load("formfragment.html");
});
</script>

En resumen #

La técnica requiere Javascript para funcionar. Como Javascript se ha convertido en una parte aceptada del desarrollo web, creo que es una solución realista para detener el spam en ciertas situaciones específicas.

La otra técnica de usar campos honeypot siempre es problemática, ya que desde mi experiencia no fue tan efectiva.

El spam todavía encontraría una forma de pasar y, si soy honesto, la técnica del honeypot solo se puede clasificar como un limitador de spam, lo que reduce las instancias de que el spam llegue.

Aunque su uso funcionaría y sería una solución rápida, su uso está socavando la accesibilidad de la web para personas con discapacidades.

Al eliminar el formulario de contacto de ser renderizado como parte de una solicitud HTTP get regular, su visibilidad para los bots parece reducirse significativamente y, por lo tanto, reduce (y en mi caso ha detenido) que los bots puedan enviar spam a través del formulario de contacto.

Cosas que puedes probar #

Independientemente del marco de trabajo que esté utilizando tu sitio, si tu formulario de contacto se ve comprometido por el spam, prueba estos enfoques:

• Separe la página y el formulario
• Cargue el formulario después de que la página se haya cargado
• Solo envíe formularios mediante programación utilizando button elementos
• Elimine el atributo method en los formularios y añádalos como parte del envío del formulario