🙈 무분별한 `localStorage` 사용: 개인 정보 유출 및 XSS 공격 위험 증가

Why Wrong?

How to Fix?

// ❌ 민감한 정보를 localStorage에 저장 (위험)
localStorage.setItem('apiKey', 'YOUR_API_KEY');

// ❌ XSS 공격에 취약한 데이터를 localStorage에 저장 (위험)
localStorage.setItem('username', '<script>alert("XSS");</script>');

// localStorage에서 데이터를 읽어와 DOM에 직접 삽입 (위험)
document.getElementById('username').innerHTML = localStorage.getItem('username');

// ✅ 민감한 정보는 서버에서 관리하고 토큰만 저장
localStorage.setItem('authToken', 'YOUR_AUTH_TOKEN');

// ✅ XSS 공격 방지를 위한 입력값 검증 및 출력값 인코딩
function sanitizeInput(input) {
  const div = document.createElement('div');
  div.textContent = input;
  return div.innerHTML;
}

const username = localStorage.getItem('username');
if (username) {
  document.getElementById('username').innerHTML = sanitizeInput(username);
}

// ✅ Web Crypto API를 사용하여 암호화
async function encryptData(data) {
  const key = await crypto.subtle.generateKey(
    { name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']
  );
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const encodedData = new TextEncoder().encode(data);
  const cipherText = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv: iv }, key, encodedData
  );
  return {
    cipherText: Array.from(new Uint8Array(cipherText)),
    iv: Array.from(iv),
    key: await crypto.subtle.exportKey('jwk', key)
  };
}

async function saveEncryptedData(data, keyName) {
  const encrypted = await encryptData(data);
  localStorage.setItem(keyName, JSON.stringify(encrypted));
}


// 사용 예시
saveEncryptedData('Sensitive Data', 'encryptedData');

You Might Also Like