JavaScript

Recuperar una contraseña almacenada automáticamente mediante Javascript


Últimamente existe una cruenta batalla en la plataforma Windows entre Internet Explorer y Firefox. Personalmente, yo no me decanto hacia uno ni otro: utilizo Opera desde su versión 6.05, allá por 2002. Indico que utilizo Opera porque es un navegador que posee una funcionalidad llamada “varita mágica”, que no es más que un gestor de contraseñas en las que, pulsando ALT+ENTER se introducen automáticamente el nombre de usuario y la contraseña de una web en la que se hayan almacenado estos datos previamente.

Esta “comodidad” tiene un precio: a veces, de tanto utilizar este sistema, se me olvida alguna contraseña a causa del desuso, lo que causa que mi navegador la conozca y yo no.

0811_01

Para paliar esta posibilidad, teniendo acceso a la página con el nombre de usuario y la contraseña, es posible averiguar el contenido del campo oculto entre asteriscos mediante una pequeña “treta” en Javascript. Lo primero que deberemos hacer será visualizar el código fuente de nuestra página (normalmente, haciendo click derecho sobre la misma y pulsando “Ver código fuente” o algo así, dependiendo del navegador).

Una vez visualizado, comprobamos la etiqueta que se muestra antes del campo que alberga la contraseña. En GMail, por ejemplo, “Contraseña”. Buscaremos este texto en el código fuente, obteniendo algo como lo que sigue: Como podemos observar, nos encontramos con un Input con un campo ID.

0811_02

El valor de esa variable, en nuestro caso “Passwd”, es lo que nos interesa. Volveremos a nuestra página, y escribiremos lo siguiente en nuestra barra de navegación:


javascript:alert((document.getElementById('Passwd')).value);

Lo que le estamos diciendo a nuestro navegador es: “Ejecuta el siguiente código javascript: muestrame una alerta con el valor del elemento cuyo ID es ‘Passwd'”.

0811_03

Acto seguido, se mostrará el contenido del campo en texto plano.

0811_04

Es ahora tarea del usuario el ejecutar este código lejos de la vista de un posible mirón y, por supuesto, en un PC no comprometido… 😉

Comentarios condicionales en Internet Explorer


Uno de los mayores dolores de cabeza de un programador web reside en la maximización de la compatibilidad entre navegadores. O dicho de otro modo: programar y -especialmente- maquetar una página que funcione perfectamente en todos los navegadores.

Hasta ahora, lo más común era controlar las diferencias (especialmente a nivel de css y javascript) entre Firefox e Internet Explorer. Lejos de acabar en debates sobre estas diferencias, nos centraremos en un nuevo dolor de cabeza que ha surgido hace relativamente poco: los problemas de compatibilidad entre versiones de Internet Explorer.

Pese a que la versión 6 de Internet Explorer está avocada a la extinción, aún hoy es requisito fundamental en la firma de muchos proyectos orientados a internet. Es por eso que algunos bugs de esta versión, o algunas funcionalidades que son tratadas de forma distinta, siguen dando quebraderos de cabeza.

Una de las posibilidades para solventar este problema reside en los comentarios condicionales.
(más…)

Añadir un tooltip a los elementos de un DropDownList


En ocasiones necesitamos utilizar controles de tipo SELECT cuyo ancho es demasiado pequeño para que su contenido sea completamente visible.

Una solución parcial a este problema es la de agregar un tooltip a cada elemento que resalte el contenido del mismo al pasar el ratón por encima.

Una forma sencilla (pero que desgraciadamente no funciona en todos los navegadores) consiste en agregar el elemento title a cada uno de los elementos option del select.

<select name=”Combo”>
    <option title=”Primer elemento”>Primer elemento</option>
    <option title=”Segundo elemento”>Segundo elemento</option>
    <option title=”Tercer elemento”>Tercer elemento</option>
    <option title=”Cuarto elemento”>Cuarto elemento</option>
    <option title=”Quinto elemento”>Quinto elemento</option>
    <option title=”Sexto elemento”>Sexto elemento</option>
    <option title=”Séptimo elemento”>Séptimo elemento</option>
    <option title=”Octavo elemento”>Octavo elemento</option>
</select>

Por desgracia, realizar esta opción en HTML puro y duro no resulta demasiado efectivo si queremos cambiar el contenido dinámicamente. Para realizar esta acción es .NET, partiríamos de un control de tipo DropDownList, al que llamaremos, por ejemplo, DropDownListElementos.

<asp:DropDownList ID=”DropDownListElementos” runat=”server”></asp:DropDownList>

Rellenaremos el contenido del control asignándole un origen de datos, por ejemplo, un DataTable llamado dt.

DropDownListElementos.DataSource = dt;
DropDownListElementos.DataValueField = dt.Columns[0].ColumnName;
DropDownListElementos.DataTextField = dt.Columns[1].ColumnName;
DropDownListElementos.DataBind();

Ahora que nuestro DropDownList contiene elementos, añadiremos de forma dinámica el atributo title a cada uno de sus elementos.

if (DropDownListElementos != null)
    foreach (ListItem li in DropDownListElementos.Items)
        li.Attributes.Add(“title”, li.Text);

Hecho esto, se añadirá, por ejemplo, en el método Load de la página que deseemos incluir este atributo, justo después de haber rellenado los elementos del DropDownList.

Title de un elemento de un SELECT

Title de un elemento de un SELECT

Añadir un tooltip a los elementos de un DropDownList


En ocasiones necesitamos utilizar controles de tipo SELECT cuyo ancho es demasiado pequeño para que su contenido sea completamente visible.

Una solución parcial a este problema es la de agregar un tooltip a cada elemento que resalte el contenido del mismo al pasar el ratón por encima.

Una forma sencilla (pero que desgraciadamente no funciona en todos los navegadores) consiste en agregar el elemento title a cada uno de los elementos option del select.

<select name=”Combo”>
    <option title=”Primer elemento”>Primer elemento</option>
    <option title=”Segundo elemento”>Segundo elemento</option>
    <option title=”Tercer elemento”>Tercer elemento</option>
    <option title=”Cuarto elemento”>Cuarto elemento</option>
    <option title=”Quinto elemento”>Quinto elemento</option>
    <option title=”Sexto elemento”>Sexto elemento</option>
    <option title=”Séptimo elemento”>Séptimo elemento</option>
    <option title=”Octavo elemento”>Octavo elemento</option>
</select>

Por desgracia, realizar esta opción en HTML puro y duro no resulta demasiado efectivo si queremos cambiar el contenido dinámicamente. Para realizar esta acción es .NET, partiríamos de un control de tipo DropDownList, al que llamaremos, por ejemplo, DropDownListElementos.

<asp:DropDownList ID=”DropDownListElementos” runat=”server”></asp:DropDownList>

Rellenaremos el contenido del control asignándole un origen de datos, por ejemplo, un DataTable llamado dt.

DropDownListElementos.DataSource = dt;
DropDownListElementos.DataValueField = dt.Columns[0].ColumnName;
DropDownListElementos.DataTextField = dt.Columns[1].ColumnName;
DropDownListElementos.DataBind();

Ahora que nuestro DropDownList contiene elementos, añadiremos de forma dinámica el atributo title a cada uno de sus elementos.

if (DropDownListElementos != null)
    foreach (ListItem li in DropDownListElementos.Items)
        li.Attributes.Add(“title”, li.Text);

Hecho esto, se añadirá, por ejemplo, en el método Load de la página que deseemos incluir este atributo, justo después de haber rellenado los elementos del DropDownList.

Title de un elemento de un SELECT

Title de un elemento de un SELECT