이전에 zap spider로 크롤링을 하다 우연히 Confidential Document 문제를 해결했는데 문제 해결 알림의 Jump to related coding challenge 버튼으로 score board를 찾았습니다.
주소가 localhost:3000/#/score-board 였는데 사이의 /# 때문에 zap에서 안나온 것 같아서 저게 무슨 역할을 하는지 찾아보았습니다.
웹 표준에서 URL의 # 뒤에 붙는 문자열은 서버에 새로운 페이지를 요청하는 용도가 아닙니다. 과거에는 문서 내 특정 위치로 스크롤을 이동시킬 때 썼고, 최근에는 브라우저 내부에서만 화면을 전환(클라이언트 사이드 라우팅)할 때 사용합니다.
따라서 브라우저에 http://localhost:3000/#/score-board를 입력하더라도, 실제로 네트워크를 통해 서버로 날아가는 HTTP 요청은 http://localhost:3000/ 뿐입니다. ZAP의 기본 스파이더는 서버와 통신하는 HTTP 패킷을 분석하여 동작하므로, 서버로 전송되지 않는 # 뒷부분은 새로운 경로로 인식하지 않고 무시해 버립니다.
따라서 zap의 기본 스파이더로는 score-board를 찾을 수가 없었던 것입니다.
OWASP Juice Shop은 Angular로 작성되어 있고, Angular의 라우팅 구조는 보통 {path: 'score-board', component: xx} 처럼 생겼습니다.
개발자 도구에서 main.js를 찾은 후 path:로 검색하게 되면 score-board를 찾을 수 있습니다.
이때 zap의 search를 사용하면 웹팩(Webpack) 등의 프론트엔드 빌드 도구에 의해 압축 및 난독화가 적용된 상태이므로 path:는 찾을 수 있지만 score-board는 짧은 변수로 변환되어 찾을 수가 없습니다.
Score Board 문제의 코딩 챌린지로 넘어가 보겠습니다. 아까 확인했던 Angular의 라우팅 테이블이 보기로 주어지고 있습니다.
여기선 당연히 저희가 찾았던 score-board 경로와 component 줄을 선택해 주면 됩니다.
Fix It의 정답은 아무런 수정을 하지 않는 것입니다. 처음엔 저도 이게 무슨 말인가 했는데, 아마 score board 페이지는 접근이 제한되어야 하는 페이지가 아니라고 보는 것 같습니다. 난독화나 권한 검사 등을 추가하면 접근해야 할 일반 사용자의 접근성이 떨어지기 때문에 아무런 조치를 하지 않는게 정답인 것 같습니다.
