remote-local-storage/README.md

A simple wrapper to save and restore [localStorage][0] 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][1] or to share across
multiple browsers

## How does it work?

On path `/wrap/` of the webapp, [wrap.html](./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][0] 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.

   1. Setup HTTP Basic Auth
   2. Webapp is only served inside home network
   3. Served under a secret URL not shared with anyone like [tor onion url][3]


## Usecase example

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

Below is my [Caddy][6] file config for phanpy.

```Caddyfile
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][5] header restricts which external sites are allowed
in javascript. All of those need to be selfhosted as they receive the url in
[Origin][7] header. [Referer-Policy][8] header makes sure not leak the url when
clicking on external links.

See [here][4] to learn how to setup an onion service.

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

## Install

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

---

[0]: https://developer.mozilla.org/docs/Web/API/Window/localStorage
[1]: https://torproject.org
[2]: https://phanpy.social
[3]: https://community.torproject.org/onion-services/
[4]: https://community.torproject.org/onion-services/setup/
[5]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
[6]: https://caddyserver.com/
[7]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin
[8]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy