When developing web applications, the need often arises to store user data in the browser to improve the experience or maintain state persistence. But is it safe to use localStorage for this? Let's explore the risks, best practices, and safe alternatives.

What is localStorage?
localStorage is a browser API that allows you to store data simply and persistently on the client side. Unlike sessionStorage, data saved in localStorage remains accessible even after the user closes and reopens the browser.

Although it is a practical tool, its simplicity comes with some security limitations.

The Scenario: User Authentication
Imagine you have an application that uses Supabase to authenticate users. After logging in, you want to store user information in the browser, like this example:

async function checkAuth() {
  try {
    const { data, error } = await supabase.auth.getUser()
    if (error) throw error

    if (data.user) {
      user.value = data.user
      localStorage.setItem('user', JSON.stringify(data.user)) // Armazenando o usuário
      console.log('Usuário autenticado:', data.user)
    } else {
      localStorage.removeItem('user')
    }
  } catch (error) {
    console.error('Erro ao verificar autentica??o:', (error as Error).message)
  }
}

The idea seems simple: save the user object in localStorage to use it later. But is this approach safe?

Risks of Using localStorage

1. Exposure to Malicious Scripts (XSS) The biggest security issue when using localStorage is that it can be accessed by any script running on the page. This includes malicious scripts that can be injected into the website through XSS (Cross-Site Scripting) attacks.

For example, if an attacker manages to inject the following code into your page:

console.log(localStorage.getItem('user'))

They will have access to stored data, including sensitive information about the user.

1. Data is not encrypted
   localStorage stores data as plain text. This means that anyone with access to the user's device can open the browser console and directly view the saved information.

2. No Automatic Expiration
   Unlike cookies, localStorage does not have a built-in mechanism to automatically expire data. This can lead to unnecessary storage of old or outdated information.

Safer Alternatives

1. Trust Supabase Sessions Supabase already manages authentication sessions through secure cookies and JWT tokens. There is no need to save the user object to localStorage.

You can check the user session at any time using the method:

const { data, error } = await supabase.auth.getUser()

1. Use sessionStorage
   If you need to store data in the browser, consider using sessionStorage. It keeps data only as long as the browser tab or window is open. This reduces the risk of exposure if the device is physically stolen, but does not protect against XSS.

2. Only Save Non-Sensitive Data
   If you require persistence in localStorage, avoid storing sensitive information such as access tokens or personal data. Only save generic information, such as a user identifier:
   

async function checkAuth() {
  try {
    const { data, error } = await supabase.auth.getUser()
    if (error) throw error

    if (data.user) {
      user.value = data.user
      localStorage.setItem('user', JSON.stringify(data.user)) // Armazenando o usuário
      console.log('Usuário autenticado:', data.user)
    } else {
      localStorage.removeItem('user')
    }
  } catch (error) {
    console.error('Erro ao verificar autentica??o:', (error as Error).message)
  }
}

1. Implement Protections Against XSS To mitigate XSS risks, implement the following security practices:

Use a strict Content Security Policy (CSP) to prevent unauthorized scripts.
Validate and sanitize all user input.
Keep dependencies and libraries always up to date.

1. Encrypt Data If it is essential to use localStorage, you can encrypt the data before storing it. This adds an extra layer of security, although it does not completely eliminate risks.

Example with CryptoJS:

console.log(localStorage.getItem('user'))

Caution: Be sure to protect the encryption key, as if it is exposed, security will be compromised.

Conclusion
Although localStorage is a practical tool for storing data in the browser, it is not ideal for sensitive data. Here are the main recommendations:

Trust sessions managed by Supabase.
Avoid saving sensitive information to localStorage.
Implement good security practices such as XSS protection.
With these practices, you can ensure the user experience is fluid while protecting your data from attacks.

What do you think? Do you use localStorage in your project? Share your experiences in the comments!

The above is the detailed content of Is it safe to store user data in localStorage?. For more information, please follow other related articles on the PHP Chinese website!