Bookmarklet

Bookmarklet은 Javascript 함수를 Bookmark에 추가하여 마치 브라우저 확장 기능과 유사하게 사용하는 기법으로 간단한 생성 방법에 비해 웹에서의 불편했던 작업들을 단축시킬 수 있어서 많은 사람들이 애용하는 기술입니다.

한가지 예를들어 아래와 같은 코드를 Bookmark에 추가합시다. 아래 코드는 jsonip.com에 현재 PC의 Public IP를 조회하는 요청을 발생시킵니다.

javascript:var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == XMLHttpRequest.DONE) { if(xmlhttp.status == 200) { prompt('Public IP:', JSON.parse(xmlhttp.responseText).ip); } else { alert('eee') } } }; xmlhttp.open("GET", "//jsonip.com", true); xmlhttp.send();

등록한 Bookmark를 클릭하면 prompt() 를 통해 현재 IP를 바로 확인할 수 있습니다.

이런 것을 Bookmarklet이라고 합니다.

ZAP with Bookmarklet

ZAP은 대다수 기능을 API로 제공하고 있습니다. 이러한 점을 이용하면 평소에 설정에서 자주 변경해야하는 부분이나 메뉴 위치가 복잡하여 찾기 어려운 기능을 Bookmarklet으로 등록하여 브라우저단에서 직접 호출시켜 편하게 사용할 수 있습니다.

ZAP의 API 목록과 테스트해볼 수 있는 페이지는 Proxy Listen 포트에서 제공되고 있습니다.

GET http://localhost:8090/UI HTTP/1.1

여기서 원하는 기능들의 API를 확인하고 해당 API를 XMLHttpRequest로 호출하는 형태로 Bookmarklet을 만들어 쓸 수 있습니다. ZAP은 모든 API를 GET으로 처리할 수 있어 구성이 간단하고, 설정에 따라 JSONP 모드로 변경할 수 있어서 ZAP과 직접 상호작용하며 동작할 수 있는 Bookmarklet을 만들 수 있죠.

ZAP Bookmarklet Online

매번 하나하나 만들기 귀찮기 때문에 Bookmarklet을 쉽게 생성할 수 있는 페이지와 몇가지 샘플 리스트를 만들어서 올려두었습니다.

https://www.hahwul.com/phoenix/zap-bookmarklet/

Generate

Bookmarklet 생성은 Geneate 에서 Name과 API Query에 값을 입력한 후 아래 Generate 버튼을 클릭하여 생성할 수 있습니다.

Use preset

미리 만들어둔 preset은 드래그 앤 드롭으로 Bookmark 영역에 끌어넣어 주시면 바로 사용할 수 있습니다.

References

• https://www.hahwul.com/2017/12/04/coding-bookmarklet-vs-browser-extension/
• https://www.hahwul.com/phoenix/zap-bookmarklet/