Al intentar leer el valor de alguna cookie en particular con JavaScript, nos encontraremos en el inconveniente que los datos arrojados por document.cookie conforman una cadena de caracteres del tipo nombreCookie1=valorCookie1; nombreCookie2=valorCookie2 en el caso de que existan 2 cookies para nuestro dominio. Como se puede ver, los valores de las distintas cookies se concatenan y separan con un punto y coma… definitivamente lo arrojado por document.cookie se aleja bastante del dato que se pretende obtener. Para obtener el valor real de, por ejemplo nombreCookie1, hará falta una función encargada de parsear esa cadena y retornarnos lo que corresponda, en este caso valorCookie1. Lo más cómodo resultarí­a desarrollar una función llamada leerCookie la cual reciba como parámetro el nombre de la cookie que se quiere obtener su valor y nos retorne false en caso de que la misma no exista o su valor en caso contrario.

Continuar leyendo…

Si se han estado peleando con los eternos problemas de interpretación del CSS en los distintos navegadores para conseguir que un DIV semi transparente ocupe el 100% del ancho y largo de la página, esta función en JavaScript les puede resultar de utilidad. La idea de este pequeño código es que, pasandole 3 parámetros, se encargue de la creación de este DIV con opacidad reducida “deshabilitando” todo lo que queda debajo de él. La forma de utilizar la función es sencilla: generateCoverDiv(’divId’, ‘#000000′, 75); donde divID es el ID que se le asignará a la capa semi transparente, #000000 es el color de base de esa capa y 75 es el porcentaje de opacidad que se le pretende dar a la misma. Así­ en el ejemplo se estará generando una capa cuyo width y height son el 100% del contenido de la página, con color negro y con un 75% de opacidad. El z-index de esta capa de cobertura tendrá 100 como valor, cosa que comunmente resultará suficiente para conseguir ese efecto de “deshabilitado” de los elementos que quedan debajo. El código de la función en cuestión es el siguiente:

Continuar leyendo…

A continuación dejo un pequeño texto que he escrito más que nada como ayuda memorias a la hora de hacer redirecciones con el mod-rewrite. El mismo comienza explicando la diferencia entre rutas relativas y absolutas, sigue con la importancia de la etiqueta base a la hora de hacer redirecciones y termina analizando el caso de un sitio web multi-idioma. Espero les resulte de utilidad y cualquier cosa comenten.

Continuar leyendo…

Siguiendo un poco con la costumbre hoy vos a dejarles otro pequeño artí­culo sobre Seguridad en PHP y, más precisamente, sobre ataques y vulnerabilidades XSS. Durante el desarrollo de este texto voy a suponer leí­do el artí­culo anterior de Seguridad en PHP: Ataques XSS: el peligro de hacer echo $_GET[’var’] por lo que no voy a explicar nuevamente los peligros que conlleva una vulnerabilidad XSS, los ejemplos para explotarlas, las formas de solucionar este problema ni otras cuestiones mencionadas en aquel texto.

Hoy nos vamos a centrar en el análisis de la variable predefinida de PHP $_SERVER[’PHP_SELF’]. Para los que no están al tanto, esta variable retorna el valor del nombre de archivo del código PHP que se esté ejecutando actualmente, relativo a la raiz del sitio. Entonces si estoy visualizando a http://www.misitio.com/index.php la variable $_SERVER[’PHP_SELF’] me arrojará /index.php. Dadas sus caracterí­sticas es muy común su uso dentro de etiquetas de ví­nculos a o dentro de etiquetas form en atributos action para hacer referencia al mismo script donde nos encontramos actualmente. El problema que muchos desconocen es que la variable $_SERVER[’PHP_SELF’] es fácilmente manipulable por cualquier usuario y su mal uso puede representar un problema grave de seguridad, como veremos a continuación.

Continuar leyendo…

En la red se puede encontrar toneladas de información teórica acerca de que son los ataques XSS (Cross Site Scripting), de que tipos existen, y muchos etcéteras. Pero posiblemente nos demos cuenta de que tan vulnerables pueden resultar nuestros sitios cuando veamos un ejemplo real de un ataque de este tipo; y eso es lo que voy a tratar de mostrarles en este pequeño artí­culo.

Sobre XSS, no hay mucho que decir que no se haya dicho antes. Yo definirí­a a XSS como un ataque que se basa en explotar métodos poco correctos de programación para ejecutar script malicioso de cliente (comunmente JavaScript) al momento que un usuario desprevenido ingresa al sitio ví­ctima del ataque. Que yo, atacante, pueda hacer que en el sitio ví­ctima se ejecute un script JavaScript arbitrario, aunque a algunos les pueda parecer inofensivo, resulta realmente peligroso. Un código JavaScript puede redireccionar usuarios a otras URL’s, puede cambiar la información que se muestra en el sitio y, quizá lo más interesante, puede obtener los valores de las cookies que el navegador del usuario posea en ese momento. Obtener el valor de las cookies equivale a obtener el Session ID (SID a partir de ahora), el cual se utiliza para que el servidor reconozca al usuario “Pepe” como “Pepe” y no como ningún otro. Suponiendo que se utiliza sistema de sesiones nativas de PHP (session_start() y sus secuaces), si yo tengo el SID de “Pepe” que se almacena en sus cookies, puedo ingresar como “Pepe” aunque no lo sea.

Continuar leyendo…

Hay veces que tenemos una sub-página de nuestro sitio en la cual debemos mostrar varias imágenes, y la carga de las mismas puede demorarse bastante. Vemos la opción de colocar una barra de progreso que mantenga al usuario informado en tiempo real, pero, si son como yo, se niegan rotundamente a colocar algo desarrollado en Flash. Pues bien, para gente como nosotros, JavaScript pone a disposición la propiedad complete de un objeto imágen.

La propiedad complete de un objeto imágen lo que hace es simplemente devolver true si la imágen en cuestión ha terminado de cargarse o false en caso contrario. íšnicamente con esta propiedad, el concepto de pre-carga y un poco de manejo de CSS podemos desarrollar la tan querida barra de progreso.

Continuar leyendo…

Hoy voy a dejarles un código bastante sencillo y didáctico para hacer que un DIV pueda ser arrastrado por toda el área de nuestra página y colocado donde el usuario desee. Como es costumbre el código no usará ninguna librerí­a pesada; y no es que esté en contra del uso de librerí­as o frameworks, sino es que me parece sumamente importante ENTENDER que pasa por debajo de esas bonitas llamadas a clases/funciones y ser capaces de modificar el código para nuestro beneficio.

Lo que voy a explicar es el tipo de Drag & Drop más sencillo que hay en el cual solo se trata de “arrastrar y soltar” y no en el que las capas se reordenan automáticamente (este lo dejamos para el siguiente POST). En otras palabras lo que vamos a conseguir es algo como esto: http://www.formatoweb.com.ar/blog/files/dragdrop.php y el auto-ordenable que dejamos para más adelante serí­a este: http://www.formatoweb.com.ar/blog/files/dragdrop2.php (observen que pasa al arrastrar una capa por encima de la otra).

Continuar leyendo…

Hace un tiempo me tocó la desgracia de tener una maqueta de una web en donde, por la forma en que se habí­a desarrollado, no se disponí­a de demasiado espacio para colocar texto y era necesario colocar en ese espacio las extensas especificaciones de distintos productos. El problema era sencillo: poco espacio para mucho texto.

En primera instancia pensé en colocar iframes o divs con su respectivo overflow:scroll, pero la barrita de scroll no quedaba muy estética que digamos y para peor me quitaba el preciado espacio que tanto necesitaba el texto. Opté entonces por codificar unas pequeñas funciones en JavaScript que dado un ID de un elemento cualquiera, se encarguen de transformar ese elemento en una flecha de scroll y que al posicionarse sobre ellas muevan aquellas capas donde estaban colocados los enormes párrafos.

Continuar leyendo…

Bueno, en realidad la clase la comencé con el objetivo de que sea un generador y validador de formularios sacándome de encima la necesidad de crear el código JavaScript y PHP cada vez que tení­a que validar un form diferente. El tema es que genera los select dependientes tan cómodamente que me pareció útil compartirla con ustedes, más teniendo en cuenta la cantidad de correos que me llegan a diario indicandome las dificultades que se presentan en la adaptación de este ejemplo.

Voy a comenzar colocando un ejemplo de uso. Lamentablemente todaví­a no hice la documentación que deberí­a, pero como mencioné, la idea de la clase es otra y la misma la generaré cuando termine de desarrollarla. Puede que encuentren métodos que no hacen nada, u otros que aparentan no tener sentido; la verdad es que me quedó código colgando para el cual tengo objetivos pensados pero aún no me he puesto a trabajar en ellos. De todas maneras todo funciona perfecto, como debe ser.

Continuar leyendo…