…

클라이언트 사이드 입력 검증에 대해 알아보기 전에, 클라이언트와 서버 간의 데이터 처리 절차를 먼저 살펴보자.

(그림 삽입 예정)

위 그림과 같이 서버에 데이터를 전송하면 서버에서도 오류를 처리하지만, 서버에서만 입력을 검증할 경우 클라이언트에서 입력 검증을 처리할 때보다 속도도 느리고 불필요한 요청을 계속 처리하게 된다는 한계가 있다. 이러한 한계를 보완하기 위해 클라이언트 측에서의 입력 검증은 필수적이다.

또한 보안적인 관점에서도 클라이언트 사이드 입력 검증은 사용자가 입력한 데이터를 서버로 전송하기 전에 미리 필터링하고 제한함으로써 다양한 보안 위협을 줄이기 위한 조치이다. 클라이언트 검증은 보안의 첫 번째 방어선 역할을 하며, 기본적인 공격을 차단하거나 공격 시도를 어렵게 만들 수 있다. 그러나 클라이언트 사이드 검증만을 100% 신뢰할 수는 없으므로 서버 사이드 검증과 병행해야 한다는 점을 유의하자.

(1) 중요성

웹 애플리케이션에서 사용자가 입력하는 데이터는 신뢰할 수 없는 출처로 간주해야 한다. 사용자가 의도적으로 악성 코드를 포함한 데이터를 입력할 수 있기 때문에 애플리케이션의 모든 입력 값에 대해 신뢰할 수 있는지에 대한 검증을 수행해야 한다.

입력 검증의 목적은 애플리케이션이 예상하지 못한 입력을 처리하는 과정에서 발생할 수 있는 다양한 보안 위험을 방지하는 것이다. 입력 검증은 보안적인 목적 외에도 데이터 무결성을 보장하고, 잘못된 데이터로 인해 발생할 수 있는 애플리케이션 오류를 줄이는 역할을 한다.

프론트엔드에서 입력 검증을 수행하는 이유는 다음과 같다.

프론트엔드에서 입력 검증의 역할

빠른 피드백 제공: 사용자가 데이터를 입력할 때 실시간으로 오류를 알려주어 빠르게 수정할 수 있도록 도와준다.

서버 리소스 절약: 잘못된 데이터가 서버로 전송되지 않도록 막아 불필요한 서버 요청을 줄이고, 서버의 부하를 줄인다.

보안 공격 방지: 클라이언트 측에서 기본적인 입력 검증을 통해 XSS, SQL 인젝션 등의 공격 시도를 일차적으로 차단할 수 있다.

다만, 클라이언트 측 검증은 보조적인 보안 조치에 불과하다는 점을 명심해야 한다. 공격자는 클라이언트 측에서 실행되는 자바스크립트를 비활성화하거나, 클라이언트 검증을 우회할 수 있는 다양한 방법을 사용할 수 있기 때문에 반드시 서버 측에서 추가적인 검증을 수행해야 한다.

(2) 입력 검증이 필요한 주요 보안 위협

1) XSS(Cross-Site Scripting) 방지

XSS 공격은 공격자가 악의적인 스크립트를 다른 사용자의 브라우저에서 실행하도록 하는 공격이다. 클라이언트 측에서 이러한 공격을 방지하려면 입력 데이터에 HTML 태그나 자바스크립트 코드가 포함되지 않도록 필터링해야 한다.

예시

자바스크립트로 XSS 필터링


function sanitizeInput(input) {
  const element = document.createElement('div');
  element.innerText = input; // HTML 요소로 변환하여 스크립트 태그를 중화
  return element.innerHTML;
}

document.querySelector('form').addEventListener('submit', function(event) {
  const userInput = document.getElementById('comment').value;
  const sanitizedInput = sanitizeInput(userInput);
  document.getElementById('comment').value = sanitizedInput; // 검증된 값만 서버로 전송
});

이 코드에서, 입력된 데이터에 HTML이나 자바스크립트 태그가 포함되어 있는 경우 이를 텍스트로 변환하여 실행되지 않도록 처리한다.

2) SQL 인젝션 방지

SQL 인젝션은 공격자가 SQL 쿼리에 악의적인 코드를 삽입하는 방법으로, 클라이언트 측에서 검증을 통해 쿼리에 특수 문자가 포함되지 않도록 할 수 있다. 하지만 SQL 인젝션은 서버 측에서 반드시 막아야 하며 클라이언트 측에서만 막을 수는 없다.

예시


function validateInput(input) {
  const pattern = /^[a-zA-Z0-9]+$/;  // 영문과 숫자만 허용
  return pattern.test(input);
}

document.querySelector('form').addEventListener('submit', function(event) {
  const userInput = document.getElementById('username').value;
  if (!validateInput(userInput)) {
    event.preventDefault();  // 유효하지 않은 데이터가 서버로 전송되는 것을 차단
    alert("Invalid input!");
  }
});

위 예시에서는 알파벳과 숫자만 허용하는 정규식을 적용하여, 특수 문자가 입력되지 않도록 검증하고 있다.