[DreamHack] [web] [beginner] Carve Party 풀이

배울내용 : 

dreamhack,

web hacking,

개발자도구,

dreamhack 풀이,

dreamhack Carve Party 문제,

dreamhack web 풀이 ,

BurfSuite  

 

 

문제

이번에는 VM  켜서 들어가는게 없기에 문제 파일을 받아서 열어봐야합니다

 

 

 

 

html 파일 1개가 다운되는데 파일을 열면 위와 같은 호박이 나온다

그리고 호박을 클릭하니 아래의 숫자가 10000에서 1개씩 줄어드는데 하나하나 다 일일이 클릭하기 힘드니 먼저 가장 단순한 방법인 개발자 도구 html에 있는 숫자가 들어가있는 부분을 1로 바꾼뒤에 클릭하는 것이다

아래처럼 바꿔준뒤에 클릭하면 된다 

 

 

그러나 여전히 실제 숫자는 다른데 저장되어있는것 같다

 

 

그래서 다시 BurfSuite 나 코드작성으로 하면 되는데 지난번에 BurfSuite 를 작성했으니 

이번에는 코드작성으로 문제를 풀어보자

 

 

먼저 호박을 클릭해야하는 태그를 확인해주자 

F12 개발자 도구를 연다음에 아래의 선택하는걸 골라주자 

 

그리고 호박을 클릭하게 되면 아래처럼 path 라는 태그안에 호박이 있다 

 

 

즉 이 태그를 10000번을 클릭하는 코드만 만들어주면 어떤 이벤트가 나올것이다.

 

 

 

코드작성

// path 요소 선택하기
const pathElement = document.querySelector('path');

// path 요소가 존재하는지 확인하기
if (pathElement) {
  for (let i = 0; i < 10000; i++) {
    pathElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
  }
}

 

위와 같이 간단하게 pathElement 로 path 라는 걸 선택하여 변수로 선언해주고 아래와 같이 기능을 넣어준다. 

 

• dispatchEvent 메서드를 사용해 <path> 요소에 click 이벤트를 생성하고 발생시키고
• new MouseEvent('click', { bubbles: true, cancelable: true })는 클릭 이벤트를 나타내며, bubbles: true 옵션은 이벤트가 상위 요소까지 전파되도록 하고, cancelable: true는 이 이벤트가 취소될 수 있게 설정한다.

 

 

그리고 엔터를 누르게 되면 아래와 같이 호박이 그려지고 마지막으로 한번더 눌러보자

 

 

 

그러면 아래와 같이 호박이  크고 작아지는걸 반복하면서 성공플레그가 뛰워진다