🛡️ 민감한 데이터 클라이언트 스토리지 오남용: XSS 공격의 먹잇감

Why Wrong?

How to Fix?

// 🚨 민감한 사용자 토큰을 localStorage에 저장하는 예시 (보안 취약)
function login(username, password) {
  fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
  })
  .then(response => response.json())
  .then(data => {
    if (data.token) {
      localStorage.setItem('authToken', data.token); // 🚨 XSS 공격에 노출될 수 있는 토큰 저장
      localStorage.setItem('userId', data.userId);   // 🚨 XSS 공격에 노출될 수 있는 사용자 ID 저장
      console.log('로그인 성공! 토큰 및 사용자 ID가 localStorage에 저장됨.');
    } else {
      console.error('로그인 실패.');
    }
  })
  .catch(error => console.error('네트워크 에러:', error));
}

// 저장된 토큰을 사용하여 API 요청
function fetchData() {
  const token = localStorage.getItem('authToken'); // localStorage에서 토큰을 직접 읽어옴
  if (token) {
    fetch('/api/data', {
      headers: { 'Authorization': `Bearer ${token}` }
    })
    .then(response => response.json())
    .then(data => console.log('데이터:', data))
    .catch(error => console.error('데이터 로딩 에러:', error));
  } else {
    console.warn('토큰이 없습니다. 로그인해주세요.');
  }
}

// 예시 사용 (실제 환경에서는 권장되지 않음)
// login('testuser', 'testpass');
// fetchData();

// ✅ 안전한 인증 토큰 관리를 위한 HttpOnly 쿠키 사용 예시
// (백엔드에서 HttpOnly, Secure, SameSite=Lax 속성을 가진 Set-Cookie 헤더를 설정했다고 가정)

// 클라이언트에서 로그인 요청: 서버가 HttpOnly 쿠키로 토큰을 설정함
function loginSecure(username, password) {
  fetch('/api/login', { 
    method: 'POST',
    credentials: 'include', // 요청 시 자동으로 쿠키를 포함하여 전송
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
  })
  .then(response => {
    if (response.ok) {
      console.log('로그인 성공! 토큰은 HttpOnly 쿠키로 안전하게 설정되었습니다.');
      // 민감하지 않은 사용자 환경 설정은 localStorage에 저장 가능
      localStorage.setItem('userTheme', 'dark'); // ✅ 비민감성 데이터
      localStorage.setItem('lastLoginTime', new Date().toISOString()); // ✅ 비민감성 데이터
    } else {
      console.error('로그인 실패.');
    }
  })
  .catch(error => console.error('네트워크 에러:', error));
}

// HttpOnly 쿠키는 클라이언트 JavaScript에서 직접 읽을 수 없으므로,
// API 요청 시 자동으로 함께 전송됩니다.
function fetchDataSecure() {
  fetch('/api/data', {
    credentials: 'include' // 요청 시 자동으로 HttpOnly 쿠키를 포함하여 전송
  })
  .then(response => response.json())
  .then(data => console.log('데이터:', data))
  .catch(error => console.error('데이터 로딩 에러:', error));
}

// 민감하지 않은 사용자 환경 설정 저장 예시 (localStorage 사용)
function saveUserPreference(setting, value) {
  try {
    localStorage.setItem(setting, value);
    console.log(`${setting} 설정이 localStorage에 저장되었습니다.`);
  } catch (e) {
    console.error(`localStorage 저장 실패 (${setting}):`, e);
  }
}

// 예시 사용
// loginSecure('secureuser', 'securepass');
// fetchDataSecure();
// saveUserPreference('notificationEnabled', 'true');

You Might Also Like