últimoartículo
Formulario Anti-SPAM con Javascript y Mootools
23.11.2007Últimamente está muy de moda utilizar los formularios de contactos o formularios de envío de comentarios a blogs para hacer SPAM dejando direcciones de sitios en busca de publicidad gratuita. Por otro lado tenemos a los usuarios que usan los formularios para desahogarse y desatar su ira con palabras obscenas que luego los webmasters tienen que sufrir.
Para solucionar esto les propongo un script sencillo que nos puede ayudar a prevenir algunos de estos dolores de cabeza. En este post no estoy ofreciendo un componente, solo un pedazo de código javascript que podemos integrar en nuestra web con conocimientos básicos de programación javascript.
Aunque los chequeos que hace el script son bastante triviales me he auxiliado de la poderosa biblioteca de Mootools para añadir unos toques de efectos visuales y para valerme de su facilidad para gestionar los eventos.
Para utilizar este código necesitarían descargarse Mootools e incluirlo en la página.
<script type=”text/javascript” src=”js/mootools-release-1.11.js”></script>
En el HTML debe haber una capa donde notificaremos en caso de detección de SPAM.
//message es el id de algun textarea dentro de nuestro formulario
//<textarea cols="50"></textarea>
var txt = $('message');
//log_div es el id de una capa donde mostraremos los posibles errores
//<div></div>
var log = $('log_div');
//Añadimos un efecto al div donde mostraremos los errores
var fx = new Fx.Styles(log, {
duration: 3500,
wait: false,
transition: Fx.Transitions.Quad.easeOut
});
//Añadiendo eventos al textarea
txt.addEvents({
//On Focus
//Si queremos cambiar el color de background cuando se seleccione
//O si queremos eliminar el texto por defecto
'focus': function() {
if (txt.value.contains('escribe tu mensaje...')) txt.value = '';
//Cambiando color de background
txt.setStyle('background','none #6F6F6F');
},
//On Keyup
//Chequeamos que no halla codigo malicioso ni palabra obscenas
'keyup': function() {
//Convertimos todo a minúsculas
var text = txt.value;
text = text.toLowerCase();
//Chequeando que no se escriban direcciones en el mensaje
var regexp = /(ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?/
var x = regexp.test(text);
//Por lo menos que no aparezca nada que comience con www
var regexp2 = /(www)/
var y = regexp2.test(text);
//Si algunos de los chequeos anteriores dió positivo notificamos en el evento de que hay SPAM
if (x==true || y==true){
//Ejecutamos el evento de notificacion de SPAM
txt.fireEvent('burn', 'No se permiten direcciones web!');
txt.value = txt.value.replace("www","");
txt.value = txt.value.replace("http://","");
}
//Chequeamos que no se utilicen tags de html
if(txt.value.contains("")){
txt.value = txt.value.replace(">","");
//Ejecutamos el evento de notificacion de SPAM
txt.fireEvent('burn','Eliminando caracteres potencialmente peligrosos');
}
//Diccionario de palabras no deseadas
words = new Array("viagra","fuck","cialis","porno");
//Chequeamos que no aparezcan ninguna de las palabras anteriores
for(var i=0; i &lgt; words.length; i++){
if(txt.value.contains(words[i])){
txt.fireEvent('burn','SPAM reconocido');
txt.value = txt.value.replace(words[i],'');
}
}
},
//On Burn
//Este es un tipo de evento creado por nosotros que ejecutaremos siempre que se encuentra un SPAM
'burn': function(text) {
//Insertamos el texto el el div donde se muestran los errores
log.setHTML(text);
//Ejecutamos el efecto para que haga una transición de opacidad
fx.start({
//'background-color': ['#990000', '#fff'],
'color': ['#ff9c66', '#101b21'],
'opacity': [1, 0]
});
}
});
Para ver un ejemplo funcionando pueden ir a la página de mi empresa equipo24 e ir a la sección de Contacto y probar algunas palabras como “viagra” o “porno”.
Espero que les sea útil.
El Diccionario de la Real Academia de la Lengua Española define CHULETA (3ª acepción) como entre estudiantes, nota o papelito que se lleva oculto para consultarlo disimuladamente en los exámenes.
Andaba con bastantes ganas de olvidarme de Dreamweaver desde hace un tiempo. No utilizo la vista de diseño nunca, puesto que rara vez lo que muestra Dreamweaver se corresponde con lo que se pueda luego ver en alguno de los distintos navegadores, y además el tiempo de carga de la aplicación es enorme, así que ayer estuve un buen rato mirando editores de código para OS X buscando mi futura nueva herramienta de trabajo. Descartando los WYSIWYG como 
Desde 1997, 
En la página de 
