Hoy en día, los CAPTCHA son una parte integral de la seguridad del sitio web. Millones de pruebas CAPTCHA se completan en línea todos los días.

Si no ha implementado la validación CAPTCHA en su sitio web, podría crearle un gran problema, configurándolo como un objetivo para los spammers.

---

---

Aquí encontrará todo lo que necesita saber sobre CAPTCHA y cómo puede implementarlos fácilmente en su sitio web utilizando HTML, CSS y JavaScript.

¿Qué es CAPTCHA?

CAPTCHA significa 'Prueba de Turing pública completamente automatizada para diferenciar a las computadoras de los humanos'. Este término fue acuñado en 2003 por Luis von Ahn, Manuel Blum, Nicholas J. Hopper y John Langford. Es un tipo de prueba de desafío-respuesta que se utiliza para determinar si el usuario es humano o no.

Los CAPTCHA agregan seguridad a los sitios web al proporcionar desafíos que son difíciles de realizar para los bots pero relativamente fáciles para los humanos. Por ejemplo, identificar todas las imágenes de un automóvil a partir de un conjunto de imágenes múltiples es difícil para los bots, pero lo suficientemente simple para los ojos humanos.

La idea de CAPTCHA se origina en la Prueba de Turing. Una prueba de Turing es un método para probar si una máquina puede pensar como un humano o no. Curiosamente, una prueba CAPTCHA puede denominarse 'prueba de Turing inversa', ya que en este caso, la computadora crea la prueba que desafía a los humanos.

¿Por qué su sitio web necesita validación CAPTCHA?

Los CAPTCHA se utilizan principalmente para evitar que los bots envíen automáticamente formularios con spam y otros contenidos dañinos. Incluso empresas como Google lo utilizan para evitar que su sistema sufra ataques de spam. Estas son algunas de las razones por las que su sitio web puede beneficiarse de la validación CAPTCHA:

---

---

• Los CAPTCHA ayudan a evitar que los piratas informáticos y los bots envíen spam a los sistemas de registro creando cuentas falsas. Si no se previenen, pueden usar esas cuentas con fines nefastos.
• Los CAPTCHA pueden prohibir los ataques de inicio de sesión de fuerza bruta desde su sitio web que los piratas informáticos utilizan para intentar iniciar sesión con miles de contraseñas.
• Los CAPTCHA pueden impedir que los bots envíen spam a la sección de revisión proporcionando comentarios falsos.
• Los CAPTCHA ayudan a prevenir la inflación de los boletos, ya que algunas personas compran una gran cantidad de boletos para revenderlos. CAPTCHA incluso puede evitar registros falsos a eventos gratuitos.
• Los CAPTCHA pueden impedir que los delincuentes cibernéticos envíen spam a blogs con comentarios poco fiables y enlaces a sitios web dañinos.

Hay muchas más razones que respaldan la integración de la validación CAPTCHA en su sitio web. Puede hacerlo con el siguiente código.

wifi no tiene una dirección IP válida

Código HTML CAPTCHA

HTML, o HyperText Markup Language, describe la estructura de una página web. Utilice el siguiente código HTML para estructurar su formulario de validación CAPTCHA:

---

---

|_+_|

Este código consta principalmente de 7 elementos:

• : Este elemento se utiliza para mostrar el encabezado del formulario CAPTCHA.

• : Este elemento se utiliza para mostrar el texto CAPTCHA.
• - Este elemento se utiliza para crear un cuadro de entrada para escribir el CAPTCHA.
• : Este botón envía el formulario y comprueba si el CAPTCHA y el texto escrito son iguales o no.
• : Este botón se usa para actualizar el CAPTCHA.
• : Este elemento se utiliza para mostrar la salida de acuerdo con el texto ingresado.
• : Este es el elemento padre que contiene todos los demás elementos.

Los archivos CSS y JavaScript están vinculados a esta página HTML a través del y elementos respectivamente. Debes agregar el Enlace etiqueta dentro de la cabeza etiqueta y texto etiqueta al final de la cuerpo .

También puede integrar este código con formularios existentes de su sitio web.

Relacionado: La hoja de referencia de HTML Essentials: etiquetas, atributos y más

Código CSS CAPTCHA

CSS, o hojas de estilo en cascada, se utiliza para diseñar elementos HTML. Utilice el siguiente código CSS para diseñar los elementos HTML anteriores:

|_+_|

Agregue o elimine propiedades CSS de este código según sus preferencias. También puede dar un aspecto elegante al contenedor de formularios utilizando el Propiedad de sombra de cuadro CSS .

Código CAPTCHA de JavaScript

JavaScript se utiliza para agregar funcionalidad a una página web que de otro modo sería estática. Use el siguiente código para agregar funcionalidad completa al formulario de validación CAPTCHA:

|_+_|

¡Ahora tiene un formulario de validación CAPTCHA completamente funcional! Si desea ver el código completo, puede clonar el Repositorio de GitHub de este proyecto CAPTCHA-Validator . Después de clonar el repositorio, ejecute el archivo HTML y obtendrá el siguiente resultado:

cómo usar el iphone x

Cuando ingrese el código CAPTCHA correcto en el cuadro de entrada, se mostrará el siguiente resultado:

Cuando ingresa un código CAPTCHA incorrecto en el cuadro de entrada, se mostrará el siguiente resultado:

Haga que su sitio web sea seguro con CAPTCHA

En el pasado, muchas organizaciones y empresas han sufrido grandes pérdidas como violaciones de datos, ataques de spam, etc., como resultado de no tener formularios CAPTCHA en sus sitios web. Se recomienda encarecidamente agregar CAPTCHA a su sitio web, ya que agrega una capa de seguridad para evitar que el sitio web los ciberdelincuentes.

Google también lanzó un servicio gratuito llamado 'reCAPTCHA' que ayuda a proteger los sitios web del spam y el abuso. CAPTCHA y reCAPTCHA parecen similares, pero no son exactamente lo mismo. A veces, los CAPTCHA se sienten frustrantes y difíciles de entender para muchos usuarios. Aunque, hay una razón importante por la que se hacen difíciles.

Cuota Cuota Pío Correo electrónico ¿Cómo funcionan los CAPTCHA y por qué son tan difíciles?

Los CAPTCHA y reCAPTCHA evitan el spam. ¿Cómo trabajan? ¿Y por qué encuentra CAPTCHA tan difíciles de resolver?

Leer siguiente Temas relacionados

• Programación
• HTML
• JavaScript
• CSS

Sobre el Autor Yuvraj Chandra(60 Artículos publicados)

Yuvraj es estudiante de licenciatura en Ciencias de la Computación en la Universidad de Delhi, India. Le apasiona el desarrollo web Full Stack. Cuando no está escribiendo, está explorando la profundidad de diferentes tecnologías.

Más de Yuvraj Chandra

Suscríbete a nuestro boletín

¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!

Haga clic aquí para suscribirse