파이썬 XSS Cross-SiteScripting 크로스사이트스크립팅 방어

XSS(Cross-SiteScripting 크로스사이트스크립팅)이란?

예를 들어 이름을 입력하라고 만들어놓은 칸에다 같은 걸 입력해서 사이트에 의도하지 않은 자바스크립트 코드를 실행시키는 공격

우리가 ajax를 통해 app.py로 전달하는 데이터를 받는 input 상자에다

<script> 무시무시한 동작을 하는 자바스크립트 코드 </script>

를 입력하면 그게 그대로 db에 등록되고, 그걸 불러오면 우리가 의도하지 않은 자바스크립트 코드가 실행되는 치명적인 취약점이 있었다.
약간의 자바스크립트 코드만 알아도 저기에 야동사이트로 보내버리는 코드같은 걸 작성할 수도 있다. 그럼 우리 사이트로 들어오자마자 이상한 데로 가버릴 수도 있게 되는 것!ㅠㅠ

적용하려는 방어법

input에 입력되어 서버측으로 전달된 값을 서버측에서 escape(<script>같은 문자열을 자바스크립트 코드가 아닌 일반문자열로 저장되게하는 방법)

방법

우리 서버측 언어가 파이썬python이므로 python에서 어떻게 하는지 찾아봤다.
php에서는 htmlspecialchars(string); 와 같이 했던 기억이 났다.

python에서는 html이란 이름의 모듈(패키지)을 설치
(pip install html) 한 다음,
import html 을 통해 해당 모듈을 import하고,
html.escape(string) 을 통해 escape시켜서 db에 저장하거나 html쪽으로 보내주면 된다.

Validation

XSS 방어에 이어 validation을 통해 최대한 의도한 값만 받을 수 있게 하는 방법도 알아봤다. python flask의 validation 체크 방법이 잘 설명된 글을 찾았다.
https://velog.io/@devmin/python-flask-request-validator
근데 우선, javascript로 validation 체크해둔 것으로 만족할까한다. 개발자도구 콘솔을 통해 뚫고 들어올 수 있지만 적어도 서버측에서 XSS방어는 해뒀으니 괜찮지 않을까...(안일)

주문내역 불러오기 작업

핸드폰번호로 검색해서, 해당 핸드폰번호로 주문된 주문내역을 mongoDB에서 find해서 가져온 뒤 표로 보여주는 코딩.
주문내역정보 중 주문한 메뉴, 개수, 가격정보는 하나의 주문에 여러개의 메뉴를 주문하므로 하나의 field안에 list(array)로 넣었고, list안에서도 "메뉴, 개수, 가격"이라고 쉼표로 구분되는 문자열string로 넣었다. 따라서 이걸 불러와서 쓸 때도 array안에서 값을 하나씩 꺼내고 다시 그 값을 "," 쉼표를 기준으로 split해서 메뉴, 개수, 가격을 분리하여 쓰도록 코딩.