Blog

도입 – JavaScript 보안의 중요성

현대 웹 애플리케이션 개발에서 JavaScript 보안 취약점 방지법은 필수적인 개발 역량입니다. 매년 수많은 보안 사고가 발생하며, 그 중 상당수가 JavaScript 코드의 취약점에서 비롯됩니다. XSS, CSRF, 인젝션 공격 등 다양한 보안 위협으로부터 사용자 데이터와 시스템을 보호하기 위해서는 체계적인 보안 코딩 습관이 필요합니다. 이 글에서는 실무에서 바로 적용 가능한 JavaScript 보안 취약점 방지법을 소개하여, 안전하고 신뢰할 수 있는 웹 애플리케이션을 개발하는 데 도움을 드리겠습니다.

핵심 팁 10가지

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

사용자 입력을 DOM에 삽입할 때는 반드시 sanitization을 수행해야 합니다. innerHTML 대신 textContent를 사용하거나, DOMPurify 같은 라이브러리를 활용하세요. 특히 사용자로부터 받은 데이터를 그대로 렌더링하면 악성 스크립트가 실행될 수 있습니다.

// 나쁜 예
element.innerHTML = userInput;

// 좋은 예
element.textContent = userInput;

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

2. eval() 함수 사용 금지

eval() 함수는 문자열을 코드로 실행하기 때문에 심각한 보안 위험을 초래합니다. 공격자가 악의적인 코드를 주입할 수 있는 경로가 됩니다. Function 생성자, setTimeout/setInterval의 문자열 인자도 마찬가지로 피해야 합니다. 대신 JSON.parse()나 안전한 대안을 사용하세요.

// 나쁜 예
eval('console.log("' + userInput + '")');

// 좋은 예
const data = JSON.parse(userInput);
console.log(data);

3. CSRF(Cross-Site Request Forgery) 토큰 검증

모든 상태 변경 요청에는 CSRF 토큰을 포함시켜 정당한 요청인지 검증해야 합니다. 서버에서 생성한 고유 토큰을 클라이언트에 전달하고, 요청 시마다 이를 확인하는 방식으로 구현합니다. SameSite 쿠키 속성도 함께 설정하면 더욱 안전합니다.

// CSRF 토큰 포함 요청
fetch('/api/update', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
  },
  body: JSON.stringify(data)
});

4. 민감한 데이터를 클라이언트에 노출하지 않기

API 키, 비밀번호, 토큰 등 민감한 정보는 절대 클라이언트 코드에 하드코딩하지 마세요. 환경 변수를 사용하되, 빌드 시점에만 주입되도록 하고, 클라이언트에서는 필요한 최소한의 정보만 사용합니다. 개발자 도구에서 쉽게 확인할 수 있다는 점을 항상 기억하세요.

// 나쁜 예
const apiKey = 'sk-1234567890abcdef';

// 좋은 예 - 서버에서 프록시 처리
fetch('/api/proxy/external-service', {
  method: 'POST',
  body: JSON.stringify(data)
});

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

CSP를 통해 허용된 소스에서만 스크립트, 스타일, 이미지 등의 리소스를 로드하도록 제한할 수 있습니다. 인라인 스크립트 실행을 차단하고, 신뢰할 수 있는 도메인만 화이트리스트에 추가하여 XSS 공격의 영향을 최소화합니다. 메타 태그나 HTTP 헤더로 설정 가능합니다.

// HTML 메타 태그
// <meta http-equiv="Content-Security-Policy" 
//       content="default-src 'self'; script-src 'self' https://trusted-cdn.com">

// 또는 서버 응답 헤더 설정
// Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com

6. 입력 유효성 검증 및 타입 체크

모든 사용자 입력에 대해 클라이언트와 서버 양쪽에서 검증을 수행해야 합니다. 예상되는 데이터 타입, 길이, 형식을 확인하고, 화이트리스트 방식으로 허용된 값만 받아들이세요. TypeScript를 사용하면 타입 안정성을 높일 수 있지만, 런타임 검증도 반드시 필요합니다.

// 입력 검증 예제
function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!regex.test(email)) {
    throw new Error('Invalid email format');
  }
  if (email.length > 254) {
    throw new Error('Email too long');
  }
  return email.toLowerCase().trim();
}

7. 안전한 난수 생성

보안에 민감한 토큰이나 세션 ID를 생성할 때는 Math.random() 대신 crypto.getRandomValues()를 사용해야 합니다. Math.random()은 예측 가능한 패턴을 가지고 있어 공격자가 추측할 수 있습니다. 암호학적으로 안전한 난수 생성기를 사용하는 것이 중요합니다.

// 나쁜 예
const token = Math.random().toString(36).substring(2);

// 좋은 예
function generateSecureToken(length = 32) {
  const array = new Uint8Array(length);
  crypto.getRandomValues(array);
  return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
}

8. 의존성 패키지 보안 관리

npm audit을 정기적으로 실행하여 알려진 취약점이 있는 패키지를 확인하고 업데이트하세요. Snyk, Dependabot 같은 도구를 활용하면 자동으로 보안 알림을 받을 수 있습니다. package-lock.json을 커밋하여 일관된 버전을 유지하고, 불필요한 패키지는 제거합니다.

// 보안 취약점 확인
// npm audit
// npm audit fix

// 또는 yarn 사용 시
// yarn audit
// yarn audit --fix

9. 적절한 에러 처리 및 로깅

에러 메시지에 시스템 내부 정보나 스택 트레이스를 노출하지 않도록 주의해야 합니다. 프로덕션 환경에서는 일반적인 에러 메시지만 사용자에게 보여주고, 상세한 정보는 서버 로그에만 기록합니다. 민감한 데이터가 로그에 포함되지 않도록 필터링하는 것도 중요합니다.

// 안전한 에러 처리
try {
  await riskyOperation();
} catch (error) {
  // 서버에만 상세 로그 전송
  logger.error('Operation failed', { error: error.message, stack: error.stack });
  
  // 사용자에게는 일반적인 메시지만 표시
  showUserMessage('작업을 완료할 수 없습니다. 잠시 후 다시 시도해주세요.');
}

10. HTTP-Only 및 Secure 쿠키 설정

세션 토큰이나 인증 정보를 쿠키에 저장할 때는 반드시 HttpOnly와 Secure 플래그를 설정해야 합니다. HttpOnly는 JavaScript에서 쿠키 접근을 차단하여 XSS 공격으로부터 보호하고, Secure는 HTTPS 연결에서만 쿠키를 전송합니다. SameSite 속성도 함께 설정하면 CSRF 방어에 효과적입니다.

// 서버 측에서 쿠키 설정 (Node.js/Express 예제)
res.cookie('sessionId', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict',
  maxAge: 3600000 // 1시간
});

실제 적용 사례

한 전자상거래 플랫폼에서 JavaScript 보안 취약점 방지법을 체계적으로 적용한 결과, XSS 공격 시도가 99% 감소했습니다. 특히 사용자 리뷰 작성 기능에서 DOMPurify를 도입하고, 모든 API 요청에 CSRF 토큰을 적용하며, CSP 헤더를 설정한 것이 핵심이었습니다. 또한 정기적인 npm audit 실행과 의존성 업데이트를 자동화하여 알려진 취약점에 대한 노출을 최소화했습니다. 개발팀은 코드 리뷰 시 보안 체크리스트를 활용하여 모든 팀원이 보안 베스트 프랙티스를 준수하도록 했으며, 이를 통해 배포 전 보안 이슈를 사전에 발견하고 해결할 수 있었습니다. 결과적으로 사용자 신뢰도가 향상되고 보안 사고로 인한 비용이 대폭 절감되었습니다.

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

보안은 일회성 작업이 아닌 지속적인 프로세스입니다. 정기적인 보안 감사와 팀 교육을 실시하고, 최신 보안 위협 정보를 모니터링하세요. 클라이언트 측 검증만으로는 충분하지 않으며, 서버 측 검증이 반드시 필요합니다. Defense in Depth 원칙에 따라 다층 보안 체계를 구축하고, 최소 권한 원칙을 적용하여 필요한 권한만 부여하세요.

마무리

이 글에서 소개한 JavaScript 보안 취약점 방지법을 실무에 적용하여 안전한 웹 애플리케이션을 개발하시기 바랍니다. 보안은 선택이 아닌 필수입니다!