A simple wrapper to save and restore localStorage of webapps in server

A browser's localStorage allows webapps to store data locally in browser's cache. The data usually contains apps's state and credentials to access other resources. This wrapper periodically uploads the localStorage to the server and restores back to the browser on first load. This is useful for browsers that cleanup local storage when exiting like Tor Browser or to share across multiple browsers

How does it work?

On path /wrap/ of the webapp, wrap.html is served. This contains the actual app in an iframe. Before the iframe would load, javascript fetches the localStorage from server and sets the browser localStorage. Then sets a timer for every 10 minutes to update back to server.

Note:

1. localStorage is accessible to only the same domain. So this only works when you selfhost the webapp

2. Make sure the webapp is properly authenticated without relying on localStorage. E.g.

   a. Setup HTTP Basic Auth b. Webapp is only served inside home network c. Served under a secret URL not shared with anyone like tor onion url

Usecase example

Phanpy is web client to fediverse servers. Phanpy keeps the access token to the fediverse server in localStorage. This way the user can access their profile without having to login and authorize phanpy everytime.

Below is my Caddy file config for phanpy.

http://phanpy.{$PRIVATE_ONION} {
        header {
            Content-Security-Policy "default-src 'self' 'unsafe-inline' social.balki.me wss://social.balki.me data: ;"
            Referrer-Policy same-origin
        }
        reverse_proxy /wrap/* localhost:3242
        root * /var/www/phanpy/
        file_server
}

Here the PRIVATE_ONION is secret and anyone who knows can accesss the fediverse profile. CSP header restricts which external sites are allowed in javascript. All of those need to be selfhosted as they receive the url in Origin header. Referer-Policy header makes sure not leak the url when clicking on external links.

See here to learn how to setup an onion service.

Let me know at @balki@balki.me in fediverse, if you find it useful

Install

go install go.balki.me/remote-local-storage@latest

Links