Blog

도입 – JavaScript 보안의 중요성

현대 웹 애플리케이션 개발에서 JavaScript 보안 취약점 방지법은 필수적인 개발 역량입니다. 매년 수많은 보안 사고가 발생하며, 그 중 상당수가 JavaScript 코드의 취약점에서 비롯됩니다. OWASP Top 10에 포함된 XSS, 인젝션 공격 등은 대부분 클라이언트 측 JavaScript의 부적절한 처리로 인해 발생합니다. 이 글에서는 실무에서 즉시 적용할 수 있는 JavaScript 보안 취약점 방지법을 구체적인 코드 예제와 함께 소개합니다. 안전한 웹 애플리케이션 구축을 위한 핵심 원칙들을 익혀보세요.

핵심 팁 10가지

1. XSS(Cross-Site Scripting) 방지를 위한 입력값 검증

사용자 입력을 DOM에 삽입할 때는 반드시 이스케이프 처리해야 합니다. innerHTML 대신 textContent를 사용하거나, DOMPurify 같은 라이브러리로 sanitize하세요. 절대 사용자 입력을 직접 HTML로 렌더링하지 마세요.

// 위험한 코드
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 + '")');
setTimeout('doSomething()', 1000);

// 안전한 코드
const data = JSON.parse(jsonString);
setTimeout(doSomething, 1000);

3. Content Security Policy(CSP) 구현

CSP 헤더를 설정하여 허용된 소스에서만 스크립트를 로드하도록 제한합니다. 인라인 스크립트를 차단하고, nonce나 hash 기반 방식을 사용하여 승인된 스크립트만 실행되도록 합니다.

// HTML meta 태그 또는 서버 헤더 설정
// Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-random123'

// 스크립트에 nonce 추가
<script nonce="random123">
  // 안전한 인라인 스크립트
</script>

4. 안전한 JSON 처리

JSON 데이터를 파싱할 때는 항상 JSON.parse()를 사용하고, eval()은 절대 사용하지 마세요. 또한 JSON 응답의 출처를 검증하고, CORS 정책을 적절히 설정하여 신뢰할 수 있는 도메인에서만 데이터를 받도록 합니다.

// 위험한 코드
const data = eval('(' + jsonString + ')');

// 안전한 코드
try {
  const data = JSON.parse(jsonString);
  // 추가 검증
  if (!isValidData(data)) {
    throw new Error('Invalid data structure');
  }
} catch (error) {
  console.error('JSON parsing failed:', error);
}

5. 민감한 데이터 로컬 저장 시 암호화

localStorage나 sessionStorage에 민감한 정보를 저장할 때는 반드시 암호화하세요. 가능하면 민감한 데이터는 클라이언트에 저장하지 않는 것이 최선입니다. JWT 토큰도 httpOnly 쿠키에 저장하는 것이 더 안전합니다.

// 암호화 라이브러리 사용 (예: crypto-js)
import CryptoJS from 'crypto-js';

const secretKey = 'your-secret-key';

// 저장
const encrypted = CryptoJS.AES.encrypt(sensitiveData, secretKey).toString();
localStorage.setItem('data', encrypted);

// 복호화
const decrypted = CryptoJS.AES.decrypt(localStorage.getItem('data'), secretKey);
const originalData = decrypted.toString(CryptoJS.enc.Utf8);

6. SQL Injection 방지를 위한 파라미터화

Node.js 환경에서 데이터베이스 쿼리를 실행할 때는 문자열 연결 대신 파라미터화된 쿼리를 사용하세요. ORM(Sequelize, TypeORM 등)을 활용하면 자동으로 SQL 인젝션을 방지할 수 있습니다.

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

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

7. HTTPS 강제 및 Secure 쿠키 설정

모든 통신은 HTTPS를 통해 이루어져야 하며, 쿠키에는 Secure, HttpOnly, SameSite 플래그를 설정하세요. 이를 통해 중간자 공격과 CSRF 공격을 방지할 수 있습니다.

// Express.js 예제
res.cookie('sessionId', token, {
  httpOnly: true,  // JavaScript 접근 방지
  secure: true,    // HTTPS에서만 전송
  sameSite: 'strict', // CSRF 방지
  maxAge: 3600000  // 1시간
});

// HTTPS 리다이렉트 미들웨어
app.use((req, res, next) => {
  if (!req.secure && process.env.NODE_ENV === 'production') {
    return res.redirect('https://' + req.headers.host + req.url);
  }
  next();
});

8. 정규표현식 DoS(ReDoS) 방지

복잡한 정규표현식은 악의적인 입력으로 인해 CPU를 과도하게 사용할 수 있습니다. 정규표현식을 단순하게 유지하고, 입력 길이를 제한하며, safe-regex 같은 도구로 검증하세요.

// 위험한 정규표현식 (중첩된 반복)
const unsafe = /^(a+)+$/;

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

// 입력 길이 제한
function validateInput(input) {
  if (input.length > 100) {
    throw new Error('Input too long');
  }
  return safe.test(input);
}

9. 의존성 라이브러리 보안 관리

npm audit, Snyk, Dependabot 등의 도구를 사용하여 취약한 패키지를 정기적으로 검사하고 업데이트하세요. package-lock.json을 사용하여 일관된 의존성 버전을 유지합니다.

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

// CI/CD 파이프라인에 통합
// .github/workflows/security.yml
// - run: npm audit --audit-level=high

10. 에러 메시지에서 민감한 정보 노출 방지

프로덕션 환경에서는 상세한 에러 스택이나 시스템 정보를 클라이언트에 노출하지 마세요. 일반적인 에러 메시지만 반환하고, 상세 로그는 서버에만 기록합니다.

// 위험한 코드
app.use((err, req, res, next) => {
  res.status(500).json({ error: err.stack });
});

// 안전한 코드
app.use((err, req, res, next) => {
  // 서버 로그에만 기록
  console.error('Error:', err.stack);
  
  // 클라이언트에는 일반 메시지만 전송
  res.status(500).json({
    error: process.env.NODE_ENV === 'production' 
      ? 'Internal server error' 
      : err.message
  });
});

실제 적용 사례

대형 전자상거래 플랫폼에서 위의 JavaScript 보안 취약점 방지법을 적용한 사례를 소개합니다. 해당 기업은 XSS 공격으로 인한 고객 정보 유출 사고 이후, DOMPurify를 도입하여 모든 사용자 입력을 sanitize하고, CSP 헤더를 strict 모드로 설정했습니다. 또한 JWT 토큰을 localStorage에서 httpOnly 쿠키로 이전하고, 모든 API 요청에 CSRF 토큰을 추가했습니다. 의존성 관리를 위해 Snyk를 CI/CD 파이프라인에 통합하여 매 배포마다 자동으로 취약점을 검사합니다. 이러한 조치를 통해 6개월 동안 보안 사고가 제로로 유지되었으며, 고객 신뢰도가 35% 향상되었습니다. 특히 정규표현식 최적화를 통해 ReDoS 공격 가능성을 완전히 차단했고, 에러 처리 개선으로 시스템 정보 노출 위험을 제거했습니다.

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

보안은 일회성 작업이 아닌 지속적인 프로세스입니다. 최신 보안 트렌드를 주시하고, OWASP 가이드라인을 정기적으로 검토하세요. 코드 리뷰 시 보안 체크리스트를 활용하고, 보안 교육을 팀 전체에 제공하는 것이 중요합니다. 화이트햇 해커를 통한 모의 침투 테스트를 정기적으로 실시하여 취약점을 사전에 발견하세요.

마무리 및 추가 팁

이 글에서 소개한 JavaScript 보안 취약점 방지법을 실무에 적용하여 안전한 웹 애플리케이션을 구축하세요. 보안은 개발자의 필수 역량입니다!