search

sushinpv / react-secure-storage

This is a wrapper written above local storage to write the data securely to local storage
https://npmjs.com/package/react-secure-storage
MIT License
126 stars 12 forks source link

Item not found, but is visible via devtools #27

Closed JakubGrzegowski closed 1 year ago

JakubGrzegowski commented 1 year ago

I see in dev tools, that there is an item in storage that I'm trying to access image

However, when trying to get entire SecureLocalStorage it's completely empty image

And now the fun fact: it works properly on another computer. Same code, same items in memory. image

image

Are there any cases, where it is impossible to simply read the storage, even if it exists? Would appreciate any suggestions on how to address this issue

sushinpv commented 1 year ago

Hi @JakubGrzegowski, Let me describe how the library operates internally; I believe this will give you a thorough understanding of your question.

React-secure-storage generates a special encryption key during website or library startup, taking into account 10+ browser parameters and user input hash key, and tries to decrypt previously saved data in local storage! And using this key, all the data that you store on local storage will be encrypted.

The next time you refresh, it repeats the process by creating a encryption key and attempting to read all the data already stored in localStorage.

Suppose, If any of your browser property get changes or user inout hash key changes in these scenario, the encryption key will change, The library will lot this load the pre-exiting data, because it is enable to decrypt the pre-existing data and it will return default null for these!

This may be the cause of your receiving null even when encrypted data is stored locally; this is done for security reasons. The system shouldn't decrypt and access the data if someone simply copies and pastes your browser's local storage information onto their browser.

These are one more potential causes for this error, You have two monitors set up, and the screens on each of them are different sizes. The same problem will then arise when you set the data from one monitor and attempt to refresh and read from the second one.

There is an easy way to remove this issue, You can remove the browser / screen width checking as follows

SECURE_LOCAL_STORAGE_DISABLED_KEYS=ScreenPrint

Use the propreate one with your language as follows

REACT_APP_SECURE_LOCAL_STORAGE_DISABLED_KEYS=ScreenPrint
VITE_SECURE_LOCAL_STORAGE_DISABLED_KEYS=ScreenPrint
NEXT_PUBLIC_LOCAL_STORAGE_DISABLED_KEYS=ScreenPrint
sushinpv commented 1 year ago

I'm closing this issue because I haven't heard anything from you. If necessary, feel free to reopen it.