Los archivos físicos de los navegadores para Web Storage API

En Octubre del año pasado estuve hablando de una de las APIs de HTML 5 que consiguió posicionarse rápidamente en los navegadores más usados: Web Storage API. En este post me gustaría compartir con vosotros algunas comprobaciones que estuve realizando sobre el archivo físico que utiliza el navegador para almacenar la información recogida a través de dicha API.

En primer lugar las especificaciones, tanto la W3C como WHATWG, no indican que la información que se almacene deba estar encriptada por parte del navegador, por lo que es nuestro deber asegurarnos de que nuestra información no quede expuesta.
En cuanto al formato en el cual se almacenan los datos, y su localización, cada navegador ha determinado uno distinto:

Chrome: Utiliza SQL Lite para almacenar los datos. Se genera un archivo por cada origin (dominio) que utilice esta API y todos ellos están ubicados en C:Users%username%AppDataLocalGoogleChromeUser DataDefaultLocal Storage
Internet Explorer: Desde la adopción de esta API en la versión 9, utiliza un archivo XML por cada dominio. Actualmente estoy utilizando la versión 10 del navegador pero parece ser que con Windows 8 la ubicación del directorio ha sido modificada a la siguiente ruta: C:Users%username%AppDataLocalLowMicrosoftInternet ExplorerDOMStore, donde habrá una serie de subcarpetas y un archivo XML por cada origin, con un formato como el siguiente:
```
<root><item name="wishes" value="Gisela,Gis,pee,lalala" ltime="266187712" htime="30278028" /></root>
```
Opera: No es de extrañar que Opera nos siga sorprendiendo con su implementación para HTML 5 🙂 y es que es el único de los navegadores actuales que, por un lado, utiliza un fichero de índice para listar todos los archivos de Web Storage creados por el navegador y, por otro lado, un XML con la información encriptada. La ruta para los archivos de Opera es C:Users%username%AppDataLocalOperaOperapstorage, donde psindex.dat podemos abrirlo con Notepad y visualizar el XML:
```
<?xml version="1.0" encoding="utf-8"?>
<preferences>
  <section id="D883C114A1353950BFA1C509FD4820C5F4ED30FF">
    <value id="Type" xml:space="preserve">localstorage</value>
    <value id="Origin" xml:space="preserve">http://fiddle.jshell.net</value>
    <value id="DataFile" xml:space="preserve">pstorage\0013\00000000</value>
  </section>
</preferences>
```
Si abrimos el archivo asociado al ejemplo anterior, veremos que la información del mismo está encriptada:
```
<ws>
<e><k>dwBpAHMAaABlAHMA</k>
<v>UAByAHUAZQBiAGEALABPAHAAZQByAGEA</v></e>
</ws>
```
Firefox: Al igual que Chrome, hace uso de SQL Lite y es posible localizar la información en C:Users%username%AppDataRoamingMozillaFirefoxProfiles1exvav76.default en un archivo llamado webappsstore.sqlite, donde almacena toda la información de manera conjunta.
Safari para Windows: Utiliza el mismo sistema que Chrome y Firefox. La ruta en este caso es C:Users%username%AppDataLocalApple ComputerSafariLocalStorage y crea un archivo independiente por origin.

Para poder visualizar la información de los archivos de tipo SQL Lite, he estado utilizando una herramienta gratuita llamada SQLite Database Browser

Otra prueba que pude realizar fue copiar uno de estos archivos, en concreto del navegador Chrome, en otra máquina con el objetivo de saber si lo tomaría como suyo y por lo tanto visualizar o manipular los datos almacenados… y así fue.

Como conclusión, es muy importante que tengamos cuidado con la información que queremos almacenar a través de esta API y utilizar los mecanismos necesarios para securizar aquellos datos que puedan ser sensibles para nuestra aplicación.

Espero que haya sido de utilidad 🙂

¡Saludos!