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

issue: occasionally fails to find data #9

Closed harrisyn closed 1 year ago

harrisyn commented 1 year ago

Hi, I have been testing with your package to encrypt local storage, however I find that on occasion it simply fails to return any data. I suspect this occurs when the PC/Server is rebooted or when the browser is shutdown and reopened. Inspecting the local storage shows that all the keys are there, the application will however return null

sushinpv commented 1 year ago

Are you getting this issue while the website is still been opened ?

The browser fingerprint will change if its detects any change in the browser specified properties ( For testing purpose if we change the browser responsiveness to mobile and test the website, In this case, the browser property got changed ), Then this is the expected behavior, In these cases we should revalidate the user state and data

harrisyn commented 1 year ago

Hi @sushinpv Yes, I noticed that it happens when the responsiveness is changed to mobile as well.

Is there a workaround to prevent this? I have implemented this in a couple of places in this codebase and would rather not have to change. I understand that the browser fingerprint is crucial to how this works however can it be optionally toggled?

fernandofas commented 1 year ago

It doesn't work on my project. After the login it suppose to navigate to another page, but it doesn't. If I change back again to just localStorage, it works again. I can see the @secure.accessToken generated, but then nothing happens. No errors on console. This is a great package, but needs improvement.

sushinpv commented 1 year ago

@fernandofas Can you please attach your code and screenshot of your local storage if possible ?

sushinpv commented 1 year ago

@harrisyn @fernandofas The library is designed in a way that, First it create a fingerprint for the browser, This is by checking a lots of parameters including browser width user agent and etc, Then by using this key, The library will try to decrypt all the data which is stored in the localStorage, If its unable to decrypt any data, it will simply skip the data, by default it wont remove from the local storage

So when we change the browser to mobile view through inspect / tool, Then the browser properties will get changed, especially maximum width and user agent, So when we refresh the website, library will create a secure key, But this time it will be different from the last, So it wont decrypt the data.

So when we save the most sensitive data on the secure local storage, When the data is not present, we need to assume that the browser has been compromised and this should be the expected behavior. This should reflect in the way we handle the data too.

For example: If we are saving auth token and other user parameter which is used authenticate the user to the platform. If the data is not present we should logout the user,.

fernandofas commented 1 year ago

Hi sushinpv, not sure why you close the issue. The issue that I'm having is that I need the value of the localStorage in another component and it's not decrypting when I try to get the value. Any idea why that is happening? Cheers

sushinpv commented 1 year ago

@fernandofas can you please provide more information on the issue, with the code screenshot of how you are fetching the data and the library version what you are using as i requested in a previous comment,.

Then we can reopen the issue and find out the real cause for the problem statement and findout a fix for the same

fernandofas commented 1 year ago

Got to create a new instance in one component: secureLocalStorage.setItem('cid', '123456');

And tried to get the value in another component: const token = secureLocalStorage.getItem('cid');

Using Windows 10, VSCode, React

Any idea why it's not decrypting?

sushinpv commented 1 year ago

@fernandofas both are in the same code base right ?

In one component you are writting the data and in another component you are reading the data right ?

Please write an answer for my below questions

  1. Is both of these components are in the same page ?
  2. If yes, are you sure there is no race happening ( read is executing before write )
  3. Can you attach the code base for both these components
fernandofas commented 1 year ago

  1. Is both of these components are in the same page ?

            No
        The components belong to different pages.
        One is called login page and the other profile page.

  2. If yes, are you sure there is no race happening ( read is executing before write )

  3. Can you attach the code base for both these components

           Login component:

    secureLocalStorage.setItem("cid", 123456)

    Profile component

    secureLocalStorage.getItem("cid");

As mentioned before, on the second page/component, the storage value does not decrypt, so I can't use the value of the localStorage.

Kind regards,

Fernando Fas

On Fri, 3 Feb 2023 at 07:07, Sushin Pv @.***> wrote:

@fernandofas https://github.com/fernandofas both are in the same code base right ?

In one component you are writting the data and in another component you are reading the data right ?

Please write an answer for my below questions

  1. Is both of these components are in the same page ?
  2. If yes, are you sure there is no race happening ( read is executing before write )
  3. Can you attach the code base for both these components

— Reply to this email directly, view it on GitHub https://github.com/sushinpv/react-secure-storage/issues/9#issuecomment-1415183480, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEOL6Q2IS57Z7Z3OAGF624DWVSVEDANCNFSM6AAAAAAUACZ4NQ . You are receiving this because you were mentioned.Message ID: @.***>

Maduz0097 commented 1 year ago

Having the same issue! when the browser window resized or moved to a different screen for testing the values returned null

harrisyn commented 1 year ago

While I understood why it was built the way it was, I feel like it’s a lot more useful if the user could decide how much of the implementation you want to use in your project.

I ended up replacing it with my own custom localstorage hook with encryption.

On Mon, Feb 20, 2023 at 12:52 PM Yamika Perera @.***> wrote:

Having the same issue! when the browser window resized or moved to a different screen for testing the values returned null

— Reply to this email directly, view it on GitHub https://github.com/sushinpv/react-secure-storage/issues/9#issuecomment-1436967746, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABF3YIM6QJ5DG3G2NJBB52LWYNSJRANCNFSM6AAAAAAUACZ4NQ . You are receiving this because you were mentioned.Message ID: @.***>

sushinpv commented 1 year ago

@harrisyn @Maduz0097 This issue has been fixed in the latest version of react-secure-storage:1.1.0,

Please be aware that the key will change if the user agent of the browser changes.

Maduz0097 commented 1 year ago

@harrisyn @Maduz0097 This issue has been fixed in the latest version of react-secure-storage:1.1.0,

Please be aware that the key will change if the user agent of the browser changes.

It was 15 hours ago if I'm correct? meantime I have developed a custom solution anyway thanks for the consideration.