(WebGoat) General - Developer Tools #1

WebGoat의 General 항목의 세 번째는 Develop Tools 사용방법에 대한 내용이다.

특히 개발자들이 자주 사용하는 크롬의 개발자 툴을 자세히 이야기 해주고 있다.

 

해당 내용에서는 2개의 퀴즈가 존재하는데 순서대로 확인해보겠다.

 

첫 번째 퀴즈는 크롬 개발자 툴에서 Console을 이용하여 특정 스크립트 함수를 실행하고, 이를 통해 생성된 값을 확인하는 퀴즈였다.

 

여기서 우선 Submit을 눌렀을 때 어떻게 값을 확인하고 있는지 소스코드를 확인해보자

src/main/java/org/owasp/webgoat/lessons/chromedevtools/NetworkDummy.java

 

 

소스코드를 확인해보면, 입력값(successMessage)와 User Session에 저장된 randValue가 같은 값인지 확인하는 것을 알 수 있다.

이를 보면 어디선가 User Session에 randValue를 설정하는 코드가 있을 것을 짐작할 수 있기 때문에, 어디서 randValue를 설정하고 있는지 다시 검색해보자.

src/main/java/org/owasp/webgoat/lessons/xss/DOMCrossSiteScripting.java

 

파일검색을 해보니 User Seesion에 randValue를 생성 및 설정 후 생성된 값을 리턴해주는 URL이 있는 것을 알 수 있다.

이 URL을 직접호출하면 해당 퀴즈를 바로 해결할 수 있을 것이다.

본 트래이닝의 취지인 크롬 개발자툴의 console을 이용하는 것이니 이번에는 console에서 명령하라고 했던 함수를 확인해보자

 

가이드 내용에서는 webgoat.customjs.phoneHome() 를 호출하라고 되어 있다.

아마도 해당 스크립트 또한 위 함수를 호출하도록 되어 있을 것이지만, 해당 스크립트 함수는 어떤 일을 하는지 다시 검색해보자

src/main/resources/webgoat/static/js/goatApp/view/GoatRouter.js

 

검색된 Script에 저장된 phoneHome 함수내용을 보니, 역시 위와 동일한 URL을 호출하도록 되어 있고, 응답값을 console.log로 기록하는 것을 확인할 수 있다.

 

그럼 다시 퀴즈를 진행해보자. 구글 개발자 툴에서 Console 탭으로 이동 후 webgoat.customjs.phoneHome() 스크립트 함수를 실행해보면, 콘솔 로그를 통해 생성된 랜덤값을 확인할 수 있다.

 

가이드에 나와 있듯이, console 창을 통해 스크립트 함수를 직접 호출하고 생성된 randValue를 확인 및 제출하여 해당 트레이닝을 통과한다.