카테고리 없음

프론트/백엔드 이중 유효성 검증하는 이유

kinggoddino 2024. 11. 16.

중복 작업이 아니라, 각자의 역할이 다름.

 

0. 프론트엔드와 백엔드 유효성 검증의 차이

 

0-1. 프론트엔드 유효성 검증

역할: 사용자 경험을 향상시키기 위함

  • 실시간 피드백 제공 (입력 오류 시 빨간 경고 표시 등)
  • 데이터가 서버로 전송되기 전에 간단히 필터링

but: 프론트엔드 유효성 검증의 한계

  • 프론트엔드 검증은 쉽게 우회될 수 있음
  • 악의적인 사용자가 브라우저의 개발자 도구를 사용해 검증을 비활성화하거나, 직접 조작한 데이터를 서버로 보낼 수 있음

 

0-2. 백엔드 유효성 검증

역할: 데이터의 신뢰성과 보안을 보장

  • 보안: 악의적인 데이터 입력(예: SQL Injection, 스크립트 공격)을 방지
  • 데이터 무결성: 잘못된 데이터(예: 형식에 맞지 않는 이메일, 비어 있는 필드 등)가 데이터베이스에 저장되지 않도록 보장

ex: 백엔드 유효성 검증의 예시

  • 사용자가 이메일 필드에 not_an_email을 입력한 경우, 프론트엔드 검증을 우회하면 이런 데이터가 서버로 전송될 수 있음
  • 백엔드에서 검증하지 않으면 데이터베이스에 잘못된 이메일이 저장됨

 

1. 보안(Security)

백엔드 검증이 필수인 이유:

  • 프론트엔드 검증은 신뢰할 수 없음. 클라이언트에서 실행되는 코드는 사용자가 쉽게 조작할 수 있기 때문.
  • ex) 프론트엔드의 JavaScript를 꺼버리거나 or 개발자 도구를 이용해서 검증 로직을 우회할 수 있음
  • 따라서 백엔드에서 검증을 하지 않으면 악의적인 데이터가 서버에 저장되거나 처리될 수 있음
  • 이는 보안 취약점을 발생시켜 데이터 유출이나 시스템 장애를 초래할 수 있음

→ 백엔드 검증은 최종 방어선으로 데이터의 신뢰성과 안전성을 보장

 


2. 사용자 경험(User Experience, UX)

프론트엔드 검증이 필수인 이유:

  • 빠른 피드백 제공: 사용자가 잘못된 데이터를 입력했을 때, 서버로 전송하고 응답을 기다리기 전에 즉시 오류 메시지를 표시해줌
  • ex) 이메일 형식이 잘못됐거나 비밀번호가 너무 짧으면, 입력 후 바로 알려줘서 불필요한 요청을 줄이고 사용자 경험을 개선할 수 있음
  • 이 과정이 없다면 사용자는 입력 오류를 수정할 때마다 서버에 데이터를 보내고 응답을 기다려야 하기 때문에 느리고 불편하고 개빡치는 경험을 하게 됨

→ 프론트엔드 검증은 사용자에게 빠른 피드백을 제공하여 더 나은 경험을 제공


3. 데이터 무결성(Data Integrity)

  • 백엔드에서 데이터의 최종 확인:
    • 프론트엔드에서 검증을 하더라도, 네트워크나 클라이언트 조작으로 인해 데이터가 훼손되거나 변조될 수 있음
    • 따라서 백엔드에서는 모든 데이터가 정확하고 올바른지를 다시 한 번 확인해서 데이터 무결성을 유지해야 함

4. 예시:

  • 프론트엔드 검증: 사용자가 회원가입할 때 비밀번호를 입력했는데 5자리를 입력. 프론트엔드에서 바로 "비밀번호는 최소 8자리여야 합니다"라는 메시지를 보여줌.
  • 백엔드 검증: 악의적인 사용자가 프론트엔드 검증을 우회해서 5자리 비밀번호를 서버에 보냈다고 해도, 백엔드에서 다시 "비밀번호는 최소 8자리여야 합니다" 라는 검증이 동작해서 데이터 저장을 막아줌.

 

5. forms.py를 사용할 때와 사용하지 않을 때의 비교

forms.py 사용

백엔드에서 자동 유효성 검증:

  • 폼에서 정의한 유효성 검사 로직을 자동으로 수행.
  • 검증 실패 시, 템플릿에 에러 메시지 전달.

데이터 저장 간소화:

  • form.save()를 호출하면 유효성 검사를 통과한 데이터만 저장.

forms.py 사용하지 않을 때

직접 유효성 검증:

  • 모든 유효성 검사를 뷰에서 수동으로 처리해야 함.

데이터 저장:

  • 모델 객체를 직접 생성하고 저장.
  • 유효성 검사가 누락될 가능성이 있음.