ExpressJS express-validator 유효성 검사

ExpressJS Express express-validator 유효성 검사

각 서비스는 클라이언트가 존재하므로 폼이 존재한다. 서비스의 규모가 커질수록 더 많은 사용자의 데이터가 필요하게 되고 서버와 클라이언트가 데이터를 주고받기 위한 폼이 더 많아지게 된다. 사용자의 데이터는 대부분 데이터베이스에 저장되는데 저장되는 시점에 유효하지 않은 데이터가 저장되면 안 되므로 저장 전 클라이언트가 보낸 데이터의 유효성을 반드시 검사해야 한다. 1차적으로 클라이언트에서 사용자의 입력값을 필터링할 수 있지만 사용자는 자바스크립트 코드를 볼 수 있고 해제할 수 있어 완벽하지 않다. 사용자의 경험을 좋게 만들 순 있어도 전체적인 서비스 관점에서보면 결코 안전하지않다. 그럼 결국 서버에서 유효성 검사를 해야하는데 대부분의 데이터베이스는 기본적으로 내장된 유효성 검사 기능이 존재한다. 하지만 이는 옵션으로 데이터베이스에 저장되기 전 필터링을 하면 된다. 서버에서 필터링 시 기본적으로 응답 알림을 별도로 작성해야 하는데 응답은 새로고침 되지 않고 사용자가 입력한 데이터가 그대로 보존돼야한다. 입력 시 알림과 같이 값이 초기화된다면 사용자는 정보를 처음부터 입력해야 하므로 경험이 매우 끔찍해진다.

 

유효성 검사

express-validator는 미들웨어이다. 라우터에 유효성 검사 미들웨어를 추가하고 검사 결과를 컨트롤러에서 처리한다. 객체 속성 중 check와 validation을 구조 분해하여 임포트 하는데 check는 라우터 validation은 컨트롤러에 임포트 한다. express-validator에는 수많은 유효성 검사를 할 수 있는 내장 메서드들이 있으므로 공식 문서를 참고하면 된다.

- npm i express-validator

isEmail ㅡ> 이메일 형식 검사)

isAlphanumeric ㅡ> 문자와 수 입력 가능

isLength({ min: number, max: number }) ㅡ> 최소 길이 최대 길이 지정

is.URL ㅡ> 도메인 형식 검사

 

app.js > routes > auth.js

라우터

app.js > controllers > auth.js

app.js > controllers > auth.js

validationResult(req)

 

check의 인수로 검사하고자 하는 폼 데이터 입력 속성(name) 값(value)을 넣는다. check는 기본적으로 body query params header cookie를 검사한다. check의 기본 메서드로 이메일 형식을 검사하는 isEmail을 넣어주면 입력값이 이메일 형식인지 검사한다. 검사 과정에서 발생한 에러는 컨트롤러에 validationResult에 인수로 req를 넣어주면 검사에서  발생한 에러를 객체로 반환한다.

 

 

validationResult의 메서드 isEmpty는 에러 여부의 따라 불값을 리턴하는데 이를 활용해 분기 처리 할 수 있다.

 

커스텀 에러 메세지

기본적으로 출력되는 메세지가 아닌 withMessage를 사용해 메세지를 커스텀 할 수 있다. withMessage는 바로 앞 메서드만을 참조한다. 검사 중 에러가 없다면 빈 배열(undefined)이 나오고 에러가 있다면 메세지가 출력된다.

 

 

커스텀 유효성 검사

express-validator의 내장돼있는 유효성 검사 기능들은 많지만 그  내 서비스에 적합한 검사를 찾을 수 없다면 custom 메서드를 활용해 직접 검사를 커스텀 하여 사용할 수 있다. 처음 인수로 값을 넣어주는데 값은 check("email")이며 다음 인수로 req 객체를 구조 분해하여 넣어준다. req는 기본적으로 미들웨어에서 사용하는 req 객체다. 커스텀 검사에 리턴 값에 따라 라우터 validationResult(req)가 에러 여부가 결정된다. 커스텀 검사는 불값과 프로미스를 반환할 수 있다.

 

 

커스텀 유효성 검사에 조건이 만족하여 트루를 리턴하므로 에러 메세지가 출력되지 않고 req 객체에 body 값도 확인할 수 있다.

 

 

 

body

위에서 언급했지만 check 메서드는 body query params header cookie를 검사한다. body만 원할 경우 따로 임포트 하여 사용할 수 있다. check와 마찬가지로 인수의 폼 데이터의 입력한 속성값을 넣어준다. 패스워드의 최소 길이는 5 최대 길이는 10이며 특수기호는 사용 불가하며 문자와 수만 입력 가능하다.

 

 

isLength로 최소/최대 길이를 지정하고 isAlphanumeric으로 특수문자 사용을 제한했다.

 

 

커스텀 검사를 활용해 처음 입력했던 비밀번호와 비교할 수 있다.

 

 

포스팅에서는 회원가입 라우터에만 유효성 검사를 했지만 이를 활용해 다른 POST 요청 라우터(로그인/글 작성 등)에 쓰면 될 거 같다. 추가로 서버의 보안은 중요하다는 걸 다시 한번 느꼈다. 유효성 검사는 컨트롤러에 도달하기 전 즉 요청이 오면 처음으로 실행되는데 코드가 라우터 부분에 작성되어 지저분한 거 같다. 유효성 검사도 컨트롤러처럼 따로 분리할 수 있을 거 같은데 이렇게 되면 MVC 패턴이 아닌 게 되지 않나 싶다. 추가로 실무에서 어떤 식으로 활용되는지 추가 공부가 필요하다. 그럼20000.

 

---

 

https://express-validator.github.io/docs/

Getting Started · express-validator

https://github.com/chriso/validator.js

GitHub - validatorjs/validator.js: String validation