Accessing Local Storage/ Session Storage in custom components

I was trying to build a custom component using local-forge for storing client data on client’s browser and then retrieve it when the user revisits the app. It looks like the iframe for custom components is sandboxed and not allowed to access local-storage/indexdb etc. is there any work-around to this ?
Thanks in advance !

Hey @ash2shukla, unfortunately this is not possible for now :confused: there’s a thread on this starting in the middle of this convo : Disqus component (WIP) and a solution involving starting a server on another thread and iframing it back into Streamlit.

A more official workaround is in the works but I’m not expecting that soon (@tim don’t hesitate to chime in to provide more info :wink: )

Fanilo

1 Like

Hey @ash2shukla - @andfanilo is correct, we don’t currently support this. The issue is that we omit the allow-same-origin sandbox flag on the component iframe for security reasons - and unfortunately, the localStorage API will not work without that flag.

As @andfanilo mentioned, we’re evaluating the various ways we could support this sandbox flag without opening a security hole – but there’s no timeline for that, currently.

There is a workaround, however: it’s sort of a pain, but if you’re able to use components.iframe - that is, if you can host your component externally, and it doesn’t require bi-directional communication with Streamlit - then your component’s iframe will have the allow-same-origin flag. (I realize this is not an acceptable workaround for many use cases, but I’m putting it out there in case it would work for you.)

2 Likes