Los 10 errores más comunes que cometen los desarrolladores web: un tutorial para desarrolladores

Desde que se acuñó el término World Wide Web en 1990, el desarrollo de aplicaciones web ha evolucionado desde servir páginas HTML estáticas hasta aplicaciones comerciales complejas y completamente dinámicas.

Hoy tenemos miles de recursos digitales e impresos que brindan instrucciones paso a paso sobre cómo desarrollar todo tipo de aplicaciones web diferentes. Los entornos de desarrollo son lo suficientemente "inteligentes" para detectar y corregir muchos errores con los que los primeros desarrolladores luchaban regularmente. Incluso hay muchas plataformas de desarrollo diferentes que convierten fácilmente páginas HTML estáticas simples en aplicaciones altamente interactivas.

Todos estos patrones, prácticas y plataformas de desarrollo comparten puntos en común, y todos son propensos a problemas de desarrollo web similares causados ​​por la naturaleza misma de las aplicaciones web.

El propósito de estos consejos de desarrollo web es arrojar luz sobre algunos de los errores comunes que se cometen en las diferentes etapas del proceso de desarrollo web y ayudarlo a convertirse en un mejor desarrollador. He tocado algunos temas generales que son comunes a prácticamente todos los desarrolladores web, como validación, seguridad, escalabilidad y SEO. Por supuesto, no debe limitarse a los ejemplos específicos que he descrito en esta guía, ya que se enumeran solo para darle una idea de los posibles problemas que podría encontrar.

Error común n.º 1: Validación de entrada incompleta

¡Validar la entrada del usuario en el lado del cliente y del servidor es simplemente imprescindible ! Todos somos conscientes del sabio consejo "no confíes en la entrada del usuario" pero, sin embargo, los errores derivados de la validación ocurren con demasiada frecuencia.

Una de las consecuencias más comunes de este error es la Inyección SQL que se encuentra en el Top 10 de OWASP año tras año.

Recuerde que la mayoría de los marcos de desarrollo front-end proporcionan reglas de validación listas para usar que son increíblemente fáciles de usar. Además, la mayoría de las principales plataformas de desarrollo de back-end utilizan anotaciones simples para garantizar que los datos enviados cumplan con las reglas esperadas. La implementación de la validación puede llevar mucho tiempo, pero debe ser parte de su práctica de codificación estándar y nunca debe dejarse de lado.

Error común n.° 2: Autenticación sin la debida autorización

Antes de continuar, asegurémonos de estar alineados en estos dos términos. Como se indica en las 10 vulnerabilidades de seguridad web más comunes:

Autenticación: verificar que una persona es (o al menos aparenta ser) un usuario específico, ya que ha proporcionado correctamente sus credenciales de seguridad (contraseña, respuestas a preguntas de seguridad, escaneo de huellas digitales, etc.).

Autorización: Confirmación de que un usuario en particular tiene acceso a un recurso específico o se le otorga permiso para realizar una acción en particular.

Dicho de otra manera, la autenticación es saber quién es una entidad, mientras que la autorización es saber qué puede hacer una determinada entidad.

Permítanme demostrar este problema con un ejemplo:

Tenga en cuenta que su navegador contiene la información del usuario registrado actualmente en un objeto similar al siguiente:

 { username:'elvis', role:'singer', token:'123456789' }

Al realizar un cambio de contraseña, su aplicación realiza el POST:

 POST /changepassword/:username/:newpassword

En su método /changepassword , verifica que el usuario haya iniciado sesión y que el token no haya caducado . Luego encuentra el perfil de usuario basado en el parámetro :username y cambia la contraseña de su usuario.

Entonces, validó que su usuario haya iniciado sesión correctamente y luego ejecutó su solicitud, cambiando así su contraseña. El proceso parece estar bien, ¿verdad? ¡Desafortunadamente, la respuesta es no!

En este punto es importante verificar que el usuario que ejecuta la acción y el usuario cuya contraseña se cambia son los mismos. Cualquier información almacenada en el navegador puede ser manipulada, y cualquier usuario avanzado podría actualizar fácilmente username:'elvis' a nombre de username:'Administrator' sin usar nada más que las herramientas integradas del navegador.

Entonces, en este caso, solo nos encargamos de la Authentication asegurándonos de que el usuario proporcionara las credenciales de seguridad. Incluso podemos agregar la validación de que el método /changepassword solo puede ser ejecutado por usuarios Authenticated . Sin embargo, esto aún no es suficiente para proteger a sus usuarios de intentos maliciosos.

Debe asegurarse de verificar el solicitante real y el contenido de la solicitud dentro de su método /changepassword e implementar la Authorization adecuada de la solicitud, asegurándose de que el usuario pueda cambiar solo sus datos.

Authentication y Authorization son dos caras de la misma moneda. Nunca los trate por separado.

Error común n.° 3: no estar listo para escalar

En el mundo actual de desarrollo de alta velocidad, aceleradores de inicio y alcance global instantáneo de grandes ideas, tener su MVP (producto mínimo viable) en el mercado lo antes posible es un objetivo común para muchas empresas.

Sin embargo, esta presión de tiempo constante está causando que incluso los buenos equipos de desarrollo web pasen por alto ciertos problemas. La escalabilidad es a menudo una de esas cosas que los equipos dan por hecho. El concepto de MVP es genial, pero llévalo demasiado lejos y tendrás serios problemas. Desafortunadamente, seleccionar una base de datos y un servidor web escalables y separar todas las capas de la aplicación en servidores escalables independientes no es suficiente. Hay muchos detalles en los que debe pensar si desea evitar reescribir partes significativas de su aplicación más adelante, lo que se convierte en un problema importante de desarrollo web.

Por ejemplo, supongamos que elige almacenar imágenes de perfil cargadas de sus usuarios directamente en un servidor web. Esta es una solución perfectamente válida: la aplicación puede acceder rápidamente a los archivos, los métodos de manejo de archivos están disponibles en todas las plataformas de desarrollo e incluso puede servir estas imágenes como contenido estático, lo que significa una carga mínima en su aplicación.

Pero, ¿qué sucede cuando su aplicación crece y necesita usar dos o más servidores web detrás de un balanceador de carga? A pesar de que escaló muy bien el almacenamiento de su base de datos, los servidores de estado de la sesión y los servidores web, la escalabilidad de su aplicación falla debido a algo tan simple como las imágenes de perfil. Por lo tanto, debe implementar algún tipo de servicio de sincronización de archivos (que tendrá un retraso y provocará errores 404 temporales) u otra solución alternativa para garantizar que los archivos se distribuyan en sus servidores web.

Lo que tenía que hacer para evitar el problema en primer lugar era simplemente usar la ubicación de almacenamiento de archivos compartidos, la base de datos o cualquier otra solución de almacenamiento remoto. Probablemente habría costado unas pocas horas extra de trabajo implementarlo todo, pero habría valido la pena.

Error común n.º 4: SEO incorrecto o faltante

La causa raíz de las mejores prácticas de SEO incorrectas o faltantes en los sitios web son los "especialistas en SEO" mal informados. Muchos desarrolladores web creen que saben lo suficiente sobre SEO y que no es especialmente complejo, pero eso no es cierto. El dominio de SEO requiere mucho tiempo dedicado a investigar las mejores prácticas y las reglas en constante cambio sobre cómo Google, Bing y Yahoo indexan la web. A menos que experimente constantemente y tenga un seguimiento + análisis preciso, no es un especialista en SEO y no debe pretender serlo.

Además, el SEO se pospone con demasiada frecuencia como una actividad que se realiza al final. Esto tiene un alto precio de problemas de desarrollo web. El SEO no solo está relacionado con establecer un buen contenido, etiquetas, palabras clave, metadatos, etiquetas alternativas de imagen, mapa del sitio, etc. También incluye eliminar contenido duplicado, tener una arquitectura de sitio rastreable, tiempos de carga eficientes, backlinking inteligente, etc.

Al igual que con la escalabilidad, debe pensar en SEO desde el momento en que comienza a crear su aplicación web, o puede encontrar que completar su proyecto de implementación de SEO significa reescribir todo su sistema.

Error común n.º 5: acciones que consumen tiempo o procesador en los controladores de solicitudes

Uno de los mejores ejemplos de este error es enviar un correo electrónico basado en una acción del usuario. Con demasiada frecuencia, los desarrolladores piensan que hacer una llamada SMTP y enviar un mensaje directamente desde el controlador de solicitudes del usuario es la solución.

Supongamos que creó una librería en línea y espera comenzar con unos cientos de pedidos diarios. Como parte de su proceso de recepción de pedidos, envía correos electrónicos de confirmación cada vez que un usuario publica un pedido. Esto funcionará sin problemas al principio, pero ¿qué sucede cuando escala su sistema y de repente recibe miles de solicitudes que envían correos electrónicos de confirmación? Obtiene tiempos de espera de conexión SMTP, cuota excedida o el tiempo de respuesta de su aplicación se degrada significativamente, ya que ahora está manejando correos electrónicos en lugar de usuarios.

Cualquier acción que consuma tiempo o procesador debe ser manejada por un proceso externo mientras libera sus solicitudes HTTP lo antes posible. En este caso, debe tener un servicio de correo externo que esté recogiendo pedidos y enviando notificaciones.

Error común n.º 6: no optimizar el uso del ancho de banda

La mayor parte del desarrollo y las pruebas tienen lugar en un entorno de red local. Por lo tanto, cuando descargue 5 imágenes de fondo, cada una de 3 MB o más, es posible que no identifique un problema con la velocidad de conexión de 1 Gbit en su entorno de desarrollo. Pero cuando sus usuarios comienzan a cargar una página de inicio de 15 MB a través de conexiones 3G en sus teléfonos inteligentes, debe prepararse para una lista de quejas y problemas.

Optimizar el uso de su ancho de banda podría brindarle un gran aumento de rendimiento y, para obtener este impulso, probablemente solo necesite un par de trucos. Hay algunas cosas que muchos buenos desarrolladores web hacen de manera predeterminada, que incluyen:

1. Minificación de todo JavaScript
2. Minificación de todo el CSS
3. Compresión HTTP del lado del servidor
4. Optimización del tamaño y la resolución de la imagen

Error común n.º 7: no desarrollar para diferentes tamaños de pantalla

El diseño receptivo ha sido un gran tema en los últimos años. La expansión de los teléfonos inteligentes con diferentes resoluciones de pantalla ha traído muchas nuevas formas de acceder al contenido en línea, lo que también conlleva una serie de problemas de desarrollo web. La cantidad de visitas al sitio web que provienen de teléfonos inteligentes y tabletas crece cada día, y esta tendencia se está acelerando.

Para garantizar una navegación y un acceso fluidos al contenido del sitio web, debe permitir que los usuarios accedan a él desde todo tipo de dispositivos.

Existen numerosos patrones y prácticas para crear aplicaciones web receptivas. Cada plataforma de desarrollo tiene sus propios consejos y trucos, pero hay algunos marcos que son independientes de la plataforma. El más popular es probablemente Twitter Bootstrap. Es un marco HTML, CSS y JavaScript de código abierto y gratuito que ha sido adoptado por todas las principales plataformas de desarrollo. Simplemente cumpla con los patrones y prácticas de Bootstrap al crear su aplicación, y obtendrá una aplicación web receptiva sin ningún problema.

Error común n.º 8: incompatibilidad entre navegadores

El proceso de desarrollo está, en la mayoría de los casos, bajo una fuerte presión de tiempo. Cada aplicación debe lanzarse lo antes posible e incluso los buenos desarrolladores web a menudo se centran en ofrecer funcionalidad por encima del diseño. Independientemente del hecho de que la mayoría de los desarrolladores tienen Chrome, Firefox, IE instalado, solo usan uno de estos el 90% del tiempo. Es una práctica común usar un navegador durante el desarrollo y, justo cuando la aplicación se acerca a su finalización, comenzará a probarla en otros navegadores. Esto es perfectamente razonable, suponiendo que tenga mucho tiempo para probar y solucionar los problemas que aparecen en esta etapa.

Sin embargo, hay algunos consejos de desarrollo web que pueden ahorrarle mucho tiempo cuando su aplicación llega a la fase de prueba entre navegadores:

1. No necesita probar en todos los navegadores durante el desarrollo; consume mucho tiempo y es ineficaz. Sin embargo, eso no significa que no pueda cambiar de navegador con frecuencia. Utilice un navegador diferente cada dos días y, al menos, reconocerá los principales problemas al principio de la fase de desarrollo.
2. Tenga cuidado de usar estadísticas para justificar el no soporte de un navegador. Hay muchas organizaciones que tardan en adoptar software nuevo o actualizarlo. Es posible que miles de usuarios que trabajan allí aún necesiten acceder a su aplicación y no pueden instalar el navegador gratuito más reciente debido a políticas comerciales y de seguridad internas.
3. Evite el código específico del navegador. En la mayoría de los casos, existe una solución elegante que es compatible con varios navegadores.

Error común n.º 9: no planificar la portabilidad

¡La asunción es la madre de todos los problemas! Cuando se trata de portabilidad, este dicho es más cierto que nunca. ¿Cuántas veces ha visto problemas en el desarrollo web, como rutas de archivos codificadas, cadenas de conexión de bases de datos o suposiciones de que una determinada biblioteca estará disponible en el servidor? Asumir que el entorno de producción coincidirá con su computadora de desarrollo local es simplemente incorrecto.

La configuración ideal de la aplicación debería estar libre de mantenimiento:

1. Asegúrese de que su aplicación pueda escalar y ejecutarse en un entorno de varios servidores con equilibrio de carga.
2. Permita una configuración simple y clara, posiblemente en un único archivo de configuración.
3. Manejar excepciones cuando la configuración del servidor web no es la esperada.

Error común n.° 10: patrones anti RESTful

Las API RESTful han tomado su lugar en el desarrollo web y están aquí para quedarse. Casi todas las aplicaciones web han implementado algún tipo de servicio REST, ya sea para uso interno o para integrarse con un sistema externo. Pero todavía vemos patrones y servicios RESTful rotos que no se adhieren a las prácticas esperadas.

Dos de los errores más comunes que se cometen al escribir una API RESTful son:

1. Usar verbos HTTP incorrectos. Por ejemplo, usar GET para escribir datos. HTTP GET ha sido diseñado para ser idempotente y seguro, lo que significa que no importa cuántas veces llame a GET en el mismo recurso, la respuesta siempre debe ser la misma y no debe ocurrir ningún cambio en el estado de la aplicación.

2. No enviar códigos de estado HTTP correctos. El mejor ejemplo de este error es enviar mensajes de error con el código de respuesta 200.

    HTTP 200 OK { message:'there was an error' }

Solo debe enviar HTTP 200 OK cuando la solicitud no haya generado un error. En caso de error, debe enviar 400, 401, 500 o cualquier otro código de estado que sea apropiado para el error que se ha producido.

Puede encontrar una descripción detallada de los códigos de estado HTTP estándar aquí.

Envolver

El desarrollo web es un término extremadamente amplio que puede abarcar legítimamente el desarrollo de un sitio web, un servicio web o una aplicación web compleja.

El punto principal de esta guía de desarrollo web es el recordatorio de que siempre debe tener cuidado con la autenticación y la autorización, planificar la escalabilidad y nunca asumir nada apresuradamente, ¡o estar listo para lidiar con una larga lista de problemas de desarrollo web!