Frudy
6k
2021-01-03 15:55:08 작성 2021-01-03 16:05:07 수정됨
4
640

Query String 유효성 검증하기 모듈 구현 (demo 첨부)


개요

1. 기존 문제

2. 해결할 목표 3가지

3. 테스트한 예제


작년 10월에 해결하고싶었지만 해결못한 문제가 있었습니다.

그래서, 총 3가지 기존문제를 해결한 모듈을 소개하고자 글을 작성할게요.


기존 문제

https://section.blog.naver.com/Search/Post.nhn?pageNo=1&rangeType=ALL&orderBy=sim&keyword=hello


이건 네이버 블로그 검색결과의 URL인대요,

이걸로 예를 든다면


주소창에,

https://section.blog.naver.com/Search/Post.nhn?unknownKey=saddasddasd 라는 이상한 경로로

사이트에 접속하면,


API요청도 

https://section.blog.naver.com/ajax/SearchList.nhn?unknownKey=saddasddasd


이렇게 하고있었습니다.

(네이버 블로그 API경로에는 ajax가있네요?)


물론 사용자가 주소창 직접 건들지않고

네이버에서 만든 링크를 누르거나

네이버에서 만든 검색버튼을 누르거나

네이버에서 만든 정렬버튼을 누를경우, 저런일은 안생기지만


그럼에도, 사용자가 주소창을 마음대로 고칠 수 있기 때문에

저는 쿼리스트링을 유효성검증할 필요성을 느꼈습니다.


그래서, 아래의 3가지를 해결했습니다.


해결할 목표 3가지


1. 유효하지않은 key가 있는 경우

?unknownKey=123같은게있다면 이부분 없애고 요청보낼거구요,


2. 유효하지않은 value가 있는경우


유효한 검색종류는 저렇게 3가지인데

쿼리스트링에 ?searchType=bug 이런 주소가 있으면 이것도 제거하고 요청을 보내고싶었어요.


3, 셋트 쿼리스트링이 없는경우 전부 제거

쿼리스트링 제일 흔한경우가 검색과 정렬이에요.

하지만 검색과 정렬은, 대체로 쿼리스트링이 2개씩 필요한경우가 많아요.


?searchText=hello&searchType=title

검색에 대한 쿼리스트링은 이 2개가 같이 있어야하고,

만약 둘중 하나라도 없거나 유효하지않으면, 2개가 둘다 없어야해요.


?searchText=hello 처럼 쿼리스트링에 검색관련된게 하나밖에 없거나,

?searchText=hello&searchType=bug 처럼 검색관련된것중 하나이상이 유효하지않은경우,

API 요청경로에는 searchText와 searchType을 둘 다 들어가면 안되요.


정렬도 정렬기준, 정렬값(오름차순, 내림차순) 2개가 서로 셋트로 유효해야하는 거구요.


데모페이지 링크

핵심 모듈파일 링크


그래서, 제가 제작한 모듈은 위와같은 케이스로 테스트가 진행됬어요.


1. 상황 : 회원목록을 조회하는 사이트 + 검색 + 정렬이 있음.

2. 검색, 정렬에 대해 유효한 key는 searchText, searchType, orderby, direction 4개라고 가정

3. 정렬값에 대해 유효한 value는 asc, desc 2개라고 가정

4. 검색종류에 대한 유효한key는 회원이름(name), 회원이메일 (email)라고 가정

5. 정렬에 대해 유효한 값은 last-login-date, signup-date (마지막 로그인날짜, 회원가입날짜) 2개라고 가정


음..열심히 그림을 그려보면 이런느낌입니다.


그리고,

직접 주소창에 이상한거 막 입력하며 제 모듈 기능을 확인해보시라고 하기가 뭐해서


이런식으로 테스트링크를 나열했어요.

사용자가 주소창에 이상한 key를 입력했다고 생각하고 저런 링크를 만들었거든요.


ㅡㅡㅡ


예제설명


검색에 대해 검색어, 검색종류 2가지가 정상인 경우, 옆과같이 API호출을 할 때 정상적으로 추가됩니다.


유효하지않은 key가 있다면 API요청보낼때는 제거하고 보냅니다.



key가 searchType으로 오타가 났거나

검색종류에 유효한 값은 email name 2개인데 nme같은 값이 들어있다거나

아예 searchType 쿼리스트링 자체가없다면

검색 쿼리스트링 2개 둘 다 요청에 보내지않습니다. (실제라면 결과는 일반 회원목록 API를 호출하겠네요)


나머지도 비슷한 맥락입니다.


유효하지않은 key가 있거나 value가 있다면 삭제하고 요청보내는데,

셋트로 필요한 key가 없다면 그 셋트 전부 다 제거하고 요청보냅니다.


ㅡㅡㅡㅡ


최근 회사에서 구현중인 사이트가 관리자 사이트인데,

특성상 검색과 정렬을 되게 여러 웹페이지에 넣어야하는 상황이 있었어요.

위 모듈을 적용한 덕분에 중복코드부터 안전성까지 많이 나아졌습니다.


제가 먼저 집에서 개발했고 이후에 회사 프로젝트에 적용한거니

소스는 오픈해도 문제없을거라고 생각해요.

피드백 주시면 감사합니다.

0
  • 댓글 4

  • zepinos
    20k
    2021-01-03 18:26:40

    링크를 javascript 같이 사용자 브라우져에서 만들지만 않는다면 signature , nonce 정도의 변조방지로 이미 많이 구현되어 있을텐데요.

  • Frudy
    6k
    2021-01-03 18:55:02 작성 2021-01-03 18:55:47 수정됨

    nonce, 

    nonce javascript라고 검색해봐도 제가 겪고있던 문제를 해결해주는 구현체를 찾지못했는데


    키위드알려주실수있나요?

  • zepinos
    20k
    2021-01-03 19:42:41

    nonce signature 변조방지 정도로 검색하시면 됩니다.

    nonce 는 임의의 문자(재사용 하지 않아야함), signature 는 querystring 을 hash 처리한다던지 해서 만들어낸 검증값(일종의 지문)입니다. signature 생성 시 쓰는 key 는 서버에서 잘 보관해야하고 salt 값으로 보통 nonce 을 쓰는데, timestamp 을 쓰거나 유추하기 힘근 문자열을 만든 뒤 그 값을 응용해 salt 값을 추출해 이용하는 방식입니다. 더 복잡하게 하기 위해 querystring 의 키와 값을 추출해 키를 정렬해서 다시 문자열로 만들고 그 문자열을 signature 처리한다던지...보안에 신경쓰면 쓸수록 다양한 방법을 가미합니다.

    jwt 나 jwe 도 이 범주에 들어간다 볼 수 있습니다.

  • ISA
    4k
    2021-01-03 22:53:56
    유효한 값에 대한 검증은 필요하지만.. 뭔가 고려하실 점이 있나보네요.
    화이팅
  • 로그인을 하시면 댓글을 등록할 수 있습니다.