Formularios: Campos, Validaciones, Seguridad, etc.


Editar una Persona



¿Qué es y Cómo funciona?

Este ejemplo muestra un formulario de ejemplo en MVC 5 asociado a una clase Persona con las siguientes propiedades y restricciones:

  • ID (clave, int, no editable)
  • Nombre (es requerido y debe contener entre 3 y 50 caracteres.)
  • Apellidos (son requeridos y deben contener entre 3 y 100 caracteres.)
  • Edad (es requerida y debe estar comprendida entre 18 and 99.)
  • Teléfono (su formato debe ser xxx-yyy-zzzz) Nótese que el teléfono introducido por defecto no es correcto para que se producza la validación en cliente.
  • Email (es requerido y debe tener formato de Email)

Al pinchar en editar se validarán los campos introducidos tanto en cliente como posteriormente en Servidor.

 

Teoría

Ya sea en MVC, Web Forms o en un patrón cliente - Servicio un formulario tiene en mi opinión varios puntos mínimos obligatorios:

  1. Validación
    Debe existir tanto en cliente como en servidor (o Servicio) para evitar envios maliciosos cuando Javascript está deshabilitado.
    Para MVC las "Data annotation attributes" son esenciales al definir las propiedades del modelo para agilizar la creación de formularios simples y crear la doble validación con ayuda de jquery.validation. A su vez también se puede utilizar jQuery para validaciones contra servicios que atacan a una BBDD por Ajax (p.e. si un usuario ya existe en BBDD o medir la seguridad de un campo contraseña mientras escribimos)
    Para WebForms las validaciones de cliente las suelo hacer en JQuery antes de submitar el formulario o automáticas al escribir en los campos aunque he trabajado con "Validators" (RequiredFieldValidator, RegularExpressionValidator, CompareValidator, etc.)
    Para usar validaciones de HTML5 tener en cuenta que navegadores y versiones las permiten: caniuse
  2. Seguridad
    Para MVC el uso de AntiForgeryToken nativo previene ataques de tipo Cross Site Request Forgery (CSRF) aunque conviene recordar que requiere tener las cookies habilitadas pues el controlador chequeará la que le viene con el valor del campo oculto generado en la vista. Webforms no soporta de forma nativa un AntiForgeryToken pero se le puede añadir un modulo AntiCSFR http://anticsrf.codeplex.com/ que con ciertas modificaciones en el WebConfig utiliza las cookies para un posible ataque.
    Tanto para MVC como para Web Forms si el formulario tiene cierta importancia se debe añadir un Captcha y chequear el dominio desde el que se llama al controlador para que sea el correcto para evitar ataques XSS (cross-site scripting).
  3. Diseño responsivo El titulo y la caja de texto en cada elemento del formulario deben tomar una disposicion vertical (si estan en la misma línea) para resoluciones reducidas.

 

Configuración y Test

Se ha utilizado Visual Studio Express 2013 para Web y actualmente Visual Comunity 2015.
La programación se ha desarrollado con C#, Razor y acceso a Base de Datos por Entity Framework.

Las tablas mostradas en la aplicación se encuentran en un Microsoft® SQL Server® 2012 y actualmente en SQL de Azure

El alojamiento de las páginas se realizó en https://www.smarterasp.net con el plan .NET ADVANCE y actualmente se han movido a 2 Aplicaciones Web en Azure: una para este proyecto Web MVC y otra para un WCF usada en un ejemplo.

Se ha testeado con exito en diferentes navegadores y sistemas operativos, en pantallas de PC, tabletas y moviles.