bWAPP, Aprende y Practica Seguridad Web Con Esta Aplicación

bWAPP ayuda a entusiastas de la seguridad, desarrolladores y estudiantes a descubrir y prevenir vulnerabilidades web. bWAPP prepara para llevar a cabo pruebas de intrusión y proyectos de hacking ético con éxito.

Pero ¿qué hace bWAPP tan único? Bueno, tiene más de 60 bugs web! Cubre todas las principales vulnerabilidades web conocidas, incluyendo todos los riesgos del proyecto OWASP Top 10.

bWAPP es una aplicación PHP que utiliza una base de datos MySQL. Puede ser alojada en Linux y Windows utilizando Apache/IIS y MySQL. Se puede instalar con WAMP o XAMPP.

Otra posibilidad es descargar bee-box, una VM personalizada pre-instalada con bWAPP.

Este proyecto es parte del proyecto ITSEC GAMES. ITSEC GAMES es un enfoque divertido para la educación de TI de seguridad. Seguridad informática, hacking ético, la formación y la diversión … todo mezclado.

Algunas características de esta suite:

  • Injection vulnerabilities like SQL, XML/XPath, SSI, LDAP, HTML, CMD and SMTP injection
  • Cross-Site Scripting (XSS), Cross-Site Tracing (XST) and Cross-Site Request Forgery (CSRF)
  • Unrestricted file uploads and backdoor files
  • Authentication, authorization and session management issues
  • Arbitrary file access and directory traversals
  • Local and remote file inclusions (LFI/RFI)
  • Configuration issues: Man-in-the-Middle, Cross-domain policy file, information disclosures,…
  • HTTP parameter pollution and HTTP response splitting
  • Denial-of-Service (DoS) attacks
  • HTML5 ClickJacking, Cross-Origin Resource Sharing (CORS) and web storage issues
  • Unvalidated redirects and forwards
  • Parameter tampering
  • Insecure cryptographic storage
  • Server Side Request Forgery (SSRF)
  • HTTP verb tampering
  • AJAX and Web Services issues (JSON/XML/SOAP)
  • Local privilege escalation
  • Cookie poisoning
  • PHP CGI remote code execution
  • Insecure WebDAV and FTP configurations
  • XML External Entity Attacks (XXE)
  • Fuzzing possibilities
  • Form-based authentication and No-authentication modes
  • and much more…
Web Oficial – bWAPP
Web del proyecto – Sourceforce

 

Detectar el país de origen del visitante web con JQuery

Un método bastante sencillo para detectar el país (sin necesidad de utilizar alguna clase php o similares) del usuario que esta entrando en nuestra web, es usando la API de wipmania. Este es un servicio web gratuito de Geolocalizacion ip (ademas cuenta con un plugin para firefox por si a alguien le interesa xD), por medio de jQuery realizaremos una consulta a este servicio y obtendremos unos cuantos parámetros como son: latitud, longitud, zoom, dirección, ciudad, país, código del país, región.

Si copiamos y pegamos en nuestro navegador directamente la url “http://api.wipmania.com/jsonp?callback=?” notaremos de inmediato como retorna información utilizable para cumplir con el objetivo de geo referenciación. Ya solo hace falta utilizar JSON para recuperar los con jQuery de la siguiente forma:

Para conocer mas parámetro deben visitar la pagina del api de wipmania, deben recordar que es un servicio gratuito por lo que tendrá mas de algunas limitación, específicamente la cantidad de consultas que podemos realizar, pero para pequeños proyectos no esta nada mal y si les interesa el servicio pueden adquirir una membresía profesional o corporate.

Obtener dirección IP con jQuery

Si queremos conocer nuestra dirección IP mediante jQuery podemos utilizar la función getJSON, esta hace una petición de datos al servidor que retorna la información con notación JSON.

Para llevar a cabo esto utilizaremos un servicio gratutio disponible en http://getjsonip.com

Función para mostrar ip con jQuery:

Pueden probar ingresando directamente la dirección http://jsonip.com?callback=? en su navegador y veran como retorna la ip en notación json, asi con la función descrita arriba podrán usarla en sus aplicaciones web, mobile o para probar en ambientes de desarrollo.

espero les sea útil.

Formulario multi pasos con CSS y Jquery

Vamos a ver la forma de crear una sencillo formulario  del tipo multipaso, muy útil cuando tenemos formularios muy extensos o con demasiados campos, utilizaremos Jquery easing para animar la transición de las diferentes etapas o partes de las que se compondrá y le daremos el toque artístico con un poco de CSS (no esperen mucho, no soy bueno para el CSS).

Bueno lo primero sera confeccionar nuestro formulario, para ello utilizaré el siguiente código, el cual no presenta secretos.

En primer lugar definimos la cantidad de pasos para confeccionar una barra de progreso, para mantener informado al usuario y evitar que deje el formulario abandonado y perdamos trafico,  en este ejemplo serán 3 (Configurar tu cuenta, Perfil Social y Detalles Personales).

La barra de progreso sera una simple etiqueta ul  con un id llamado progreso, con sus correspondientes etiquetas li (tantas como pasos tenga el formulario) [highlight color=yellow]no olvidar asignar la clase active al primer li[/highlight] que mediante jQuery y CSS posteriormente la dotaremos de vida.

Luego de definir los step o pasos del formulario, creamos diferentes campos fieldsets para contener cada paso y dentro todo lo que se requiera (inputs, h2, h3, p, label, etc).

En cada fieldset, adicional a los campos que requiramos, debemos agregar un input tipo button para avanzar de paso en paso y otro para retroceder (según corresponda), por tanto en este ejemplo necesito agregar uno el primer fieldset para avanzar, dos al segundo y uno para retroceder en el ultimo junto a uno tipo submit.
Si probamos el código obtendremos una simple pagina de fondo blanco con un formulario donde veremos todos los campos así.

formulario_sin_estilo

Un toque de sensibilidad

Ahora lo principal es hacer mas vistoso nuestro formulario, para ello sacamos nuestros dotes artísticos (mas de alguien fumara algo para encontrar su inspiración xD) y nos zambullimos en CSS, yo no tengo estudios formales en CSS, pero la web es basta y repleta de información al respecto, al final de este articulo les dejare algunos link relacionados para el que desee profundizar alguno de los temas tratados en este post.

Primero importaremos una fuente tipografica desde el CDN de fuentes de google, yo usare la fuente Montcerrat, pero pueden usar la que estimen, desde google fonts podran navegar, buscar y elegir la que mas les agrade.

Un pequeño reset de estilos al documento,  sera muy básico.

Altura del documento html y aplicamos un combo de imagen como patern + gradient, cave señalar que la mayoría de CSS que usaremos, no aplica en internet explorer, esto debido a su incompatibilidad con esta versión de CSS 3 (pero bueno a quien le importa esos dinosaurio xD).

A pesar que mencione que no funcionaba bien en internet explorer  debemos asegurarnos que los otros navegadores entiendan nuestra codificación de estilos y para ello utilizaremos los prefijos para sus respectivos motores de render:

[checklist]
  • -webkit- : Para la familia Chrome / Chromium y Safari
  • -moz- : Para Mozilla Firefox y derivados
  • -o- : Para Opera (o si, aun existe)
  • -ms-: Para internet explorer 9 (pero linear-gradient no funciona bien en ie)
[/checklist] Aplicamos la fuente importada
Ahora el formulario y su contenido
Solo resta la parte superior del formulario, donde se marcan los pasos:
Con esto hemos terminado la parte “artistica” de nuestro formulario. Si probamos nuestro formulario notaran que se ve bien esteticamente, que solo vemos la primera parte del formulario, pero al darle click al boton Next, no pasa nada, ahora le daremos vida con un poco de JQuery.

Crearemo un nuevo archivo con extension js, llamenlo como quieran, yo lo llamare funciones.js

Ahora si hemos terminado, si desean que su formulario envié deben editar la ultima función del script.

Adicionalmente deben refererciar al plugin easing porque ocuparemos uno de sus metodos para animar nuestro formulario.

A continuacion les dejare un enlace con una demo de este formulario y un link donde podrán descargar el ejemplo completo listo para usar o editar a su conveniencia.

Referencias

[box type=mojo size=large]

w3schools.com: http://www.w3schools.com/css/css3_gradients.asp

Google Fonts: https://www.google.com/fonts

la imagen que use de gradient : http://www.colourlovers.com/

[/box]

Demo

Ver Demostración

Descargar ejemplo

[download id="609"]