학습
JavaScript 기초적인 웹 보안
JavaScript 기초적인 웹 보안 — 중급
기초적인 웹 보안
1. 도입 (왜 배워야 하는가)
웹 보안은 현대의 웹 개발에서 필수적인 요소입니다. 해킹, 데이터 유출, 서비스 거부 공격 등의 위협은 항상 존재하며, 이러한 공격이 발생하면 기업의 신뢰도와 수익성이 크게 저하될 수 있습니다. 특히 전자상거래 사이트나 개인 정보를 다루는 웹 애플리케이션에서는 보안 취약점이 치명적인 결과를 초래할 수 있습니다.
만약 웹 보안을 소홀히 한다면 사용자 데이터가 유출될 위험이 크고, 이는 법적 책임과 금전적 손실로 이어질 수 있습니다. 따라서, 웹 개발자는 기본적인 보안 원칙을 이해하고 이를 실제 코드에 적용해야 합니다.
2. 핵심 개념 설명
2.1. XSS (Cross-Site Scripting)
- 정의: 공격자가 웹 페이지에 악성 스크립트를 삽입하여 사용자의 브라우저에서 실행되는 공격 기법입니다.
- 비유: 다른 사람의 집에 몰래 들어가서 그 집 사람에게 속이는 편지를 남기는 것과 같습니다.
- 정의: 사용자가 인증된 상태에서 악의적인 요청을 전송하여 의도하지 않은 작업을 수행하게 만드는 공격입니다.
- 비유: 누군가가 당신의 서명이나 인감 도장을 이용해 몰래 문서에 서명하는 것과 비슷합니다.
- 정의: 데이터베이스 쿼리에 악성 코드를 삽입하여 데이터베이스를 조작하는 공격입니다.
- 비유: 수정된 주문서를 통해 음식점에서 원하지 않는 음식을 주문하는 것과 같습니다.
2.2. CSRF (Cross-Site Request Forgery)
2.3. SQL Injection
| 용어 | 설명 |
|---|---|
| XSS | 악성 스크립트 삽입 공격 |
| CSRF | 인증된 사용자의 요청을 변조하는 공격 |
| SQL Injection | 데이터베이스 쿼리를 조작하는 공격 |
3. 기본 코드 예제
XSS 예방 코드 예제
function sanitizeInput(input) {
return input.replace(/</g, "<").replace(/>/g, ">");
}
const userInput = "<script>alert('XSS');</script>";
const safeInput = sanitizeInput(userInput);
console.log(safeInput);
// 실행 결과: <script>alert('XSS');</script>sanitizeInput 함수는 사용자의 입력에서 <와 > 문자를 HTML 엔티티로 변환하여 스크립트 삽입을 방지합니다.userInput에 악성 스크립트를 포함한 문자열을 할당합니다.sanitizeInput 함수를 호출하여 안전한 입력으로 변환하고, 이를 safeInput에 저장합니다.console.log로 변환된 결과를 출력합니다.4. 실전 활용 예제
4.1. 쇼핑몰에서 장바구니를 구현할 때
function addToCart(item) {
const cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.push(item);
localStorage.setItem('cart', JSON.stringify(cart));
}
// 사용자 입력이 안전한지 검증하고 장바구니에 추가
const userInput = sanitizeInput("<b>상품 A</b>");
addToCart(userInput);4.2. 사용자 인증 요청
function submitForm(data) {
const csrfToken = getCsrfToken(); // CSRF 토큰을 가져옴
fetch('/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken // CSRF 방어를 위한 토큰 추가
},
body: JSON.stringify(data)
});
}5. 흔한 실수와 주의사항
실수 1: 입력값을 검증하지 않음
const userInput = document.getElementById('input').value;
document.getElementById('output').innerHTML = userInput; // XSS 취약점const userInput = sanitizeInput(document.getElementById('input').value);
document.getElementById('output').innerHTML = userInput;실수 2: CSRF 토큰을 무시함
fetch('/submit', { method: 'POST', body: JSON.stringify(data) }); // CSRF 공격에 취약fetch('/submit', {
method: 'POST',
headers: { 'X-CSRF-Token': getCsrfToken() },
body: JSON.stringify(data)
});