크롬 디버깅 2 : 쿠팡 장바구니 바꿔치기
시작전에 세가지만 알아두세요. 자바스크립트는
(1) 소스가 모두에게 노출된다
(2) 조작 가능하다
(3) 한줄씩 실행된다
----------------------------------------------------------------
이번에는 쿠팡 모바일웹에서 스크립트를 조작해보겠습니다.
B상품페이지에서 장바구니 담기를 눌렸을때 A상품이 담기게 해보려고합니다.
쿠팡에서 A상품을 팔고있네요.
장바구니 담기 버튼 클릭시 어떤일이 일어나는지 궁금한데요
onclick 이벤트를 HTML에 친절하게 걸어놓지는 않았네요.
그러나 Event Listeners를 봤더니 BuyAreaCartApi.js에 클릭이벤트가 걸려있다고 합니다.
왠만한 버튼들은 클릭이벤트가 없을수 없죠! 당장 이동해봅시다.
57라인에 클릭이벤트를 걸어놓은게 보이네요.
58라인이 실행될 예정이므로 브레이크 포인트를 걸어놓고 버튼을 클릭합시다.
브레이크가 잘 걸렸으면 그때 콘솔창에 _this.addCart를 쳐주세요. ※ 실행될 함수가 콘솔창에 나옵니다. () 괄호는 꼭 빼고 치세요! ※
브레이크가 안걸린상태에서 쳤을땐 not defined로 나오는걸 봐선 특정 스코프내에서만 쓸 수 있는 함수라는걸 알 수 있습니다. 그리고 저 js내에서 Ctrl+F로 찾는건 정확하지 않기 때문에 위 방법을 쓰는게 좋습니다.
콘솔창의 f () { ... 를 클릭했더니 105라인으로 이동했습니다.
그래서 브레이크 포인트는 106과 122라인, 그리고 ajax 호출 응답인 133, 153라인에 잡았고
ajax 콜 하기 직전에 멈춰서 어떤 값을 같이 날리는지 살펴봤습니다.
눈치빠르신 분들은 productId, vendorItemId 변수가 장바구니에 물건을 담는 중요값이라는걸 아셨겠죠?
productId : 234450416, vendorItemId : ["4879415303:1"] 이걸 기억해줍시다! (나중에 써먹을 예정)
그리고 소스를 마저 실행해서 응답을 받아옵니다.
ajax 호출결과로 data에 "OK", "성공"이 들어간것을 확인했습니다.
참고로 성공인지 아닌지는 Network 탭에서 ajax 호출시 주소의 Response를 보고도 알 수 있습니다.
로그보존을 위해 Preserve log 체크는 꼭 해주세요.
물건은 장바구니에 잘 담겼네요.
자... 이제 장바구니를 비우고 B상품으로 이동해주세요. 그리고 A상품과 똑같이 ajax 호출 전에 브레이크를 걸어봤습니다.
당연히 B상품 기준으로 productId, vendorItemId가 셋팅되어있죠? 그럼 아까 기억해뒀던 A상품 값으로 바꾸어줍시다!
B상품페이지인데 A상품을 장바구니에 담았습니다. 스크립트를 조작해서 결과를 다르게 만들어보았는데요.
결론은!? 자바스크립트 소스는 잘 짜여있더라도, 언제든지 수정되어 실행될 수 있으며 중간에 값을 바꿀수도 있다는 것입니다. 예제는 장바구니였기때문에 서비스에 문제가 없겠지만, 의도하지 않은 계산결과를 서버로 넘겨줄수도 있다는걸 보여드리고 싶었습니다. 서버단 방어로직이 구현되어있지 않다면 자바스크립트만으로도 충분히 시스템 오류를 발생시킬 수도 있겠죠. 물론 더 다양한 공격방법이 있지만요.
자바스크립트는 소스가 노출이 되는만큼 악의적인 공격에도 취약하다는 점을 꼭 알아두시고 개발하시기 바랍니다!