📝 비밀번호 해싱 예제

사용자 비밀번호를 안전하게 해싱하는 방법을 알아볼게:

async function hashPassword(password) {
    // 비밀번호를 UTF-8 인코딩된 바이트 배열로 변환
    const encoder = new TextEncoder();
    const data = encoder.encode(password);
    
    // SHA-256 해시 생성
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    
    // 해시 값을 16진수 문자열로 변환
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(b => 
        b.toString(16).padStart(2, '0')
    ).join('');
    
    return hashHex;
}

// 사용자 등록 시 비밀번호 해싱
async function registerUser(username, password) {
    const hashedPassword = await hashPassword(password);
    
    // 해시된 비밀번호를 데이터베이스에 저장
    console.log(`사용자 ${username} 등록 완료!`);
    console.log(`해시된 비밀번호: ${hashedPassword}`);
    
    // 실제로는 여기서 서버에 데이터를 전송하게 됨
    return { username, hashedPassword };
}

// 사용 예
registerUser('javascript_lover', 'supersecret123');

⚠️ 중요: 실제 애플리케이션에서는 단순 해시보다 더 안전한 솔트(salt)와 키 스트레칭을 적용한 방식을 사용해야 해! 이에 대해서는 뒤에서 더 자세히 설명할게.

🔄 대칭 암호화 예제 (AES-GCM)

민감한 데이터를 암호화하고 복호화하는 방법을 알아볼게:

// 암호화 키 생성 함수
async function generateKey() {
    return await window.crypto.subtle.generateKey(
        {
            name: "AES-GCM",
            length: 256
        },
        true, // 내보내기 가능
        ["encrypt", "decrypt"] // 용도
    );
}

// 데이터 암호화 함수
async function encryptData(data, key) {
    // 초기화 벡터(IV) 생성 - 매번 새로운 값 사용
    const iv = window.crypto.getRandomValues(new Uint8Array(12));
    
    // 데이터를 UTF-8 인코딩된 바이트 배열로 변환
    const encoder = new TextEncoder();
    const dataBuffer = encoder.encode(data);
    
    // 암호화 수행
    const encryptedBuffer = await window.crypto.subtle.encrypt(
        {
            name: "AES-GCM",
            iv: iv
        },
        key,
        dataBuffer
    );
    
    // 암호화된 데이터와 IV를 함께 반환
    return {
        encryptedData: new Uint8Array(encryptedBuffer),
        iv: iv
    };
}

// 데이터 복호화 함수
async function decryptData(encryptedData, iv, key) {
    // 복호화 수행
    const decryptedBuffer = await window.crypto.subtle.decrypt(
        {
            name: "AES-GCM",
            iv: iv
        },
        key,
        encryptedData
    );
    
    // 복호화된 데이터를 문자열로 변환
    const decoder = new TextDecoder();
    return decoder.decode(decryptedBuffer);
}

// 사용 예
async function secureDataExample() {
    // 암호화할 데이터
    const sensitiveData = "신용카드 번호: 1234-5678-9012-3456";
    
    // 키 생성
    const key = await generateKey();
    
    // 데이터 암호화
    const { encryptedData, iv } = await encryptData(sensitiveData, key);
    console.log("암호화 완료:", encryptedData);
    
    // 데이터 복호화
    const decryptedData = await decryptData(encryptedData, iv, key);
    console.log("복호화 결과:", decryptedData);
}

secureDataExample();

🔐 안전한 로그인 시스템 구현

사용자 인증과 세션 관리를 안전하게 구현하는 방법을 알아볼게:

// 클라이언트 측 코드

// 보안 관련 유틸리티 모음
const SecurityUtils = {
    // 비밀번호 강도 검사
    checkPasswordStrength(password) {
        const minLength = 8;
        const hasUpperCase = /[A-Z]/.test(password);
        const hasLowerCase = /[a-z]/.test(password);
        const hasNumbers = /\d/.test(password);
        const hasSpecialChars = /[!@#$%^&*(),.?":{}|<>]/.test(password);
        
        let strength = 0;
        let feedback = [];
        
        if (password.length < minLength) {
            feedback.push('비밀번호는 최소 8자 이상이어야 합니다.');
        } else {
            strength += 1;
        }
        
        if (!hasUpperCase) {
            feedback.push('대문자를 포함해주세요.');
        } else {
            strength += 1;
        }
        
        if (!hasLowerCase) {
            feedback.push('소문자를 포함해주세요.');
        } else {
            strength += 1;
        }
        
        if (!hasNumbers) {
            feedback.push('숫자를 포함해주세요.');
        } else {
            strength += 1;
        }
        
        if (!hasSpecialChars) {
            feedback.push('특수문자를 포함해주세요.');
        } else {
            strength += 1;
        }
        
        // 강도 레벨: 0-1: 매우 약함, 2: 약함, 3: 보통, 4: 강함, 5: 매우 강함
        return {
            score: strength,
            feedback: feedback
        };
    },
    
    // CSRF 토큰 가져오기
    getCSRFToken() {
        return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    },
    
    // 안전한 HTTP 요청 보내기
    async secureRequest(url, method, data = null) {
        const headers = {
            'Content-Type': 'application/json',
            'X-CSRF-Token': this.getCSRFToken()
        };
        
        const options = {
            method: method,
            headers: headers,
            credentials: 'same-origin' // 쿠키 포함
        };
        
        if (data && (method === 'POST' || method === 'PUT')) {
            options.body = JSON.stringify(data);
        }
        
        try {
            const response = await fetch(url, options);
            
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            
            return await response.json();
        } catch (error) {
            console.error('요청 실패:', error);
            throw error;
        }
    },
    
    // 입력값 이스케이프 처리
    escapeHTML(str) {
        return str
            .replace(/&/g, '&')
            .replace(/</g, '<')
            .replace(/>/g, '>')
            .replace(/"/g, '"')
            .replace(/'/g, ''');
    }
};

// 사용자 인증 관련 기능
const AuthService = {
    // 로그인 처리
    async login(username, password) {
        try {
            const response = await SecurityUtils.secureRequest('/api/login', 'POST', {
                username,
                password
            });
            
            if (response.token) {
                // 토큰을 메모리에 저장
                this.setAuthToken(response.token);
                
                // 사용자 정보 저장 (민감하지 않은 정보만)
                const userInfo = {
                    id: response.user.id,
                    username: response.user.username,
                    displayName: response.user.displayName,
                    lastLogin: new Date().toISOString()
                };
                
                sessionStorage.setItem('user_info', JSON.stringify(userInfo));
                
                return true;
            }
            
            return false;
        } catch (error) {
            console.error('로그인 실패:', error);
            return false;
        }
    },
    
    // 토큰 메모리 저장
    setAuthToken(token) {
        this.authToken = token;
        
        // API 요청 시 토큰을 자동으로 포함하도록 설정
        this.setupAuthInterceptor();
    },
    
    // 토큰 가져오기
    getAuthToken() {
        return this.authToken;
    },
    
    // API 요청에 인증 토큰 자동 포함
    setupAuthInterceptor() {
        // 이 예제에서는 fetch를 직접 사용하지만,
        // axios 등의 라이브러리를 사용할 경우 인터셉터 설정
    },
    
    // 로그아웃
    logout() {
        // 토큰 제거
        this.authToken = null;
        
        // 세션 스토리지 정리
        sessionStorage.removeItem('user_info');
        
        // 서버에 로그아웃 알림
        SecurityUtils.secureRequest('/api/logout', 'POST');
    },
    
    // 사용자 등록
    async register(username, password, email) {
        // 비밀번호 강도 검사
        const strengthCheck = SecurityUtils.checkPasswordStrength(password);
        
        if (strengthCheck.score < 3) {
            return {
                success: false,
                message: '비밀번호가 너무 약합니다.',
                feedback: strengthCheck.feedback
            };
        }
        
        try {
            const response = await SecurityUtils.secureRequest('/api/register', 'POST', {
                username,
                password,
                email
            });
            
            return {
                success: true,
                user: response.user
            };
        } catch (error) {
            console.error('회원가입 실패:', error);
            return {
                success: false,
                message: '회원가입 중 오류가 발생했습니다.'
            };
        }
    }
};

// 사용 예시
document.addEventListener('DOMContentLoaded', () => {
    // 로그인 폼 처리
    const loginForm = document.getElementById('login-form');
    if (loginForm) {
        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            const success = await AuthService.login(username, password);
            
            if (success) {
                window.location.href = '/dashboard';
            } else {
                alert('로그인에 실패했습니다. 아이디와 비밀번호를 확인해주세요.');
            }
        });
    }
    
    // 회원가입 폼 처리
    const registerForm = document.getElementById('register-form');
    if (registerForm) {
        const passwordInput = document.getElementById('password');
        const strengthMeter = document.getElementById('password-strength');
        
        // 비밀번호 입력 시 강도 표시
        passwordInput.addEventListener('input', () => {
            const password = passwordInput.value;
            const strength = SecurityUtils.checkPasswordStrength(password);
            
            // 강도에 따라 미터 업데이트
            strengthMeter.value = strength.score;
            
            // 피드백 표시
            const feedbackEl = document.getElementById('password-feedback');
            feedbackEl.innerHTML = strength.feedback.map(
                item => `<li>${SecurityUtils.escapeHTML(item)}</li>`
            ).join('');
        });
        
        // 폼 제출 처리
        registerForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const email = document.getElementById('email').value;
            
            const result = await AuthService.register(username, password, email);
            
            if (result.success) {
                alert('회원가입이 완료되었습니다. 로그인해주세요.');
                window.location.href = '/login';
            } else {
                alert(`회원가입 실패: ${result.message}`);
                
                // 피드백 표시
                if (result.feedback) {
                    const feedbackEl = document.getElementById('password-feedback');
                    feedbackEl.innerHTML = result.feedback.map(
                        item => `<li>${SecurityUtils.escapeHTML(item)}</li>`
                    ).join('');
                }
            }
        });
    }
    
    // 로그아웃 버튼 처리
    const logoutBtn = document.getElementById('logout-btn');
    if (logoutBtn) {
        logoutBtn.addEventListener('click', (e) => {
            e.preventDefault();
            AuthService.logout();
            window.location.href = '/login';
        });
    }
});

🔄 안전한 데이터 동기화 구현

사용자 데이터를 안전하게 서버와 동기화하는 방법을 알아볼게:

// 데이터 동기화 관리자
const SecureDataSync = {
    // 암호화 키 (사용자별로 고유하게 생성되어야 함)
    encryptionKey: null,
    
    // 초기화
    init(userKey) {
        this.encryptionKey = userKey;
        
        // 오프라인 상태 감지
        window.addEventListener('online', this.handleOnlineStatus.bind(this));
        window.addEventListener('offline', this.handleOnlineStatus.bind(this));
        
        // 페이지 언로드 시 대기 중인 변경사항 저장
        window.addEventListener('beforeunload', this.saveChanges.bind(this));
    },
    
    // 온라인 상태 처리
    handleOnlineStatus(event) {
        if (navigator.onLine) {
            console.log('온라인 상태로 전환: 대기 중인 변경사항 동기화');
            this.syncPendingChanges();
        } else {
            console.log('오프라인 상태로 전환: 로컬에 변경사항 저장');
        }
    },
    
    // 데이터 암호화
    encryptData(data) {
        if (!this.encryptionKey) {
            throw new Error('암호화 키가 설정되지 않았습니다.');
        }
        
        const dataStr = typeof data === 'object' ? JSON.stringify(data) : String(data);
        return CryptoJS.AES.encrypt(dataStr, this.encryptionKey).toString();
    },
    
    // 데이터 복호화
    decryptData(encryptedData) {
        if (!this.encryptionKey) {
            throw new Error('암호화 키가 설정되지 않았습니다.');
        }
        
        try {
            const bytes = CryptoJS.AES.decrypt(encryptedData, this.encryptionKey);
            const decryptedStr = bytes.toString(CryptoJS.enc.Utf8);
            
            // JSON 데이터인 경우 파싱
            try {
                return JSON.parse(decryptedStr);
            } catch (e) {
                return decryptedStr;
            }
        } catch (error) {
            console.error('복호화 실패:', error);
            return null;
        }
    },
    
    // 로컬에 데이터 저장
    saveLocally(key, data) {
        try {
            // 데이터 암호화
            const encrypted = this.encryptData(data);
            
            // 로컬 스토리지에 저장
            localStorage.setItem(`secure_${key}`, encrypted);
            
            // 변경 사항 추적
            this.trackChange(key);
            
            return true;
        } catch (error) {
            console.error('로컬 저장 실패:', error);
            return false;
        }
    },
    
    // 로컬에서 데이터 로드
    loadLocally(key) {
        try {
            // 암호화된 데이터 가져오기
            const encrypted = localStorage.getItem(`secure_${key}`);
            
            if (!encrypted) {
                return null;
            }
            
            // 데이터 복호화
            return this.decryptData(encrypted);
        } catch (error) {
            console.error('로컬 로드 실패:', error);
            return null;
        }
    },
    
    // 변경 사항 추적
    trackChange(key) {
        let pendingChanges = JSON.parse(localStorage.getItem('pendingChanges') || '[]');
        
        if (!pendingChanges.includes(key)) {
            pendingChanges.push(key);
            localStorage.setItem('pendingChanges', JSON.stringify(pendingChanges));
        }
    },
    
    // 대기 중인 변경사항 동기화
    async syncPendingChanges() {
        if (!navigator.onLine) {
            console.log('오프라인 상태: 동기화 연기');
            return;
        }
        
        const pendingChanges = JSON.parse(localStorage.getItem('pendingChanges') || '[]');
        
        if (pendingChanges.length === 0) {
            return;
        }
        
        console.log(`${pendingChanges.length}개의 변경사항 동기화 중...`);
        
        for (const key of pendingChanges) {
            try {
                // 로컬 데이터 로드
                const data = this.loadLocally(key);
                
                if (!data) continue;
                
                // 서버에 데이터 전송
                await this.sendToServer(key, data);
                
                // 성공적으로 동기화된 항목 제거
                pendingChanges.splice(pendingChanges.indexOf(key), 1);
                localStorage.setItem('pendingChanges', JSON.stringify(pendingChanges));
                
                console.log(`'${key}' 동기화 완료`);
            } catch (error) {
                console.error(`'${key}' 동기화 실패:`, error);
            }
        }
    },
    
    // 서버에 데이터 전송
    async sendToServer(key, data) {
        // 인증 토큰 가져오기 (AuthService에서 제공)
        const token = AuthService.getAuthToken();
        
        if (!token) {
            throw new Error('인증되지 않은 사용자');
        }
        
        // 서버에 데이터 전송
        const response = await fetch(`/api/data/${key}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`,
                'X-CSRF-Token': SecurityUtils.getCSRFToken()
            },
            body: JSON.stringify({ data }),
            credentials: 'same-origin'
        });
        
        if (!response.ok) {
            throw new Error(`서버 응답 오류: ${response.status}`);
        }
        
        return await response.json();
    },
    
    // 서버에서 데이터 가져오기
    async fetchFromServer(key) {
        // 인증 토큰 가져오기
        const token = AuthService.getAuthToken();
        
        if (!token) {
            throw new Error('인증되지 않은 사용자');
        }
        
        // 서버에서 데이터 요청
        const response = await fetch(`/api/data/${key}`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'X-CSRF-Token': SecurityUtils.getCSRFToken()
            },
            credentials: 'same-origin'
        });
        
        if (!response.ok) {
            throw new Error(`서버 응답 오류: ${response.status}`);
        }
        
        const result = await response.json();
        
        // 로컬에도 저장
        this.saveLocally(key, result.data);
        
        return result.data;
    },
    
    // 페이지 언로드 시 변경사항 저장
    saveChanges() {
        // 메모리에 있는 중요 데이터 정리
        // (이미 로컬 스토리지에 암호화되어 저장됨)
    }
};

// 사용 예시
async function initUserData() {
    // 사용자 정보 가져오기
    const userInfo = JSON.parse(sessionStorage.getItem('user_info'));
    
    if (!userInfo) {
        console.error('사용자 정보를 찾을 수 없습니다.');
        return;
    }
    
    // 사용자별 고유 암호화 키 생성 (실제로는 서버에서 제공받아야 함)
    const userKey = `user_${userInfo.id}_${userInfo.username}_key`;
    
    // 데이터 동기화 관리자 초기화
    SecureDataSync.init(userKey);
    
    try {
        // 오프라인 상태라면 로컬 데이터 사용
        if (!navigator.onLine) {
            const userData = SecureDataSync.loadLocally('user_preferences');
            if (userData) {
                updateUI(userData);
                console.log('오프라인 모드: 로컬 데이터 로드됨');
            } else {
                console.log('오프라인 모드: 로컬 데이터 없음');
            }
            return;
        }
        
        // 온라인 상태라면 서버에서 최신 데이터 가져오기
        const userData = await SecureDataSync.fetchFromServer('user_preferences');
        updateUI(userData);
        console.log('서버에서 데이터 로드됨');
    } catch (error) {
        console.error('데이터 로드 실패:', error);
        
        // 오류 발생 시 로컬 데이터 시도
        const userData = SecureDataSync.loadLocally('user_preferences');
        if (userData) {
            updateUI(userData);
            console.log('서버 오류: 로컬 데이터로 폴백');
        }
    }
}

// UI 업데이트 함수 (예시)
function updateUI(userData) {
    // 사용자 설정으로 UI 업데이트
    if (userData.theme) {
        document.body.className = userData.theme;
    }
    
    if (userData.fontSize) {
        document.documentElement.style.fontSize = userData.fontSize;
    }
    
    // 기타 UI 요소 업데이트...
}

// 설정 변경 시 저장 함수 (예시)
function saveUserPreference(key, value) {
    // 현재 설정 가져오기
    let preferences = SecureDataSync.loadLocally('user_preferences') || {};
    
    // 설정 업데이트
    preferences[key] = value;
    
    // 로컬에 저장
    SecureDataSync.saveLocally('user_preferences', preferences);
    
    // 온라인 상태라면 즉시 동기화 시도
    if (navigator.onLine) {
        SecureDataSync.syncPendingChanges();
    }
}