<-->
본문 바로가기

프로그래밍/nodeJS

Controller 수준의 유효성 검증 (express-validator)

반응형

form POST 데이터 저장 경로

 

아래 그림은 데이터가 저장되는 경로이다. (HTML form의 경우)

 

form POST 데이터 저장 경로

 

 

express-validator(Controller 수준 유효성 검증)는 필수!!

 

VIEW수준 (HTML) 에만 유효성 검증을 적용하면 이렇게 악용 될수있다.

noodler.tistory.com/45

 

HTML 유효성 검증 취약점

웹사이트에 유효성 검증 기능을 적용하다가 생각해냈다.  view(MVC할때 view)쪽에서 HTML Form input의 pattern을 설정하고있는데 email name password 제출 생각해보니까 view 파일들은 브라우저에서 소스를 확

noodler.tistory.com

 

이는 Controller 수준에 유효성 검증을 추가해서 방지할 수있다..

 

 

express-validator

 

Controller 수준의 유효성 검증은 express-validator 패키지를 사용하여 간단하게 추가 할 수있다.

(버전 업데이트(6.x.x) 된 뒤로 app.use(expressValidator())는 안써줘도 된다!!!!!)

 

 

npm install --save express-validator

app.js

const router = require("express").Router();
const {body} = require("express-validator"); //잊지마세요!!

router.post(url,유입 데이터 체크,에러 처리 콜백,라우터콜백 ...); //아래에서 설명합니당

 

일반적인 router 메소드 파라미터에 두가지만 추가해주면된다. 

 

1. 유입 데이터 체크

 

body(필드,에러메시지) 메소드에 검증 체인 api를 붙이면 된다.

ex) body("필드","에러메시지").검증 api.검증 api

 

api는 아래 문서에서 확인해보자!

express-validator.github.io/docs/validation-chain-api.html

 

Validation Chain API · express-validator

The validation chain is a middleware, and it _should_ be passed to an Express route handler.

express-validator.github.io

 

const router = require("express").Router();
const {body} = require("express-validator"); //잊지마세요!!

//body(필드,메시지).검사api.검사api

const 유입 데이터 체크 = [
    body("name","이름을 안쓰셨습니다").notEmpty(),
    body("foodExpenses","식비 입력해주세요").isInt({min:2000, max:10000}),
    body("email","이메일란을 확인해주세요!").isEmail().notEmpty()
];

router.post(url,유입 데이터 체크, 에러 처리 콜백, 라우터 콜백 ...);

 

 

2. 에러 처리 콜백

 

유입 데이터 체크를 통과하면서 생긴 에러 메시지

validationResult(req)로 받을수 있다.

 

const router = require("express").Router();
const {body,validationResult} = require("express-validator"); //잊지마세요!!


const 유입 데이터 체크 = [
    body("name","이름을 안쓰셨습니다").notEmpty(),
    body("foodExpenses","식비 입력해주세요").isInt({min:2000, max:10000}),
    body("email","이메일란을 확인해주세요!").isEmail().notEmpty()
];

const 에러 처리 콜백 = (req,res,next) =>{
	const errors = validationResult(req); // 여기에요!!!
	console.log(errors);
}


router.post(url,유입 데이터 체크, 에러 처리 콜백, 라우터 콜백 ...);

 

결과는

 

여기서 원하는 값에 접근하면된다.

 

+  에러 배열 출력

 

나는 에러 메시지만 모아서 flash메시지로 VIEW에 보내봤다

 

//예시
const router = require("express").Router();
const {body,validationResult} = require("express-validator"); //잊지마세요!!


const 유입 데이터 체크 = [
    body("name","이름을 안쓰셨습니다").notEmpty(),
    body("foodExpenses","식비 입력해주세요").isInt({min:2000, max:10000}),
    body("email","이메일란을 확인해주세요!").isEmail().notEmpty()
];

const 에러 처리 콜백 = (req,res,next) =>{
	const errors = validationResult(req).errors //에러 배열에 접근
    if(Object.keys(errors).length !== 0 ){ //에러가 있다면
    	let messages = errors.map(e => e.msg) //각 배열의 msg만 모은 새 배열 리턴
        req.flash("error",messages); //flash메시지로 view에 전달
    }
    next();
}


router.post(url,유입 데이터 체크, 에러 처리 콜백, 라우터 콜백 ...);

 

뭐든 알고나면 쉬운 컴퓨터 세상