웹사이트 이벤트 핸들러 디버깅

네이버 이미지 검색이 어떻게 동작하는지 살펴보다

 

내부적으로 특정 hashkey를 생성 후  header에 넣어서 이미지 검색을 요청하는 듯해 보였다.

특별히 네트워크 요청을 날리는 것 같아 보이지 않아

 

fe 측에서 만들어주는 키라고 판단이 되어 이벤트핸들러를 찾아내,

개발자 도구 디버깅 툴로 hashkey를 만드는 로직을 찾아낸 방법을 기록해 봅니다.

 

일단 네이버 이미지 검색은 이미지의 영역을 지정해

특정 api를 호출해 지정된 영역의 이미지데이터를 이용해 검색이 이뤄지는데, 

아마 내부적으로 이미지의 특정 부분이 중요하다고 판단하는 내부 알고리즘이 있는 것 같다.

 

 

 

일단 이 포스트는 웹 디버깅에 대해 포스트 하는 내용이니까, 각설하고

 

 

이미지 검색 api는 영역지정 부분의 영역을 재지정할 때 호출한다!

즉, 재지정하는 영역의 이벤트핸들러 내부를 디버깅해서 해쉬키를 만드는 로직을 찾아내면 되겠지?라는 생각으로 접근했다.

 

 

 

 

1. 이미지 내의 영역지정 element 요소를 지정해 이벤트 핸들러를 확인

 

참고로 api 요청의 header에 Sbth라는 데이터는 postman으로 테스트해본 결과 해당 필드의 value가

특정 hashkey가 아닌 경우 401 에러를 응답해 준다.

 

 

2. 해당 이벤트 핸들러 내부의 소스코드를 탐색

 

일단 1차적인 접근으로 "sbth"라고 소스코드 내에서 검색을 했다.

이게 웬걸? 떡하니 소스코드에 해당 필드를 만드는 로직이 떡하니 있다.

 

 

 

3. 해당 로직에 break point를 찍고 생성로직 탐색

 

짜잔 es5로 트랜스파일링 된 코드가 보기 좀 어렵지만 CB라는 함수 내에 sbth를 만드는 로직이 있었다.

코드로 유추해 보니 현재 Date 정보와 aes 암호화를 통해 특정 key를 만드는 것으로 추측이 되었다.

 

 

4. 가지고 있는 정보를 토대로 해결방법탐색

 

간단하게 javascript로 aes-256 암호화를 구현하는 방법을 탐색했다.

알아본바로 Node에 내장되어 있는 crypto를 활용해 볼 수 있었다.

 

 

 

5.  그 밖의 이슈

 

해당 로직이 있는 프로젝트는 웹에서 동작하고 vite를 사용한 프로젝트였는데,

 

Node의 crypto 모듈을 사용하려니 에러가 발생했다.

그래서 브라우저에서도 node에서 지원하는 모듈을 사용할 수 있게 

 

nodePolyfills라는 vite 플러그인을 별도로 사용해서 브라우저 환경에서도 crypto를 사용할 수 있게 세팅했다..!

https://www.npmjs.com/package/vite-plugin-node-polyfills

vite-plugin-node-polyfills

 

 

이번 프로젝트는 타 사이트에서 스크랩을 해와야 하는 기능들이 많은데,

웹 디버깅하는 능력을 더 키워야겠다..!