Evitar spam en formularios mediante Javascript

ByLuis

Buen método para evitar spam en los formularios sin la necesidad de CAPTCHA. Se trata de añadir mediante javascript eventos al formulario que detectan el uso por parte de humanos: focus y click.
Cuando un usuario quiere rellenar el formulario, uno de esos eventos debe lanzarse, por lo que mediante javascrip se añade un valor específico a un input tipo hidden que es el que usaremos para saber si el usuario es un robot o una persona.
En el caso de no tener javascript habilitado (navegadores de algún móvil o lectores de texto para invidentes), mediante la etiqueta NOSCRIPT añadiremos un campo que añada una pregunta tipo: “cuanto son dos más siete”, que sustituirá al captcha.
Invisible Human Check for Web Form Validation
Gracias Gerardo por el aviso

Similar Posts

|

Laboratorio: navegación por teclado

ByLuis

Ya en varios sitios se ha mostrado como realizar la navegación mediante el teclado, esto significa usar las teclas para acceder a contenidos o para realizar acciones.

Nosotros queremos darle un toque de automatización, que tan solo sea necesario añadir un enlace interno en el documento para acceder a la zona del documento.

Crearemos un script que obtenga todos los enlaces internos del documento y si tienen el atributo rel y su valor tiene el formato “formato:[letra]“, se considerará un objetivo para la navegación por teclado. La letra será la que se usará para acceder y pueden repetirse, por lo que si se repiten las teclas para el shortcut, se irán alternando uno a uno los distintos enlaces.

El script consta de dos partes, uno que se ejecuta después de la carga del documento y que recupera todos los enlaces internos y los agrupa por shortcut, y otro que captura el evento onkeydown del document para acceder a la zona del documento (que será modificando el location).

var __SHORTCUTS__ = {
// Guarda los shortcuts con los enlaces
shortcuts: new Array(),
// Índice del enlace actual organizado por shortcuts
idx_shortcuts: new Array(),
// Obtiene todos los enlaces internos y los que corresponden a un shortcut los almacena
leer_shortcuts: function(e) {
var objs = document.getElementsByTagName("A");
for (var i=0; i<objs.length; i++) {
var rel = objs[i].rel;
if (rel && rel.match(/shortcut:[a-z]/i) && objs[i].name) {
var tipo = (rel.substring(rel.indexOf(":")+1)+"").toUpperCase().substring(0, 1);
if (!__SHORTCUTS__.shortcuts[tipo]) {
__SHORTCUTS__.shortcuts[tipo] = new Array();
__SHORTCUTS__.idx_shortcuts[tipo] = 0;
}
__SHORTCUTS__.shortcuts[tipo][__SHORTCUTS__.shortcuts[tipo].length] = objs[i];
}
}
// Capturo el evento de pulsado de teclado en el document
document.onkeydown = __SHORTCUTS__.controlar_keypress;
},
// Captura una tecla pulsada y accede al shortcut que tenga asociado
controlar_keypress: function(e) {
try {
if (!e) e = event;
var key = e.keyCode;
// Obtengo el caracter correspondiente, quizás esto falle, no he hecho pruebas suficientes
var c = String.fromCharCode(key);
// Si es una letra
if (c.match(/^[a-z]$/i)) {
// Obtengo el enlace para el shortcut
var obj = __SHORTCUTS__.shortcuts[c.toUpperCase()][__SHORTCUTS__.idx_shortcuts[c.toUpperCase()]];
// Acceso a esa parte del documento
document.location = "#"+obj.name;
// Incremento el indice para que acceda al siguiente
__SHORTCUTS__.idx_shortcuts[c.toUpperCase()] = (__SHORTCUTS__.idx_shortcuts[c.toUpperCase()]+1)%__SHORTCUTS__.shortcuts[c.toUpperCase()].length;
}
} catch (e) {} // En IE me da un error que no llego a comprender, ¡cómo no!
}
}
// Cargo el proceso en el onload
if (window.addEventListener) {
window.addEventListener("load", function(event) {__SHORTCUTS__.leer_shortcuts(event);}, false);
} else if (window.attachEvent) {
window.attachEvent("onload", function(event) {__SHORTCUTS__.leer_shortcuts(event);});
} else {
document.onload = function(event) {__SHORTCUTS__.leer_shortcuts(event);}
}

Para indicar qué elementos tienen shortcut, modificamos los estilos para mostrar subrayada la primera letra del elemento, para lo cual el elemento debe tener el atributo title con valor “SHORTCUT: [letra]“. Mejorando así la accesibilidad ya que no añadimos ninguna etiqueta para la primera letra. Por supuesto en IE6 no funciona y con la etiqueta legend tampoco me funciona.

*[title~="SHORTCUT:"]:first-letter {
padding-bottom: 2px;
border-bottom: 1px dotted #000000;
}

Para este ejemplo tenemos dos tipos de shortcuts: ‘P’ para ciertos párrafos y ‘C’ para acceder al formulario de comentarios.

Ejemplo

| | |

Cambiar el tamaño de letra dinámicamente

ByLuis

font-size de Elmundo.es

Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.

Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aumentar o reducir el tipo de letra, o de forma fija, aumentando el tamaño de la letra y disminuyéndolo, pero solo a unos tamaños prefijados.

Read More “Cambiar el tamaño de letra dinámicamente”

Hapi.js + Vue.js modelos mejorados

Hapi.js + Vue.js modelos mejorados

ByLuis

En este caso voy a explicar cómo añadir una ruta en el backend para gestionar usuarios.

Antes de nada vamos a instalar tres paquetes:

  • @hapi/joi para validar los datos de entrada
  • @hapi/boom para mostrar errores HTTP de forma sencilla
  • bcrypt para encriptar la contraseña
npm i @hapi/joi
npm i @hapi/boom
npm i bcrypt

Tendremos que añadir la ruta al manifest de glee

const manifest = {
	server: {
		port: Config.get( '/server/port' ),
	},
	register: {
		plugins: [
			{
				plugin: './api/home',
			},
			{
				plugin: './api/user',
			},
			{
				plugin: './plugins/db',
				options: Config.get( '/db' ),
			},
		],
	},
};

Ahora solo falta crear el controlador para las rutas de usuarios, dos en este caso:

  • GET /user/[user] para recuperar un usuario
  • PUT /user para crear un nuevo usuario

Lógicamente aún no hay nada de autenticación, por lo que cualquiera puede crear un usuario realizando una llamada PUT a la URL indicando userName, email y password.

Para comprobar la validez de los datos introducidos, usaremos joi. Usando las opciones de la ruta, indicaremos las reglas que deberá cumplir cada parámetro introducido. Así, para recuperar un usuario, se comprobará que user sea string, alfanumérico y que tenga una longitud de 3 a 20 caracteres:

validate: {
	params: {
		user: Joi.string().alphanum().min( 3 ).max( 20 ),
	},
},

Así de fácil.

En el caso de comprobar los datos de entrada de la llamada PUT, en vez de usar params, usaremos payload:

validate: {
	payload: {
		userName: Joi.string().alphanum().min( 3 ).max( 20 ).required(),
		email: Joi.string().email().required(),
		password: Joi.string().min( 8 ).required(),
	},
},

Por último mostrar el código para crear un nuevo usuario. Primero se comprueba si existe un usuario con ese nickname o email. Si es así, se devuelve error usando boom, si no, se genera la contraseña encriptada (aquí no me he molestado mucho en ello, ya lo haré más adelante), y se crea el usuario usando el método create de moongose:

/**
 * Route handler
 *
 * @param {object} request
 * @param {object} h Hapi object
 * @returns {object}
 */
handler: async( request, h ) => { // eslint-disable-line
	try {
		// TODO: Add role
		const user = await User
			.findOne( {
				$or: [
					{ userName: request.payload.username },
					{ email: request.payload.email },
				],
			} )
			.exec();
		if ( user ) {
			return Boom.badData( 'User exists' );
		}
		const password = await bcrypt.hash( request.payload.password, Config.get( '/hash/PASSWORD_HASH' ) );
		const userData = Object.assign( {}, request.payload, { password } );
		const newUser = await User.create( userData );

		return newUser ?
			{
				response: true,
				message: 'User created',
				userId: newUser.id,
			} :
			Boom.boomify( {
				response: false,
				message: 'There was an error during user creation',
			}, { statusCode: 400 } );
	} catch ( error ) {
		return Boom.badImplementation( 'Error', { error } );
	}
},

Como último apunte, he modificado la configuración para que admita ficheros .env con los datos necesarios.

Como siempre te puedes bajar el código aquí

Dividir un texto mediante DOM en Javascript

ByLuis

Os voy a pasar un pequeño script que nos dividiría un elemento de texto HTML (TEXT_NODE) en distintas partes. Quizás os pueda resultar un script extraño, pero se puede usar poner en negrita palabras o alguna otra cosa, yo en mi caso ya le he encontrado utilidad un par de veces y ahora estoy usándolo otra vez en algo que os contaré más adelante (espero que dentro de poco tiempo).

Imaginaros que tenemos un elemento HTML que es realmente un nodo de texto (pensad en DOM, no en innerHTML), por ejemplo:

var elem = document.createTextNode('Esto es una prueba');
document.body.appendChild(elem);

Ahora queremos cambiar “es una” por “es una“. Lo que tendríamos que hacer es dividir en texto en tres partes “Esto “, “es una”, ” prueba”, crearemos tres objetos de texto, cada una con cada trozo de texto y luego un elemento STRONG en el que incluiremos el texto del medio. Por último incluimos los elementos nuevos y eliminamos el anterior.

// Obtenemos primera parte de texto
var parte = elem.nodeValue.substring(0,
elem.nodeValue.indexOf("es una"));
// Creamos elemento de texto con contenido "Esto "
var obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Obtenemos segunda parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una"), elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Lo añadimos a un objeto STRONG
var negrita = document.createElement("STRONG");
negrita.appendChild(obj);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(negrita, elem);
// Obtenemos tercera parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Eliminamos elemento anterior
elem.parentNode.removeChild(elem);

Listado de scripts CAPTCHA

ByLuis

Aunque el otro día desarrollábamos un script para mostrar un CAPTCHA, hoy os pasamos una lista de scripts desarrollados por otras personas: