클라이언트 프레임워크 디버깅 쉽게하기

이 글을 쓰는 이유는 모의해킹 하다보면 여러가지 프레임워크나 라이브러리 등을 만날 수 있는데, 번들링으로 인해 소스코드 디버깅이 힘든 경우가 매우 많다.
 
vanilajs의 경우 그냥 Event Listeners에서 click 이벤트만 확인하면 끝이 나겠지만, 프레임워크나 라이브러리의 경우 Event Listeners에서 확인해도 번들링 되어 엉뚱한 곳으로 안내하기 때문에 디버깅이 힘든 경우가 대다수다.
 
그래서 생각해낸게 API context를 확인하여 Sources 패널에서 검색하면 이처럼 디버깅이 가능하다.
 

브레이크 포인트 설정 방법

아무리 번들링이 되었더라도 API 전송할 때 브레이크 포인트 설정만 잘 해놓는다면 react의 redux던 vue의 vuex던 내 상태관리에 들어가는 값들을 맘대로 수정할 수 있다.
 
 
위 이미지를 예를 들어보면, 인증번호를 보내고 인증이 완료된 사용자만 비밀번호를 수정할 수 있는 팝업이 나오도록 설계된 로직이다.

1. Sources 패널에서 API context를 기준으로 검색하여 브레이크포인트(bp)를 설정한다.
2. 설정된 bp로 오도록 인증번호 전송 버튼을 클릭하면 자동으로 bp가 설정된 로직으로 올 수 있다.
 - (t 변수 안에 object가 존재하는 경우) Console에서 `t.passwdChangePopup();`를 바로 띄워도 된다.
 - (t 변수 안에 object가 없는 경우) 한줄 한줄 실행해가며 Conditional ternary Operator에서 사용하는 변수들을 조건에 맞게 넘겨 True로 만들어준 후 passwdChangePopup()을 띄우면된다.

 
이렇게 브레이크포인트 설정을 통해 기존에 burp에서는 API Response만 수정 가능했지만 이렇게 한다면 더 세세한 로직을 볼 수 있다는게 장점이다. 또한, redux나 vuex는 번들링된 객체안에서 사용하기 때문에 직접 접근이 힘들지만 브레이크포인트 설정으로 인해 return 값을 수정할 수 있기 때문에 원하는 값을 redux나 vuex에 삽입할 수 있다는게 가장 큰 장점이다. 그리고 마지막으로 선언만 되어있다면 원하는 내 맘대로 함수를 호출할 수 있다.