북마크릿이 뭔지 알아보자

북마크릿이 뭔지 알아보자

“로그인된 브라우저에서 직접 수집할 수 있으면 인증 문제가 사라지지 않을까”라는 생각으로 북마크릿을 알아봤다. 브라우저 안에 이미 자동화 인터페이스가 내장되어 있었다.

1. 서론 (Introduction)

• 문제/상황 (Problem): 서버에서 수집하려면 쿠키를 추출해 전달해야 했다. 이미 로그인된 내 브라우저로 직접 수집하면 이 과정이 필요 없어진다.
• 목적 (Purpose): 북마크릿이 무엇인지, 어떻게 동작하는지, 어떤 상황에서 쓸 수 있는지 이해한다.
• 대상 (Target Audience): 브라우저 내장 자동화 도구를 처음 접하는 개발자.

2. 방법 및 과정 (Methods & Process)

• 배경 조사 및 데이터 (Data Collection): 북마크릿(Bookmarklet)은 javascript: 프로토콜로 시작하는 URL을 즐겨찾기에 저장한 것이다. 일반 북마크는 URL로 이동하지만, 북마크릿은 현재 페이지를 떠나지 않고 코드를 실행한다. 실행 컨텍스트가 현재 페이지이기 때문에 document, window, DOM 전체에 접근할 수 있고, 페이지 소유 쿠키·세션 토큰·렌더링된 HTML 모두 접근 가능하다.

할 수 있는 것	할 수 없는 것
현재 페이지 DOM에서 텍스트·링크·데이터 추출	다른 도메인 <iframe> 내부 접근(Same-Origin 제약)
버튼 클릭, 폼 입력 자동화	백그라운드 자동 실행(매번 클릭해야 트리거)
페이지 전환 감지 후 수집	—
내 서버로 데이터 전송(Beacon, JSONP)	—

• 접근 방법 (Approach Methods):
  • [방법 1]: 주소창 실행 원리 확인. 브라우저 주소창에 javascript: alert('hello')를 입력하면 현재 페이지에서 알림이 뜬다. 북마크릿은 이 원리를 즐겨찾기로 저장해 클릭으로 재실행하는 것이다.
  • [방법 2]: 즐겨찾기 등록 방식 확인. 즐겨찾기 추가 창에서 URL 칸에 javascript:로 시작하는 코드를 입력하면 된다. 코드가 길면 브라우저 콘솔에서 만든 뒤 즐겨찾기 바로 드래그하는 방식도 쓸 수 있다.
• 분석 및 해결 프로세스 (Analysis Flow):
  • 도구/기술: 파이썬 urllib.parse.quote, 브라우저 주소창.
  • 주요 단계: 실행할 JS 코드 작성 $\rightarrow$ javascript: 접두사 + URL 인코딩 $\rightarrow$ 즐겨찾기 URL 칸에 등록 $\rightarrow$ 클릭으로 재실행.
  • 결과 도출 및 검증: 현재 페이지 title을 console.log로 출력하는 JS 코드를 javascript: URL로 인코딩한 결과 길이 175자짜리 URL이 생성됐고, javascript: 접두사로 시작함을 확인했다.

3. 결과 (Results)

• 분석 결과 요약: 북마크릿으로 로그인이 필요한 사이트에서 이미 인증된 상태로 DOM을 읽을 수 있었다. 서버에서 쿠키를 추출·전달하는 과정이 필요 없어졌고, 클릭 한 번으로 현재 페이지에서 원하는 데이터를 추출하는 도구를 만들 수 있었다.

4. 인사이트 및 액션 (Insights & Action)

• 인사이트 (Insight): 북마크릿은 브라우저 내장 자동화 인터페이스다. 설치 도구가 필요 없고 브라우저 하나면 된다.
• 실행 방안 (Action Plan): 자주 쓰는 추출 로직을 북마크릿으로 저장해두면 어느 기기에서든 즐겨찾기 클릭 한 번으로 실행된다.
• 한 줄 결론 (Key Takeaway): 북마크릿은 즐겨찾기에 저장된 JavaScript다. 브라우저 어디서든 실행할 수 있는 가장 가벼운 자동화다. 샘플 코드
• 다음 스텝 (Next Step): 이번 데모는 코드 인코딩까지만 다뤘다. 코드 길이가 길어질 때 URL 인코딩이 브라우저별 즐겨찾기 URL 길이 제한에 걸리는 지점을 실측해두면 더 안전하게 쓸 수 있다.

---