Blog

도입 – JavaScript 보안의 중요성

현대 웹 애플리케이션에서 JavaScript 보안 취약점 방지법은 개발자가 반드시 숙지해야 할 필수 기술입니다. 해커들은 JavaScript 코드의 취약점을 통해 사용자 데이터를 탈취하거나 시스템을 공격합니다. 본 가이드에서는 실무에서 즉시 적용 가능한 JavaScript 보안 취약점 방지법을 구체적인 코드 예제와 함께 소개합니다. 이를 통해 안전한 웹 애플리케이션을 구축하고 사용자 신뢰를 확보할 수 있습니다.

핵심 팁 10가지

1. XSS(Cross-Site Scripting) 방지

사용자 입력을 DOM에 삽입할 때는 반드시 sanitize 처리를 해야 합니다. 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 방지를 위한 매개변수화

데이터베이스 쿼리에 사용자 입력을 직접 연결하지 말고 Prepared Statement나 ORM의 매개변수화된 쿼리를 사용하세요. Node.js 환경에서는 Sequelize나 TypeORM을 활용합니다.

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

// 안전한 코드 (Sequelize 사용)
const user = await User.findOne({
  where: { id: userId }
});

// 또는 직접 쿼리 시
const user = await sequelize.query(
  'SELECT * FROM users WHERE id = ?',
  { replacements: [userId], type: QueryTypes.SELECT }
);

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

상태 변경 요청에는 CSRF 토큰을 포함시켜 검증해야 합니다. Express에서는 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에 저장하면 XSS 공격에 노출됩니다. HttpOnly 쿠키를 사용하거나 메모리에 저장하는 방식을 선택하세요.

// 위험: localStorage 사용
localStorage.setItem('token', authToken);

// 안전: HttpOnly 쿠키 (서버 측)
res.cookie('token', authToken, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict',
  maxAge: 3600000
});

// 또는 메모리에 저장 (클라이언트)
let authToken = null;
function setToken(token) {
  authToken = token;
}

5. Content Security Policy(CSP) 설정

CSP 헤더를 설정하여 허용된 소스에서만 스크립트가 실행되도록 제한합니다. 이는 XSS 공격의 영향을 최소화하는 강력한 방어 계층입니다.

// Express에서 helmet 미들웨어 사용
const helmet = require('helmet');

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'unsafe-inline'"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", "data:", "https:"],
    },
  })
);

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

모든 사용자 입력은 클라이언트와 서버 양쪽에서 검증해야 합니다. Joi나 Yup 같은 검증 라이브러리를 활용하면 효율적입니다.

const Joi = require('joi');

const userSchema = Joi.object({
  email: Joi.string().email().required(),
  age: Joi.number().integer().min(0).max(150),
  username: Joi.string().alphanum().min(3).max(30).required()
});

const { error, value } = userSchema.validate(req.body);
if (error) {
  return res.status(400).json({ error: error.details[0].message });
}

7. 안전한 난수 생성

보안 관련 작업에는 Math.random() 대신 crypto 모듈의 암호학적으로 안전한 난수 생성기를 사용해야 합니다.

// 위험한 코드
const token = Math.random().toString(36).substr(2);

// 안전한 코드 (Node.js)
const crypto = require('crypto');
const token = crypto.randomBytes(32).toString('hex');

// 브라우저 환경
const array = new Uint8Array(32);
crypto.getRandomValues(array);
const token = Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');

8. 민감한 데이터 노출 방지

에러 메시지나 로그에 비밀번호, API 키 등 민감한 정보가 포함되지 않도록 주의하세요. 프로덕션 환경에서는 상세한 에러 정보를 숨깁니다.

// 개발 환경
if (process.env.NODE_ENV === 'development') {
  app.use((err, req, res, next) => {
    res.status(err.status || 500).json({
      message: err.message,
      stack: err.stack
    });
  });
} else {
  // 프로덕션 환경
  app.use((err, req, res, next) => {
    res.status(err.status || 500).json({
      message: '서버 오류가 발생했습니다.'
    });
    // 내부 로깅 시스템에만 상세 정보 기록
    logger.error(err.stack);
  });
}

9. 정규식 DoS(ReDoS) 공격 방지

복잡한 정규식은 특정 입력에 대해 기하급수적인 처리 시간을 소요할 수 있습니다. safe-regex 라이브러리로 정규식을 검증하세요.

// 위험한 정규식 (ReDoS 취약)
const dangerousRegex = /^(a+)+$/;

// 안전한 정규식
const safeRegex = /^a+$/;

// safe-regex로 검증
const safeRegexLib = require('safe-regex');
if (!safeRegexLib(/^(a+)+$/)) {
  console.warn('위험한 정규식 감지');
}

// 타임아웃 설정으로 추가 보호
function safeRegexTest(regex, str, timeout = 100) {
  const start = Date.now();
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => reject(new Error('Regex timeout')), timeout);
    try {
      const result = regex.test(str);
      clearTimeout(timer);
      resolve(result);
    } catch (e) {
      clearTimeout(timer);
      reject(e);
    }
  });
}

10. 의존성 보안 취약점 관리

npm audit를 정기적으로 실행하고 Snyk, Dependabot 같은 도구로 의존성의 보안 취약점을 모니터링하세요. 취약점이 발견되면 즉시 업데이트합니다.

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

// CI/CD 파이프라인에 통합
// .github/workflows/security.yml
name: Security Audit
on: [push, pull_request]
jobs:
  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Run security audit
        run: npm audit --audit-level=moderate

실제 적용 사례

한 전자상거래 플랫폼에서 JavaScript 보안 취약점 방지법을 체계적으로 적용한 사례입니다. 먼저 모든 사용자 입력에 DOMPurify를 적용하여 XSS 공격을 차단했고, 결제 API에는 CSRF 토큰과 입력 검증을 추가했습니다. 인증 토큰은 localStorage에서 HttpOnly 쿠키로 전환하고, CSP 헤더를 설정하여 다층 보안을 구축했습니다. 또한 CI/CD 파이프라인에 npm audit를 통합하여 의존성 취약점을 자동으로 감지하도록 했습니다. 이러한 조치로 6개월간 보안 사고가 0건으로 감소했으며, 사용자 신뢰도가 35% 향상되었습니다. 특히 PCI DSS 인증을 취득하는 데 큰 도움이 되었고, 개발팀은 보안 코딩이 표준 프로세스로 자리잡게 되었습니다.

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

보안은 일회성 작업이 아닌 지속적인 프로세스입니다. 코드 리뷰 시 보안 체크리스트를 활용하고, 정기적인 보안 교육을 실시하세요. 클라이언트 측 검증만으로는 불충분하므로 반드시 서버 측에서도 검증해야 합니다. 최소 권한 원칙을 적용하여 각 컴포넌트가 필요한 최소한의 권한만 가지도록 설계하고, 정기적인 침투 테스트와 보안 감사를 통해 취약점을 선제적으로 발견하세요.

마무리 및 추가 팁

JavaScript 보안 취약점 방지법을 실천하면 안전한 애플리케이션을 구축할 수 있습니다. OWASP Top 10을 정기적으로 확인하고, 보안 커뮤니티의 최신 동향을 팔로우하세요. 보안은 모든 개발자의 책임입니다.