90. 자바스크립트 입력 검증 (Input Validation)

입력 검증 (Input Validation)

웹 애플리케이션에서 입력 검증은 보안과 안정성을 유지하는 데 필수적인 요소이다. 사용자로부터 받은 데이터를 신뢰하지 않고 검증하는 과정은 SQL 인젝션, XSS, CSRF와 같은 다양한 공격을 방어하는 첫 번째 방어선이다. 이번에는 입력 검증의 중요성과 기본 원칙, 그리고 자바스크립트를 활용한 구체적인 구현 방법을 살펴보자.

입력 검증을 제대로 수행하면 애플리케이션의 보안이 크게 향상된다.

입력 검증의 중요성

사용자 입력을 검증하지 않으면 악의적인 데이터가 시스템에 침투할 수 있다. 예를 들어, SQL 인젝션은 사용자가 입력한 데이터를 SQL 쿼리에 직접 삽입할 때 발생한다. 다음과 같은 코드가 있다고 가정한다:

const userInput = req.body.username;
const query = `SELECT * FROM users WHERE username = '${userInput}'`;

만약 사용자가 ' OR '1'='1 같은 값을 입력하면, 쿼리가 변조되어 모든 사용자 데이터를 반환할 수 있다. 이처럼 검증되지 않은 입력은 보안 취약점을 초래한다.

1. 기본 원칙

입력 검증의 기본 원칙은 다음과 같다:

• 모든 입력을 신뢰하지 않는다: 사용자, 외부 API, 심지어 내부 시스템에서 오는 데이터도 검증한다.
• 화이트리스트 접근법: 허용된 데이터 형식과 값을 명시적으로 정의한다.
• 블랙리스트는 피한다: 악의적인 패턴을 차단하는 방식은 우회될 수 있다.
• 클라이언트와 서버 모두에서 검증한다: 클라이언트 검증은 사용자 경험을 개선하고, 서버 검증은 보안을 강화한다.

이 원칙을 지키면 보안 위협을 줄일 수 있다.

2. 클라이언트 측 검증

클라이언트 측에서 자바스크립트를 사용해 입력을 검증할 수 있다. 예를 들어, 이메일 형식 검증은 다음과 같다:

function validateEmail(email) {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return re.test(email);
}

const emailInput = document.getElementById('email');
emailInput.addEventListener('input', () => {
    if (!validateEmail(emailInput.value)) {
        emailInput.style.borderColor = 'red';
    } else {
        emailInput.style.borderColor = 'green';
    }
});

이 코드는 이메일 형식이 맞지 않으면 입력 필드의 테두리를 빨간색으로 표시한다. 그러나 클라이언트 측 검증은 우회될 수 있으므로 서버 측 검증과 함께 사용해야 한다.

3. 서버 측 검증

서버 측에서 입력을 검증하는 것은 보안의 핵심이다. Express.js에서 Joi 라이브러리를 사용한 예는 다음과 같다:

const Joi = require('joi');

const schema = Joi.object({
    username: Joi.string().alphanum().min(3).max(30).required(),
    email: Joi.string().email().required(),
    password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{8,30}$')).required()
});

app.post('/register', (req, res) => {
    const { error } = schema.validate(req.body);
    if (error) {
        return res.status(400).send(error.details[0].message);
    }
    // 정상 처리
});

이 코드는 사용자 이름, 이메일, 비밀번호를 검증하고, 조건에 맞지 않으면 400 에러를 반환한다.

4. 정규 표현식을 활용한 검증

정규 표현식은 복잡한 패턴을 검증하는 데 유용하다. 예를 들어, 전화번호 검증은 다음과 같다:

function validatePhoneNumber(phone) {
    const re = /^\d{3}-\d{3,4}-\d{4}$/;
    return re.test(phone);
}

const phone = '010-1234-5678';
if (validatePhoneNumber(phone)) {
    console.log('유효한 전화번호');
} else {
    console.log('유효하지 않은 전화번호');
}

이 코드는 한국 전화번호 형식을 검증한다. 정규 표현식은 유연하게 패턴을 정의할 수 있다.

5. 에러 처리와 사용자 피드백

검증 실패 시 사용자에게 명확한 피드백을 제공해야 한다. 클라이언트 측에서 실시간으로 에러를 표시할 수 있다:

const form = document.getElementById('registerForm');
form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(form);
    const response = await fetch('/register', {
        method: 'POST',
        body: data
    });
    if (!response.ok) {
        const error = await response.text();
        document.getElementById('error').textContent = error;
    } else {
        console.log('등록 성공');
    }
});

서버에서 반환한 에러 메시지를 화면에 표시한다. 사용자에게 즉각적인 피드백을 제공한다.

6. 고급 검증 기법

복잡한 검증 로직을 위해 라이브러리를 활용할 수 있다. 예를 들어, Validator.js는 다양한 검증 함수를 제공한다:

const validator = require('validator');

function validateInput(input) {
    if (!validator.isEmail(input.email)) {
        return '유효하지 않은 이메일';
    }
    if (!validator.isLength(input.password, { min: 8 })) {
        return '비밀번호는 8자 이상이어야 한다';
    }
    return null;
}

const error = validateInput({ email: 'test@example.com', password: '12345678' });
if (error) {
    console.log(error);
} else {
    console.log('검증 통과');
}

Validator.js는 이메일, URL, 길이 등 다양한 검증을 쉽게 수행할 수 있게 한다.

7. 검증과 함께 사용하는 보안 기법

입력 검증은 보안의 일부일 뿐이다. 다음과 같은 기법과 함께 사용하면 보안이 강화된다:

• 파라미터화된 쿼리: SQL 인젝션을 방지한다.
• 출력 인코딩: XSS를 방지한다.
• 권한 관리: 민감한 작업에 대한 접근을 제한한다.

이러한 기법을 조합하면 더 안전한 애플리케이션을 구축할 수 있다.

8. 성능과 검증의 균형

과도한 검증은 성능에 영향을 줄 수 있다. 다음과 같은 점을 고려한다:

- 필수 검증만 수행: 모든 필드에 대해 엄격한 검증을 할 필요는 없다.

- 캐싱 활용: 정규 표현식 컴파일 결과를 캐싱한다.

- 비동기 검증: 시간이 오래 걸리는 검증은 비동기로 처리한다.

입력 검증은 보안의 기본이며, 성능과의 균형을 맞추는 것이 중요하다.

마무리

입력 검증은 웹 애플리케이션 보안의 필수 요소이다. 기본 원칙을 지키고, 클라이언트와 서버에서 모두 검증을 수행하며, 정규 표현식과 라이브러리를 활용하면 효과적인 검증을 구현할 수 있다. 지속적인 업데이트와 함께 보안을 유지하는 것이 중요하다.