Blog

JavaScript 보안 취약점 방지법의 중요성

현대 웹 애플리케이션 개발에서 JavaScript 보안 취약점 방지법은 필수적인 개발 역량입니다. 매년 OWASP Top 10에 등재되는 보안 취약점의 상당수가 JavaScript 코드의 부적절한 처리로 인해 발생하며, 이는 사용자 데이터 유출, 세션 하이재킹, 악성 코드 주입 등 심각한 보안 사고로 이어질 수 있습니다. 본 가이드에서는 실무에서 바로 적용할 수 있는 JavaScript 보안 취약점 방지법을 상세히 다루어, 안전한 웹 애플리케이션 개발의 기반을 제공합니다.

핵심 팁 10가지

1. XSS(Cross-Site Scripting) 공격 방어

XSS는 가장 흔한 웹 보안 취약점 중 하나입니다. 사용자 입력을 DOM에 직접 삽입할 때는 반드시 이스케이프 처리해야 합니다. innerHTML 대신 textContent를 사용하거나, DOMPurify 같은 검증된 라이브러리를 활용하세요.

// 위험한 코드
document.getElementById('output').innerHTML = userInput;

// 안전한 코드
document.getElementById('output').textContent = userInput;

// 또는 DOMPurify 사용
import DOMPurify from 'dompurify';
document.getElementById('output').innerHTML = DOMPurify.sanitize(userInput);

2. SQL Injection 방지를 위한 파라미터화된 쿼리

백엔드 JavaScript(Node.js)에서 데이터베이스 쿼리를 실행할 때는 절대 문자열 연결을 사용하지 마세요. Prepared Statement나 ORM을 활용하여 SQL Injection을 원천 차단해야 합니다. 이는 데이터베이스 보안의 기본입니다.

// 위험한 코드
const query = `SELECT * FROM users WHERE username = '${username}'`;

// 안전한 코드 (Parameterized Query)
const query = 'SELECT * FROM users WHERE username = ?';
db.execute(query, [username]);

// Sequelize ORM 사용
const user = await User.findOne({ where: { username: username } });

3. CSRF(Cross-Site Request Forgery) 토큰 구현

상태 변경 요청(POST, PUT, DELETE)에는 반드시 CSRF 토큰을 검증해야 합니다. 각 세션마다 고유한 토큰을 생성하고, 요청 시 이를 확인하여 악의적인 요청을 차단하세요. 대부분의 프레임워크는 CSRF 보호 기능을 제공합니다.

// Express.js에서 csurf 미들웨어 사용
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });

app.post('/transfer', csrfProtection, (req, res) => {
  // CSRF 토큰이 유효한 경우에만 실행
  processTransfer(req.body);
});

// 클라이언트에서 토큰 전송
fetch('/transfer', {
  method: 'POST',
  headers: { 'CSRF-Token': csrfToken },
  body: JSON.stringify(data)
});

4. 안전한 인증 및 세션 관리

JWT나 세션 토큰은 안전하게 저장하고 전송해야 합니다. localStorage보다는 httpOnly 쿠키를 사용하여 XSS 공격으로부터 토큰을 보호하세요. 또한 적절한 만료 시간을 설정하고, 민감한 작업 전에는 재인증을 요구하는 것이 좋습니다.

// 안전한 쿠키 설정
res.cookie('token', jwtToken, {
  httpOnly: true,  // JavaScript에서 접근 불가
  secure: true,    // HTTPS에서만 전송
  sameSite: 'strict',  // CSRF 방지
  maxAge: 3600000  // 1시간
});

// localStorage 사용 지양
// localStorage.setItem('token', token); // 위험!

5. Content Security Policy(CSP) 헤더 설정

CSP는 XSS 공격의 영향을 크게 줄일 수 있는 강력한 보안 메커니즘입니다. 신뢰할 수 있는 소스에서만 스크립트를 로드하도록 제한하고, inline 스크립트 사용을 최소화하세요. nonce나 hash 기반 CSP를 활용하면 더욱 안전합니다.

// Express.js에서 CSP 설정
const helmet = require('helmet');

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'nonce-{random}'"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
    connectSrc: ["'self'", "https://api.example.com"]
  }
}));

6. 입력 검증 및 화이트리스트 방식 채택

모든 사용자 입력은 신뢰할 수 없다고 가정해야 합니다. 블랙리스트 방식보다는 화이트리스트 방식으로 검증하세요. 정규표현식을 활용하여 예상되는 형식만 허용하고, 서버와 클라이언트 양쪽에서 검증을 수행하는 이중 검증 전략이 효과적입니다.

// 화이트리스트 기반 입력 검증
function validateEmail(email) {
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  return emailRegex.test(email);
}

function validateUsername(username) {
  // 알파벳, 숫자, 언더스코어만 허용 (3-20자)
  return /^[a-zA-Z0-9_]{3,20}$/.test(username);
}

// 클라이언트와 서버 양쪽에서 검증
if (!validateEmail(email)) {
  throw new Error('Invalid email format');
}

7. 민감한 데이터의 안전한 처리

비밀번호, API 키, 개인정보 등 민감한 데이터는 절대 클라이언트 측 코드에 하드코딩하지 마세요. 환경 변수를 사용하고, 비밀번호는 bcrypt나 argon2 같은 강력한 해싱 알고리즘으로 암호화하세요. 또한 로그에 민감한 정보가 기록되지 않도록 주의해야 합니다.

// 비밀번호 안전하게 해싱
const bcrypt = require('bcrypt');
const saltRounds = 12;

async function hashPassword(plainPassword) {
  return await bcrypt.hash(plainPassword, saltRounds);
}

async function verifyPassword(plainPassword, hashedPassword) {
  return await bcrypt.compare(plainPassword, hashedPassword);
}

// 환경 변수 사용
const apiKey = process.env.API_KEY;  // 코드에 직접 작성 금지

// 로그에서 민감한 데이터 제거
console.log({ ...user, password: '[REDACTED]' });

8. 안전한 정규표현식 사용으로 ReDoS 방지

복잡한 정규표현식은 ReDoS(Regular Expression Denial of Service) 공격에 취약할 수 있습니다. 중첩된 수량자나 백트래킹이 많은 패턴은 피하고, safe-regex 같은 도구로 정규표현식을 검증하세요. 타임아웃을 설정하는 것도 좋은 방법입니다.

// 위험한 정규표현식 (ReDoS 취약)
const bad = /^(a+)+$/;  // 중첩된 수량자

// 안전한 정규표현식
const good = /^a+$/;

// safe-regex로 검증
const safeRegex = require('safe-regex');
if (!safeRegex(/^(a+)+$/)) {
  console.warn('Potentially unsafe regex detected');
}

// 타임아웃 설정 (Node.js 16+)
const regex = /^[a-z]+$/;
const result = regex.test(input);  // 빌트인 타임아웃 지원

9. 의존성 관리 및 보안 취약점 모니터링

npm 패키지의 보안 취약점은 지속적으로 발견됩니다. npm audit, Snyk, Dependabot 등을 활용하여 정기적으로 의존성을 검사하고 업데이트하세요. 불필요한 패키지는 제거하고, 신뢰할 수 있는 패키지만 사용하는 것이 중요합니다.

// 보안 취약점 검사
// npm audit
// npm audit fix

// package.json에 audit 스크립트 추가
{
  "scripts": {
    "audit": "npm audit",
    "audit:fix": "npm audit fix",
    "preinstall": "npm audit"
  }
}

// .npmrc에 보안 설정 추가
audit-level=moderate

// GitHub Dependabot 활성화로 자동 PR 생성

10. 안전한 eval() 대체 및 동적 코드 실행 방지

eval(), Function() 생성자, setTimeout/setInterval의 문자열 파라미터 사용은 매우 위험합니다. 이들은 임의의 코드 실행을 허용하여 심각한 보안 취약점을 만들 수 있습니다. JSON.parse()나 안전한 대체 방법을 사용하세요.

// 위험한 코드
eval(userInput);  // 절대 사용 금지
setTimeout(userInput, 1000);  // 문자열 형태의 코드 실행

// 안전한 대체 방법
// JSON 파싱
const data = JSON.parse(jsonString);

// 함수 참조 전달
setTimeout(() => safeFunction(), 1000);

// 동적 속성 접근
const value = obj[propertyName];  // eval 대신 브라켓 노테이션

// vm2 모듈로 샌드박스 환경 구축 (필요시)
const { VM } = require('vm2');
const vm = new VM({ timeout: 1000 });
vm.run(untrustedCode);

실제 적용 사례

한 핀테크 스타트업에서는 JavaScript 보안 취약점 방지법을 체계적으로 도입하여 큰 성과를 거두었습니다. 초기에는 사용자 입력을 직접 DOM에 삽입하는 방식으로 개발했으나, 보안 감사 후 XSS 취약점이 발견되었습니다. 팀은 DOMPurify를 도입하고 CSP 헤더를 설정하여 XSS 공격을 차단했습니다. 또한 bcrypt로 비밀번호를 해싱하고, JWT를 httpOnly 쿠키에 저장하여 인증 시스템을 강화했습니다. CSRF 토큰을 모든 상태 변경 요청에 적용하고, npm audit를 CI/CD 파이프라인에 통합하여 의존성 취약점을 자동으로 검사했습니다. 그 결과 6개월간 단 한 건의 보안 사고도 발생하지 않았으며, 고객 신뢰도가 크게 향상되었습니다. 개발팀은 이러한 보안 프랙티스를 코드 리뷰 체크리스트에 포함시켜 모든 신규 코드가 보안 기준을 충족하도록 관리하고 있습니다.

주의사항 및 베스트 프랙티스

보안은 한 번의 설정으로 끝나는 것이 아니라 지속적인 관리가 필요합니다. 정기적인 보안 감사를 실시하고, 최신 보안 패치를 신속하게 적용하세요. 개발팀 전체가 보안 의식을 공유하도록 정기적인 교육을 진행하고, 보안 코딩 가이드라인을 문서화하여 모든 개발자가 참고할 수 있도록 하세요. 또한 최소 권한 원칙을 적용하여 각 컴포넌트가 필요한 최소한의 권한만 가지도록 설계하고, 방어적 프로그래밍(Defensive Programming) 마인드셋을 유지하는 것이 중요합니다.

마무리 및 추가 팁

JavaScript 보안 취약점 방지법을 실천하면 안전하고 신뢰할 수 있는 웹 애플리케이션을 구축할 수 있습니다. 보안은 선택이 아닌 필수입니다. 오늘부터 이 팁들을 프로젝트에 적용하여 사용자 데이터를 보호하고 서비스의 안정성을 높이세요.