76 lines
2.7 KiB
Markdown
76 lines
2.7 KiB
Markdown
|
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.
|
||
|
|
|
||
|
|
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][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
|
||
|
|
```
|
||
|
|
|
||
|
|
## Links
|
||
|
|
|
||
|
|
[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
|