Archivo de la categoría: Diseño y Programación

Complementos de Firefox para desarrollo web

firefox-add-onsEl desarrollo web avanza día a día con la aparición de nuevas tecnologías y conceptos, lo cual suma a la complejidad de la creación de una web moderna. Son muchos los campos y especialidades que abarca el desarrollo web actual.

Para el diseño web usamos HTML y CSS, haciendo uso de tecnologías como SASS y LESS, diseño responsive, etcétera. Después hay que añadir funcionalidad a la web, lo cual conlleva programación, probablemente en PHP o nuevas tecnologías como Node.js. No hay que olvidar darle un dinamismo a la web, para ello terminamos usando JavaScript, a través de jQuery o cualquier otro de los miles de frameworks existentes para implementar formularios AJAX y efectos interesantes a la interacción del usuario con la web. Sigue leyendo

Facebooktwitter

¿Qué es el Cross-site request forgery o CSRF?

Los ataques del tipo Cross-site Request Forgery, o CSRF, consisten en forzar a un usuario a ejecutar peticiones no deseadas a una web en la que están autentificados sin que este se de cuenta. Este tipo de ataque no busca el robo de datos, si no el que estas peticiones provoquen cambios, ya que el atacante no tiene forma de ver la respuesta a estas peticiones falsas.csrf

Sigue leyendo

Facebooktwitter

¿Qué es la inyección SQL?

SQL_InjectionLa inyección SQL es uno de los mecanismos de ataque más comunes a nivel de aplicación que aprovechan fallos en la programación y agujeros de seguridad para lograr acceso a la base de datos de una web y ejecutar cualquier comando SQL sobre la misma.

Hoy en día las páginas web suelen ir ligadas a una base de datos, la cual es central para el funcionamiento de la misma ya que guarda la mayoría de contenido de la misma así como la información necesaria para su funcionamiento, credenciales de acceso de los usuarios, datos privados de estos, información de pagos, estadísticas, etcétera. Toda esta información es mostrada, cambiada o borrada de forma controlada a través del interfaz, que es la propia web.

Y es la propia web el principal vector de ataque usado para inyectar SQL. Al igual que en los ataques XSS, una mala seguridad se traduce en que un atacante pueda introducir código malicioso. Este código puede realizar cualquier acción en la base de datos, por lo que el atacante puede, por ejemplo, lograr autentificarse como otro usuario sin conocer su contraseña, otorgarse permisos de administrador, manipular cualquier registro, obtener cualquier dato o borrar cualquier registro, incluso eliminar todas las tablas de la base de datos.

Vamos a ver un ejemplo de vulnerabilidad y ataque de inyección SQL. Tenemos un formulario de login en nuestra web y ejecutamos la siguiente consulta para comprobar los credenciales enviados:

SELECT * FROM usuarios WHERE nombre = '$usuario' AND password = '$password’

Si en el formulario ponemos como nombre=Juan y como contraseña=algo’ OR ‘x’ = ‘x’, la consulta quedaría así:

SELECT * FROM usuarios WHERE nombre = 'Juan' AND password = 'algo' OR 'x' = 'x'

La parte de la consulta ‘x’ = ‘x’ siempre será evaluada como verdadera, por lo que el atacante podría saltar la comprobación de login.

Evidentemente, una vulnerabilidad en nuestro código que permita la inyección SQL es un riesgo enorme. Para evitarlo, las técnicas varían según en qué lenguaje estemos programando. En el contexto web, lo más probable es que sea PHP.

En PHP, desde la versión 5.5 las funciones mysql_* están deprecated (anticuadas y en proceso de desaparición), y a partir de la versión 7 serán eliminadas, en favor del uso de las funciones mysqli o de PDO, siendo estas últimas las más recomendadas. Para evitar la inyección SQL en PHP, PDO permite usar la técnica de parametrización de consultas, con la cual los parámetros de la consulta son saneados de forma automática mediante la función bindParam() imposibilitando la inyección de código, además quedando mejor a nivel de claridad de código.

$stmt = $dbh->prepare("INSERT INTO usuarios (nombre, password) VALUES (:nombre, :password)");
$stmt->bindParam(':nombre', $nombre);
$stmt->bindParam(':password', $password);

En el caso de usar CMS como WordPress, Joomla!, etcétera, lo recomendable es mantenerlos siempre al día, tanto el propio CMS como sus plugins y themes, ya que los equipos que los desarrollan suelen parchearlos en cuanto son detectados.

Para aquellos que quieran aprender más y prevenir estos ataques, el OWASP (Open Web Application Security Project) cuenta con guías avanzadas para la prevención de la inyección SQL, además de otros tipos de agujeros de seguridad.

Facebooktwitter

Actualización de PHP 5.4 a 5.5

elephpantEn menos de una semana la rama 5.4 de PHP dejará de recibir actualizaciones de seguridad, por lo que los servidores que aún tienen esta versión van a ir siendo actualizados a PHP 5.5.

En principio esta actualización no debería tener impacto, pero es muy recomendable actualizar los CMS para asegurar la compatibilidad.

Podemos ver las novedades de la versión 5.5 de PHP en su web oficial.

Facebooktwitter

jQuery Lazy Load: carga tus imágenes según hagan falta

jqueryLazy-loading es una técnica que consiste básicamente en no cargar un recurso mientras no sea neceseario. Por ejemplo, en una página que muestra digamos 25 imágenes, en nuestro monitor pueden verse 5 a la vez, el resto no son visibles hasta que hacemos scroll con el ratón para tenerlas en pantalla. Sin lazy-loading, todas las imágenes son descargadas pese a no ser visibles aún, ralentizando la carga de la página en general. Usando la técnica de lazy-loading, las imágenes no visibles se irán descargando según vayamos bajando con el ratón y estas se muestren en pantalla.

Una manera relativamente sencilla de implementar esta técnica es con el plugin Lazy Load para jQuery. Para empezar a usarlo necesitamos descargarlo desde la sección de plugins de jQuery y cargarlo en nuestro HTML, además de cargar el propio jQuery.

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

Una vez cargado, tenemos que modificar los tags <img> y añadirles el parámetro data-original, que contendrá la ruta de la imagen. También deberemos darles una clase específica para controlar qué imágenes usarán lazy-load.

<img class="lazy" data-original="img/ejemplo.jpg" width="640" height="480">

$(function() {
    $("img.lazy").lazyload();
});

De esta forma, todas las imágenes que usen la clase «lazy» usarán la técnica lazy-load, y las imágenes que no usen la clase se cargarán de forma normal.

El plugin Lazy Load permite personalizar el comportamiento de esta técnica bastante a fondo, por ejemplo especificando un umbral de píxeles para empezar la descarga de la imagen, asociar la carga a eventos distintos del scroll, como click, mouseover, o eventos personalizados, usar efectos, etcétera, y todo bien detallado en su documentación.

Página oficial de Lazy Load para jQuery
Página oficial de jQuery

Facebooktwitter

Optimiza tu Joomla! con JCH Optimize

Captura de pantalla 2015-07-15 a las 13.59.40JCH Optimize es un plugin para Joomla! que combina todos los  distintos códigos Javascript y CSS que usa tu web en uno sólo, optimizándolos y minimizando el número de peticiones HTTP que se han de hacer al acceder a tu web. Puede además comprimirlos con GZIP y minificarlos, reduciendo aún más el ancho de banda y tiempo de descarga de los mismos.

Una configuración óptima puede otorgar entre 6 y 10 puntos en PageSpeed, según afirma la documentación oficial. Esta mejora se refleja en una mejor experiencia para los usuarios, y el algoritmo de Google verá con mejores ojos tu web.

Principales características de JCH Optimze:

  • Combina archivos Javascript y CSS en uno
  • Combina imágenes de fondo en un sprite
  • Minifica y comprime archivos Javascript y CSS
  • Carga aplazada de Javascript y capacidad de incluirlo al final de la página para acelerar la carga de la web

Para instalarlo, lo hacemos desde el propio Joomla!, buscando «JCH optimize» en el buscador de plugins.

Captura de pantalla 2015-07-15 a las 13.59.59

Hacemos la instalación y habilitamos el plugin, entonces vamos a sus opciones, desplegamos con el botón de «Automatic Settings Group» y activamos todas las opciones.

Captura de pantalla 2015-07-15 a las 14.12.32Guardamos los cambios y hacemos una prueba en Page Speed de Google y veremos cómo ha mejorado nuestra puntuación (hay que hacer una prueba previa para poder comparar adecuadamente).

Página oficial de JCH Optimize.

Facebooktwitter

Optimiza tus imágenes con Kraken

Azure-Kraken-ioUna de las muchas maneras de mejorar la velocidad de carga de nuestra página web es optimizar las imagenes. Es decir, comprimirlas sin que pierdan calidad de una forma apreciable, ocupen menos y por tanto carguen más rápido. Esto es especialmente útil si nuestra web tiene una carga importante de recursos gráficos.

Kraken.io es un servicio online dedicado exclusivamente a optimizar imágenes usando modernos algoritmos, ahorrándonos así consumo de ancho de banda y de espacio en disco sin que las imágenes pierdan calidad de forma apreciable como podemos ver en el ejemplo que tienen en su web.

Captura de pantalla 2015-06-25 a las 15.46.07Kraken se puede implementar de forma muy sencilla en WordPress mediante el plugin oficial que podemos encontrar buscando «kraken» en la sección de plugins.

Captura de pantalla 2015-06-25 a las 15.12.43Una vez está instalado, lo activamos y vamos a Ajustes > Kraken.io, donde configuramos el plugin. Lo primero que debemos hacer es obtener una clave API en la web oficial de Kraken.

Tendremos que registrarnos y activar nuestra cuenta, y una vez hecho esto ir a la sección «API Credentials» donde podemos encontrar los parámetros necesrios para configurar el plugin.

Captura de pantalla 2015-06-25 a las 15.17.22Ponemos los parámetros en la configuración del plugin y guardamos los cambios.

Captura de pantalla 2015-06-25 a las 15.18.43Ya tenemos el plugin totalmente configurado.

Para empezar a utilizar Kraken para optimizar las imágenes de nuestro blog, vamos a Medios > Biblioteca y hacemos que se ordene en forma de lista.

Captura de pantalla 2015-06-25 a las 15.21.58Veremos un listado con todas las imágenes de nuestro blog, y para optimizarlas sólo hay que darle al botón. La imagen que hemos subido para realizar esta prueba ha podido ser reducida casi un 31%, pasando de 261 Kb a 180 Kb. Aunque parezca poco ahorrar 81 Kb, imaginemos que recibimos unas 500 visitas al día. A lo largo de un mes, el ahorro se convierte en 1,2 Gb, optimizando una sola imagen.

Captura de pantalla 2015-06-25 a las 15.23.15La tarea de optimizar no es necesario realizarla manualmente cada vez que subamos una imagen, pues a partir de ahora se hará automáticamente con el plugin.

El punto en contra del servicio es que disponemos de una cuota de tan solo 50 Mb, al tratarse de una cuenta gratuita, teniendo que pagar para aumentar la cuota. También cabe comentar que si no nos convence el plugin y lo desinstalamos, no perdemos las imágenes ni la optimización realizada sobre ellas.

Facebooktwitter