localStorage에 사용자 데이터를 저장하는 것이 안전한가요?

웹 애플리케이션을 개발할 때 경험을 개선하거나 상태 지속성을 유지하기 위해 사용자 데이터를 브라우저에 저장해야 하는 경우가 종종 있습니다. 하지만 이를 위해 localStorage를 사용하는 것이 안전한가요? 위험, 모범 사례, 안전한 대안을 살펴보겠습니다.

로컬스토리지란 무엇인가요?
localStorage는 클라이언트 측에 데이터를 간단하고 지속적으로 저장할 수 있는 브라우저 API입니다. sessionStorage와 달리 localStorage에 저장된 데이터는 사용자가 브라우저를 닫았다가 다시 연 후에도 계속 액세스할 수 있습니다.

실용적인 도구이기는 하지만 단순성에는 일부 보안 제한이 따릅니다.

시나리오: 사용자 인증
Supabase를 사용하여 사용자를 인증하는 애플리케이션이 있다고 가정해 보세요. 로그인한 후 다음 예와 같이 브라우저에 사용자 정보를 저장하려고 합니다.

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)
  }
}

아이디어는 간단해 보입니다. 나중에 사용할 수 있도록 사용자 개체를 localStorage에 저장하는 것입니다. 하지만 이 접근 방식은 안전한가요?

localStorage 사용의 위험

1. 악성스크립트(XSS) 노출 localStorage를 사용할 때 가장 큰 보안 문제는 페이지에서 실행되는 모든 스크립트에서 액세스할 수 있다는 것입니다. 여기에는 XSS(Cross-Site Scripting) 공격을 통해 웹사이트에 삽입될 수 있는 악성 스크립트가 포함됩니다.

예를 들어 공격자가 페이지에 다음 코드를 삽입하는 경우:

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

사용자에 대한 민감한 정보를 포함하여 저장된 데이터에 액세스할 수 있습니다.

1. 데이터는 암호화되지 않습니다
   localStorage는 데이터를 일반 텍스트로 저장합니다. 즉, 사용자 장치에 액세스할 수 있는 사람은 누구나 브라우저 콘솔을 열고 저장된 정보를 직접 볼 수 있습니다.

2. 자동 만료 없음
   쿠키와 달리 localStorage에는 데이터를 자동으로 만료시키는 기본 제공 메커니즘이 없습니다. 이로 인해 오래되거나 오래된 정보가 불필요하게 저장될 수 있습니다.

더 안전한 대안

1. Supabase 세션 신뢰 Supabase는 이미 보안 쿠키와 JWT 토큰을 통해 인증 세션을 관리하고 있습니다. 사용자 개체를 localStorage에 저장할 필요가 없습니다.

다음 메소드를 사용하여 언제든지 사용자 세션을 확인할 수 있습니다.

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

1. sessionStorage 사용
   브라우저에 데이터를 저장해야 하는 경우 sessionStorage 사용을 고려해보세요. 브라우저 탭이나 창이 열려 있는 동안에만 데이터를 유지합니다. 이렇게 하면 장치를 물리적으로 도난당한 경우 노출 위험이 줄어들지만 XSS로부터 보호되지는 않습니다.

2. 민감하지 않은 데이터만 저장
   localStorage에 지속성이 필요한 경우 액세스 토큰이나 개인 데이터와 같은 민감한 정보를 저장하지 마십시오. 사용자 식별자와 같은 일반 정보만 저장하세요.
   

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. XSS에 대한 보호 구현 XSS 위험을 완화하려면 다음 보안 관행을 구현하십시오.

무단 스크립트를 방지하려면 엄격한 콘텐츠 보안 정책(CSP)을 사용하세요.
모든 사용자 입력을 검증하고 삭제합니다.
종속성과 라이브러리를 항상 최신 상태로 유지하세요.

1. 데이터 암호화 localStorage 사용이 꼭 필요한 경우 데이터를 저장하기 전에 암호화할 수 있습니다. 이렇게 하면 위험이 완전히 제거되지는 않지만 추가 보안 계층이 추가됩니다.

CryptoJS의 예:

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

주의: 암호화 키는 노출되면 보안이 침해될 수 있으므로 반드시 보호하시기 바랍니다.

결론
localStorage는 브라우저에 데이터를 저장하는 실용적인 도구이지만 민감한 데이터에는 적합하지 않습니다. 주요 권장 사항은 다음과 같습니다.

Supabase에서 관리하는 신뢰 세션
민감한 정보를 localStorage에 저장하지 마세요.
XSS 보호와 같은 우수한 보안 사례를 구현합니다.
이러한 관행을 통해 공격으로부터 데이터를 보호하는 동시에 사용자 경험을 유동적으로 유지할 수 있습니다.

어떻게 생각하세요? 프로젝트에서 localStorage를 사용하시나요? 댓글로 여러분의 경험을 공유해주세요!

위 내용은 localStorage에 사용자 데이터를 저장하는 것이 안전한가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!