[Web Hacking] 실제 사이트를 개발자 도구로 분석하기

0. 문제 상황

교외 장학금을 신청하던 중, 학력사항(고등학교)을 요구하여 학교를 검색하였다.

하지만 내가 다닌 고등학교가 나오지 않아서

이에 대한 원인을 분석하고, 임시로 해결을 하였다.

 

1. 작동 방식

 

위의 사진에서 볼 수 있듯이, 해당 페이지는

(1) '학교 검색' 버튼을 누르면 ,우측 사진과 같은 팝업이 나온다.

(2) 사용자가 학교 이름을 검색한 뒤, '검색' 버튼을 누르면 학교들의 리스트가 나온다.

 

(2)번을 좀 더 자세히 살펴보자.

개발자 도구의 Network 탭을 보면 쉽게 알 수 있듯이

커리어넷(career.go.kr)의 오픈API를 통해 GET 요청을 보낸 뒤

해당 결과를 사용자에게 보여주고 있다.

 

2. 원인

커리어넷 오픈API를 기준으로, '중앙고등학교'를 포함하는 고등학교는 28개이다.

실제 요청의 Payload

하지만 해당 페이지는 가나다 순으로 처음 10개의 검색 결과만을 사용자에게 보여주고 있다.

 

다른 지역의 중앙고등학교는 지명을 포함하기 때문에 (예. 강릉중앙고등학교)

사용자가 검색어를 구체적으로 특정 지으면 해당 문제를 쉽게 해결할 수 있다.

그러나 내가 다닌 중앙고등학교는 그냥 '중앙고등학교'이기 때문에

검색어를 조정하는 방법은 불가하다.

 

즉, 학교를 검색했을 때 30개 정도의 결과를 보여주도록 하면

해결이 될 것이라고 예상해볼 수 있다.

 

3. 해결

개발자도구의 Sources 탭에서 '검색' 버튼을 눌렀을 때 실행되는 js 파일을 찾아보면 아래와 같다.

perPage를 30으로 바꾸면 중앙고등학교에 대한 모든 검색 결과를 볼 수 있을 것이다.

실제 js 파일

아래 사진은 실제로 파일을 수정한 이후의 검색 결과 중 일부이다.

찾고자 했던 '중앙고등학교 (서울특별시)'를 포함한 모든 결과가 잘 나오는 것을 확인할 수 있다.

해결된 검색 결과

 

4. 기타

위의 사진에서는 가려놓았지만 사이트에서 사용중인 커리어넷의 오픈API 키가 노출되어 있다.

사이트에서 보내는 요청, GET 요청을 보내는 js 파일 등에서 바로 확인이 가능하다.

 

큰 문제는 아닐 수도 있지만,

기본적으로 API키는 노출되면 안 된다고 알고 있기 때문에

해당 사이트의 Q&A를 통해 문제에 대하여 공유하였다.

 

이전에 웹 해킹을 공부했던 것을 통해서 문제를 해결해낸 것이 재미 있었고,

개발자 도구만으로도 꽤 많은 것이 가능하다는 것을 깨닫을 수 있는 경험이었다.

 

또한, 처음에 코드를 작성한 분은 10개의 검색결과만으로도 충분하다고 생각하였지만

실제로는 중앙고등학교 같이 검색하려는 문자열이

여러 문자열들의 부분문자열이 되는 예외 케이스도 있을 수 있기 때문에

이러한 부분들에 대해서도 고려하는 것이 필요하다는 것을 느낄 수 있었다.

예컨대, 지역에 대한 정보도 입력받을 수 있게 한다. 등..

 

(24.02.16 추가)

https://devtalk.kakao.com/t/rest-api-api-key/80122

위의 글을 찾아보니

API 키가 노출된다고 무조건 보안 문제가 발생하는 것은 아닌 것 같다.