재고검색사이트의 View 구조

본 사이트의 View구조, 즉 Html 맵핑구조는 간단하게 3가지 정도로만 나뉘어져있다.

  • 최초의 Index 페이지
  • 검색 선택 페이지 (Select)
  • 최종 검색 결과 페이지 (Result)

View.py 사진 첨부

selse.png

1. Index 페이지

최초의 Index 페이지에서는 이용자가 검색하고자 하는 책의 정보를 입력받는 곳이다.

해당 페이지는 딱히 프로그래밍적 기능적인 부분은 들어가있지 않기에, 단순한 HTML코딩으로만 이루어져있다.

Index 페이지의 View단 코드(위) 및 Html 코드(아래)

view.png

index h.png

해당 페이지에서 사용자가 입력한 텍스트 정보를 Post 방식으로 Select 페이지에 넘겨준다. 정보를 넘겨주는 것 이외의 기능은 전혀 없다.

2. Select 페이지

Select 페이지의 View단 코드와 Html 코드 일부

select view.png

selec html.png

Select페이지는 Index페이지에서 이용자가 검색한 단어를 받아와 네이버 API측으로 넘겨준다. 최초 로직은 단순하게 네이버 Book 포탈사이트에서 직접 검색을 한 뒤 가장 연관순위가 높은 책 5권의 해당하는 데이터를 크롤링하여 정보를 넘겨주는 것이었지만, 서비스의 속도개선을 위해 네이버 Book API를 끌어다 쓰기로했다.

해당 페이지는 2개의 분기점으로 갈라지는데, 이용자가 입력한 단어에 연관되는 책이 한권도 존재하지 않을 경우 반환하게 되는 Error 페이지와 정상적으로 책을 받아왔을때 반환하는 기본 Select 페이지로 나뉘어진다.

네이버 API에서 받아온 데이터는 딕션 컨테이너로 구성되어있으며, 본 사이트에서 실질적으로 필요한 데이터들은 딕션 안 특정 Key의 Values값으로 들어가있다. 해당 Values값 역시 딕션 자료형이며(딕션 안의 딕션) 우리는 해당 Values 값에서 책의 제목, 작가, 출판사, 이미지, 가격, isbn에 해당하는 정보만을 뽑아와 Select 페이지의 Html에 랜더링 해주었다.

특히 isbn 데이터는 이후 Result 페이지로 연결해주는 요청 파라미터 데이터로 사용했다. 재고검색 버튼에 해당 isbn 데이터를 연결하여 해당 버튼을 클릭했을때 선택한 책에 대한 재고 Result 페이지로 연결되는 구조이다.(post 요청으로 연결)

데이터 가공의 흐름도

구조도.png

3. Result 페이지

Result 페이지는 검색한 책에 관한 전국 교보문고 점포의 재고정보를 크롤링해서 보여준다. (아직 영풍문고와 반디앤루니스의 재고정보는 추가하지 않았음)

Select 페이지에서 받아온 Isbn 데이터를 이용해서 해당하는 각 서점의 링크에 접속하고 재고정보를 크롤링해오는 로직으로 구성되어있다. 책에 관한 재고정보와 Select 페이지에서 가져온 책에 대한 세부적 내용은 임시 DB에 저장되고, 해당 DB 데이터는 Result 페이지에서 랜더링 된다.(재고테이블과 점포 윈포윈도우에 데이터의 내용이 렌더링)

Result 페이지를 작성하면서 고민했던 부분은 보안상의 문제였다. 우리는 Select페이지에서 선택된 책에관한 재고정보를 긁어와 임시 DB에 저장해놓고, 저장해놓은 DB의 칼럼 명칭과 값을 그대로 Json 형식으로 바꿔 Result 페이지로 넘겨준다. 이렇게 넘겨받은 데이터를 Result 페이지에서 재가공하여 Html에 동적으로 데이터를 띄운다. 그 과정에서 DB 레코도의 이름이 그대로 들어나는게 문제였다.

DB 칼럼 정보 노출관련 사진첨부

보안.png

3-1. 코드 난독화

자바스크립트와 Html문서의 코드는 서버에서 배포해준 그대로 클라이언트가 받아와 클라이언트 로컬 컴퓨터 환경에서 페이지를 그리는것이기때문에, 정보자체의 노출을 아예 숨겨보자는 접근은 불가능했다.

따라서 정보는 노출시키되 최대한 난독화를 시켜보자는 생각으로 자바스크립트로 구성된 코드들을 전부 특정문자체계로 인코딩을 해보기로 했다.
예를들면 노출되는 문자를 모두 base64 인코딩하는 것.

Base64 인코딩 관련 View 수정파일 코드

base634.png

Base64로 인코딩되어 Html 소스가 출력되는 모습

base64.png

해당 방법의 보안은 공격자가 인코딩,디코딩에대한 간단한 지식만 보유하고 있어도 곧바로 뚫리겠지만 적어도 찜찜함은 어느정도 덜 수 있었다.

3-2. DB 모델명 자체를 가명화시킨후 넘겨주기

인코딩식의 난독화는 아무래도 너무 취약했기때문에,다른 방법이 있는지 고심해보았다. 그러다 같이 작업한 지인분께 DB 모델명 자체를 가명화 시킨후 넘겨주는게 어떨까라는 의견과 함께 해당방법으로 작업한 코드를 받았다. 코드를 보고나니까 당연하고 가장 쉬운방법을 왜 여태 생각 못했지? 라는 생각이 들었다.

DB 모델명 가명화는, 모델에서 데이터를 받아온 후 칼럼 이름만 가명화시킨다음 다시 딕션 컨테이너에 닮아 Json으로 전해준다. 어려울 것도 없는 내용이었다.

따라서 우리사이트의 현재 Result 페이지는 키와 벨류로 쌍을 지은 딕션값들이 겉으로 드러나지만, 해당 딕션의 키값은 가명화되어있다.