Formulario de login seguro que fomenta el recordar datos de acceso

A menos que hayamos desactivado el guardado de contraseñas, los navegadores propondrán almacenarla cuando formulario de login se presente en la pantalla.

La idea es plantear un formulario de login, ver los inconvenientes que se presentan y analizar soluciones, compatibles con casi todas las versiones de Firefox, Chrome e Internet Explorer (no puedo asegurar que lo que aquí se exponga funcione en todos los casos ni tampoco que sea para siempre).

Cuestiones genéricas a saber sobre el administrador de contraseñas de los navegadores

  • Aplica solamente en el ámbito del navegador que se esté usando
  • Solicita confirmación para guardar con los datos que están en los campos al momento de hacer el submit, principalmente cuando existe un input submit.
  • Tiene que haber un input password para que entre en acción.
  • Asocia el password al valor ingresado en el input de texto inmediatamente superior al de tipo password en el dominio en que se encuentra.
    • Si no lo hubiera, o bien no tuviera un valor, entonces se asocia el password directamente al dominio en que se encuentra.
  • En IE no se activa cuando el submit se realiza mediante javascript.

Formulario de login

<form action="index.cgi" method="post" id="login_form" name="login_form">
  Email: <input type="text" name="e" id="email" /><br />
  Password: <input type="password" name="p" id="password" /><br />
  <input type="submit" value="Login" id="login_button" />
</form>

OBS: en el atributo action del formulario se indica el script que procesará los datos ingresados, en este caso index.cgi pero podría ser cualquiera.

El problema en este caso es que la clave se comunica de manera plana.

  • Solución 1: Si se usara el protocolo HTTPS para la comunicación, la conexión de extremo a extremo estaría cifrada. Es lo más recomendado, pero vamos a considerar que no contamos con el certificado requerido para implementarlo y utilizamos HTTP común, a fin de hacer más interesante el ejemplo.
  • Solución 2: Cifrar la clave utilizando la función criptográfica que deseen. En el ejemplo utilizaremos SHA-512 que es bastante seguro y se puede obtener rápidamente mediante javascript.

OBS: Utilizaremos el framework Prototype de javascript para simplificar el código, pero pueden utilizar javascript puro o algún otro framework como jQuery.

Para implementar la solución 2, invocamos una función cuando se realice el submit del formulario para que lo procese. En ella ciframos la clave, de manera que cuando se comuniquen los datos, la misma viaje solamente de manera cifrada.

<script type="text/javascript">
  Event.observe(window, 'load', function(){
    Event.observe( 'login_form', 'submit', formProcess);
  });
  function formProcess(){
    //agregar validaciones
    $('password').value = hex_sha512($('password').value);
    return true;
  }
</script>

OBS: Se debe reemplazar el comentario //agregar validaciones por las validaciones del lado del cliente, correspondientes al procesamiento del formulario

Un detalle de color: tal como planteamos la solución, a la vista aparecen por un instante más caracteres en el campo justo antes de empezar a cargar la página después del submit (resultado del cifrado de la clave)

Mejora visual 1: podemos agregar un input hidden:

<input type="hidden" name="ps" id="secret">

donde guardamos la clave cifrada y luego borramos el contenido del campo password (de lo contrario viajaría la clana nuevamente)

$('secret').value = hex_sha512($('password').value);
$('password').value = '';

Entonces la clave ingresada desaparece por un instante justo antes de empezar a cargar la página después del submit.

Mejora visual 2: contamos la cantidad de caracteres de la clave ingresada y los reemplazamos por el caracter ‘x’:

$('secret').value = hex_sha512($('password').value);
var pass_len = $('password').value.length;
$('password').value = Array(pass_len+1).join("x");

A la vista, no cambia nada cuando hacemos el submit, pero hemos cifrado la clave.

OBS: Si pensaron hacer un disable del input password es posible que en ciertos navegadores no proponga recordarles la contraseña (ej. chrome). La mejora 2, se podría realizar también agregando OTRO input hidden y disabled (ubicado inmediatamente despúes de password) que se complete con la clave antes de borrarla, y que el procesamiento del formulario oculte el input password y se ponga visible el disabled.

Formulario completo

A continuación les dejo el código del formulario completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Test Site</title>

    <script type="text/javascript" src="sha512.js"></script>
    <script type="text/javascript" src="prototype.js"></script>

    <script type="text/javascript">
      Event.observe(window, 'load', function(){
        Event.observe( 'login_form', 'submit', formProcess);
      });
      function formProcess(){
        //agregar validaciones
        $('secret').value = hex_sha512($('password').value);
        var pass_len = $('password').value.length;
        $('password').value = Array(pass_len+1).join("x");
        return true;
      }
    </script>
  </head>
  <body>
    <form action="index.cgi" method="post" id="login_form" name="login_form">
      Email: <input type="text" name="e" id="email" /><br />
      Password: <input type="password" name="p" id="password" /><br />
      <input type="hidden" name="ps" id="secret">
      <input type="submit" value="Login" id="login_button" />
    </form>
  </body>
</html>

 

Anuncios

Manejo de grupos de pestañas en Firefox

Para los que usamos mucho un navegador notamos que a veces la cantidad de pestañas abiertas nos sobrepasan. Intentamos ordenarlas para que las que tratan de un mismo tema queden juntas pero a veces no alcanza.

Firefox cuenta con una herramienta que facilita esta gestión y se llama “Agrupar pestañas”. La misma se activa al hacer click sobre el icono representando 4 rectángulos de distintas dimensiones, por defecto ubicado a la izquierda del botón “minimizar” o con la combinación de teclas: Ctrl + Shift + E.

Cuando lo hacemos tendremos una nueva vista con un recuadro que contiene las pestañas con las que estábamos trabajando. Este representa un grupo de pestañas.

Acciones disponibles

Las siguientes acciones pueden realizarse desde la vista de grupos de pestañas.

Crear un nuevo grupo de pestañas

  1. Doble click sobre el escritorio (donde no haya ningún grupo)

Borrar un grupo de pestañas

  1. Click izquierdo sobre la cruz en la esquina superior derecha del grupo.
  2. Se muestra un recuadro con el texto “Deshacer cerrar grupo” con una cruz a su derecha
    1. Click izquierdo sobre el texto, cancela la operación y vuelve el grupo a la normalidad
    2. Click sobre la cruz, elimina definitivamente el grupo. Lo mismo sucedería si saliéramos de esta vista. Importante: esta acción es irreversible!

Renombrar un grupo de pestañas

  1. Click izquierdo sobre la parte superior del grupo (aparece un icono de un lápiz cuando está vacío)

Redimensionar un grupo de pestañas

  1. Click derecho sobre la esquina inferior derecha del grupo y arrastrar hasta el tamaño deseado
  2. Los demás grupos ajustarán su posición y/o sus dimensiones para no solaparse

Reubicar un grupo de pestañas

  1. Click derecho sobre cualquier parte del grupo y arrastrar hasta la ubicación deseada.
  2. Al igual que en la acción anterior, los demás grupos ajustarán su posición y/o sus dimensiones para no solaparse

Mover una pestaña de un grupo a otro

  1. Click izquierdo sobre la pestaña, arrastrar hasta el grupo deseado y soltar
    1. Si se suelta sobre un lugar donde no haya un grupo, se genera uno nuevo y la pestaña se mueve a él

Fuera de la vista de grupos de pestañas podemos hacerlo así:

  1. Click derecho sobre la pestaña
  2. Elegir la opción “Mover a grupo”
  3. Seleccionar el grupo destino a partir de su nombre
    • Si se indica “Nuevo grupo”, se genera uno nuevo y la pestaña se mueve a él

Buscar dentro de los grupos de pestañas

  1. Click sobre el icono de la lupa que se ubica debajo del botón “cerrar ventana”, o bien,
    • Presionar la combinación de teclas: Ctrl + F
  2. Escribir el texto a buscar
  3. Las pestañas que coincidan con lo buscado se resaltan

Abrir un grupo de pestañas

  1. Click izquierdo sobre cualquier parte del grupo
    • Si se realiza sobre una de las pestañas del grupo, se abre el mismo con dicha pestaña seleccionada

Salir de la vista de grupos de pestañas

  • Presionar la tecla Escape, o bien,
  • Click sobre el icono representando 4 rectángulos de distintas dimensiones, que ahora se ubica debajo del botón “cerrar ventana”

Además…

Las pestañas pegadas (fijadas) se mantienen entre los diferentes grupos, lo que lo hace muy conveniente. En la vista de grupos de pestañas podemos verlas en el margen derecho de cada grupo.

Dejar pestañas fijas en Firefox

Existen sitios a los que accedemos frecuentemente, la mayoría de ellos son herramientas: calendario, lista de tareas, agenda, etc. Cada vez que iniciamos el navegador podemos cargarlos a partir de los marcadores (o favoritos) o dejar las pestañas siempre visibles.

En Firefox, existe una alternativa mejor: “Pegar la pestaña”.  Para ello simplemente debemos:

  • Click derecho sobre la pestaña
  • Elegir la opción “Pegar pestaña”

Cuando se realiza esta acción la pestaña se posiciona a la izquierda de las restantes y se contrae al ancho del icono (favicon) del sitio. Allí se quedará hasta que la cerremos o indiquemos “Despegar pestaña” de manera análoga a la descripta previamente.

Desactivar el guardado de contraseñas en los navegadores

Los principales navegadores tienen una funcionalidad incluida que permite guardar las contraseñas (y el nombre usuario) en los formularios de acceso de las aplicaciones web. Por lo general, se encuentra activada por defecto y es muy cómo contar con ella en la computadora del hogar. Cuando detecta que nos hemos identificado, nos consulta si queremos guardar los datos ingresados para no tener que volver a escribirlos en futuras ocasiones.

Pero si el equipo es compartido o nos encontramos en la empresa tal vez no deseemos contar con dicha característica. Para desactivar el guardado de contraseñas (y borrar las que se hayan guardado) debemos seguir los siguientes pasos, dependiendo el navegador:

Chrome

  1. Escribir en la barra de navegación chrome://settings/, o bien
    1. Abrir el menú de Chrome (desde el icono de las 3 líneas horizontales)
    2. Seleccionar la opción “Configuración”
  2. Buscar “Contraseñas” mediante el buscador situado arriba a la derecha, o bien
    1. Ir hasta el final y hacer click sobre “Mostrar opciones avanzadas…”
    2. Buscar el apartado Contraseñas y formularios
  3. Desmarcar la opción “Preguntar si quieres guardar tus contraseñas web”
  4. Presionar sobre “Administrar contraseñas guardadas
    1. Borrar cada uno de los registros

Internet Explorer

  1. Ir a “Herramientas” desplegando la barra de menú, o bien
    1. Abrir el menú de Herramientas (desde el icono de engranaje)
  2. Seleccionar “Opciones de Internet”
  3. Abrir la solapa Contenido
  4. Presionar el botón Configuración en el apartado Autocompletar
  5. Desmarcar la opción “Nombres de usuario y contraseñas en formularios”. Se desactiva la opción “Preguntar antes de guardar las contraseñas”
  6. Presionar el botón “Eliminar el historial de Autocompletar…
    1. Desmarcar la opción “Conservar los datos de sitios web favoritos”
    2. Marcar solamente la opción “Contraseñas” (se pueden marcar otras opciones si así se lo desea)
    3. Confirmar con Eliminar
  7. Confirmar con Aceptar
  8. Cuando se concluya la limpieza, aparece en la parte inferior del navegador el mensaje “Internet Explorer terminó de eliminar el historial de exploración seleccionado”

Firefox

  1. Ir a “Herramientas” desplegando la barra de menú, o bien
    1. Abrir el menú de Firefox (desde el icono de las 3 líneas horizontales)
  2. Seleccionar Opciones
  3. Elegir el bloque de Seguridad
  4. Desmarcar la opción “Recordar contraseñas para los sitios” en el apartado Contraseñas
  5. Presionar el botón “Contraseñas guardadas…
    1. Presionar el botón “Eliminar todo”
    2. Presionar Cerrar
  6. Confirmar con Aceptar

Si nos encontramos en un lugar temporal como ser la casa de un amigo, una notebook de un compañero o un cibercafé, lo mejor es usar la navegación privada y evitar todo tipo de inconvenientes.

Abrir una nueva ventana para navegación privada

Una vez que tenemos el navegador abierto podemos necesitar acceder a la navegación privada donde, una vez que cerremos esa ventana, no quedará rastro de lo que hayamos realizado. Para abrir rápidamente una ventana nueva con la navegación privada, debemos utilizar los siguientes atajos según el navegador:

Desplegar la barra de menú en los navegadores

Tanto Firefox como Internet Explorer en sus últimas versiones ocultaron la barra de menú para parecerse más a Chrome y mostrar directamente las pestañas en la parte superior.

Si queremos desplegarla solamente debemos presionar la tecla Alt y listo!

Desactivar flash en los navegadores

Ya sea por seguridad o por obsolescencia, podemos necesitar desactivar Flash en nuestros navegadores. En cada uno la forma en la que esto se lleva a cabo es diferente:

Firefox:

  1. Accedemos a about:addons desde la barra de direcciones.
  2. Buscamos el plugin Shockwave Flash y en el desplegable de la derecha correspondiente, elegimos “Nunca activar”.
  3. La línea del plugin queda grisada y al lado del nombre aparece “(Deshabilitado)”

Si prefieren tener la posibilidad de decidir activarlo en algunos sitios, elijan la opción “Preguntar para activar”.

Chrome:

  1. Accedemos a chrome://plugins desde la barra de direcciones.
  2. Buscamos el complemento Adobe Flash player y clickeamos sobre “Inhabilitar”.
  3. La línea del complemento queda grisada y al lado del nombre aparece “(Inhabilitada)”

Internet Explorer:

  1. Accedemos a Herramientas desde la barra de menú (o desde el icono del engranaje) y seleccionamos “Administrar complementos”
  2. En la columna “Tipos de complementos” seleccionamos “Barras de herramientas y extensiones”
  3. En el listado de la derecha, buscamos el complemento Shockwave Flash Object y lo seleccionamos
  4. Presionamos el botón “Deshabilitar” (abajo a la derecha)
  5. En la fila del complemento, se cambia el valor de la columna Estado a “Deshabilitado”