Blog

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

현대 웹 애플리케이션 개발에서 JavaScript 보안 취약점 방지법은 필수적인 개발 역량입니다. 매년 수많은 웹 서비스가 XSS, CSRF, 인젝션 공격 등으로 피해를 입고 있으며, 이는 사용자 데이터 유출과 서비스 신뢰도 하락으로 이어집니다. 본 가이드에서는 실무에서 즉시 적용 가능한 JavaScript 보안 취약점 방지법을 소개하여, 안전한 웹 애플리케이션 개발을 돕고자 합니다. 보안은 선택이 아닌 필수이며, 개발 초기 단계부터 적용해야 효과적입니다.

핵심 팁 10가지

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

사용자 입력값을 DOM에 삽입할 때는 반드시 이스케이프 처리를 해야 합니다. innerHTML 대신 textContent를 사용하거나, DOMPurify 같은 라이브러리로 sanitize하세요. 특히 사용자가 입력한 HTML 태그나 스크립트가 그대로 실행되지 않도록 주의해야 합니다.

// 취약한 코드
element.innerHTML = userInput;

// 안전한 코드
element.textContent = userInput;
// 또는
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);

2. eval() 함수 사용 금지

eval() 함수는 문자열을 코드로 실행하기 때문에 심각한 보안 위험을 초래합니다. 공격자가 악의적인 코드를 주입할 수 있으며, 이는 전체 애플리케이션을 장악당할 수 있는 위험으로 이어집니다. Function 생성자나 setTimeout/setInterval의 문자열 인자 사용도 피해야 합니다. 대신 JSON.parse()나 안전한 대안을 사용하세요.

// 위험한 코드
eval(userCode);

// 안전한 대안
const data = JSON.parse(jsonString);
// 또는 Function 사용 시 엄격한 검증
const fn = new Function('return ' + sanitizedExpression)();

3. Content Security Policy(CSP) 설정

CSP 헤더를 설정하여 허용된 소스에서만 스크립트가 실행되도록 제한할 수 있습니다. 이는 XSS 공격의 영향을 크게 줄여주며, 인라인 스크립트 실행을 차단하고 신뢰할 수 있는 도메인의 리소스만 로드하도록 합니다. 서버 설정이나 meta 태그로 구현 가능합니다.

// HTTP 헤더 설정 (서버 측)
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none';

// 또는 HTML meta 태그
// 

4. 안전한 쿠키 설정

쿠키에 민감한 정보를 저장할 때는 HttpOnly, Secure, SameSite 플래그를 반드시 설정해야 합니다. HttpOnly는 JavaScript로 쿠키 접근을 차단하고, Secure는 HTTPS에서만 전송되며, SameSite는 CSRF 공격을 방지합니다. 이 세 가지 플래그를 조합하면 쿠키 기반 공격을 효과적으로 차단할 수 있습니다.

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

5. SQL 인젝션 방지를 위한 파라미터화된 쿼리

데이터베이스 쿼리를 작성할 때 문자열 연결 대신 파라미터화된 쿼리나 ORM을 사용해야 합니다. 사용자 입력값을 직접 쿼리에 삽입하면 SQL 인젝션 공격에 취약해집니다. Prepared Statement를 활용하면 데이터와 명령어가 명확히 분리되어 안전합니다.

// 취약한 코드
const query = `SELECT * FROM users WHERE username = '${userInput}'`;

// 안전한 코드 (파라미터화된 쿼리)
const query = 'SELECT * FROM users WHERE username = ?';
db.execute(query, [userInput]);

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

6. CSRF(Cross-Site Request Forgery) 토큰 사용

상태 변경 요청(POST, PUT, DELETE)에는 CSRF 토큰을 필수로 구현해야 합니다. 서버에서 생성한 고유 토큰을 폼에 포함시키고, 요청 시 검증하여 정상적인 사용자 요청인지 확인합니다. SameSite 쿠키 속성과 함께 사용하면 이중 보안이 가능합니다.

// 클라이언트: CSRF 토큰 포함
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

fetch('/api/update', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': csrfToken
  },
  body: JSON.stringify(data)
});

7. 민감한 데이터 클라이언트 저장 시 암호화

로컬스토리지나 세션스토리지에 민감한 정보를 저장할 때는 반드시 암호화해야 합니다. 이러한 저장소는 JavaScript로 쉽게 접근 가능하므로, XSS 공격에 노출되면 정보가 유출될 수 있습니다. Web Crypto API나 검증된 암호화 라이브러리를 사용하세요.

// Web Crypto API를 사용한 암호화
async function encryptData(data, key) {
  const encoder = new TextEncoder();
  const encodedData = encoder.encode(data);
  
  const encryptedData = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv: window.crypto.getRandomValues(new Uint8Array(12)) },
    key,
    encodedData
  );
  
  return encryptedData;
}

// 사용
const encrypted = await encryptData(sensitiveInfo, cryptoKey);
localStorage.setItem('data', JSON.stringify(encrypted));

8. 의존성 패키지 보안 취약점 점검

npm audit, Snyk, Dependabot 등의 도구로 정기적으로 의존성 패키지의 보안 취약점을 점검해야 합니다. 오래된 라이브러리에는 알려진 취약점이 존재할 수 있으며, 이를 통해 공격자가 침투할 수 있습니다. 자동화된 보안 스캔을 CI/CD 파이프라인에 통합하는 것이 좋습니다.

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

// 실행
// npm run security-check
// npm run security-fix

9. 입력값 검증 및 타입 체크

모든 사용자 입력은 클라이언트와 서버 양쪽에서 검증해야 합니다. 화이트리스트 방식으로 허용된 값만 받아들이고, 정규식과 타입 체크를 통해 예상된 형식인지 확인하세요. TypeScript를 사용하면 컴파일 타임에 타입 안정성을 확보할 수 있습니다.

// 입력값 검증 예시
function validateEmail(email) {
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  if (!emailRegex.test(email)) {
    throw new Error('유효하지 않은 이메일 형식입니다');
  }
  return email.toLowerCase().trim();
}

// TypeScript 타입 가드
function isValidInput(input: unknown): input is string {
  return typeof input === 'string' && input.length > 0 && input.length < 100;
}

10. HTTPS 강제 사용 및 보안 헤더 설정

모든 통신은 HTTPS로 암호화되어야 하며, HSTS(HTTP Strict Transport Security) 헤더를 설정하여 강제해야 합니다. 또한 X-Content-Type-Options, X-Frame-Options, X-XSS-Protection 등의 보안 헤더를 설정하여 다양한 공격 벡터를 차단할 수 있습니다.

// Express.js 보안 헤더 설정 예시
const helmet = require('helmet');

app.use(helmet());

// 또는 수동 설정
app.use((req, res, next) => {
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('X-XSS-Protection', '1; mode=block');
  next();
});

실제 적용 사례

대규모 전자상거래 플랫폼에서 JavaScript 보안 취약점 방지법을 전면 도입한 사례가 있습니다. 개발팀은 먼저 모든 사용자 입력값에 DOMPurify를 적용하여 XSS 공격을 차단했고, CSP 정책을 엄격하게 설정했습니다. 결제 프로세스에는 CSRF 토큰과 이중 인증을 구현했으며, 민감한 카드 정보는 클라이언트에 저장하지 않고 토큰화했습니다. 또한 주간 단위로 npm audit를 실행하여 의존성 취약점을 점검하고, Helmet.js로 보안 헤더를 자동 설정했습니다. 그 결과 6개월간 보안 사고가 80% 감소했고, 고객 신뢰도가 크게 향상되었습니다. 특히 PCI DSS 인증 심사에서도 높은 평가를 받아 글로벌 시장 진출의 발판을 마련했습니다.

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

보안은 일회성 작업이 아닌 지속적인 프로세스입니다. 새로운 취약점이 계속 발견되므로 OWASP Top 10을 정기적으로 확인하고, 보안 패치를 신속히 적용해야 합니다. 코드 리뷰 시 보안 체크리스트를 활용하고, 침투 테스트(Penetration Test)를 주기적으로 수행하세요. 개발팀 전체가 보안 인식을 공유하고, 최소 권한 원칙(Principle of Least Privilege)을 적용하는 것이 중요합니다.

마무리 및 추가 팁

JavaScript 보안 취약점 방지법은 안전한 웹 서비스의 기초입니다. 본 가이드의 10가지 팁을 프로젝트에 적용하고, 보안 자동화 도구를 CI/CD에 통합하세요. 지속적인 학습과 업데이트로 최신 보안 위협에 대응하시기 바랍니다.