북마클릿은 웹 브라우저의 즐겨찾기(북마크) 기능을 활용하여, JavaScript 코드를 실행함으로써 현재 페이지에 특정 기능을 즉시 적용할 수 있게 만든 소형 프로그램이다. 일반적인 북마크가 특정 URL을 저장하는 데 반해, 북마클릿은 javascript: 스키마를 이용해 코드 자체를 저장한다.
개념
- 구성:
javascript:로 시작하는 URI 형태의 문자열로, 브라우저가 이를 클릭하면 해당 JavaScript가 현재 문서 컨텍스트에서 실행된다. - 목적: 페이지 내용의 변환, 스타일 적용, 데이터를 추출·전송, UI 요소 추가 등 다양한 일회성 작업을 빠르게 수행한다.
동작 원리
- 사용자는 북마클릿을 즐겨찾기에 저장한다. 저장된 URL은 실제 웹 주소가 아닌
javascript:로 시작하는 스크립트이다. - 사용자가 해당 북마클릿을 클릭하면 브라우저는 현재 활성 탭의 DOM(Document Object Model) 환경에 스크립트를 삽입하고 실행한다.
- 스크립트는 페이지의 HTML, CSS, JavaScript 등에 접근해 원하는 동작을 수행한다.
역사
- 초기 등장: 2000년대 초반, 웹 브라우저가 JavaScript 실행을 허용하면서 북마클릿 개념이 등장하였다. 초기에는 Mozilla Firefox와 Internet Explorer 사용자 사이에서 활발히 공유되었다.
- 표준화: 별도의 공식 표준은 없으나, 대부분의 주요 브라우저(Chrome, Firefox, Safari, Edge 등)에서
javascript:URI를 지원한다. - 확산: 웹 개발 커뮤니티 및 사용자 스크립트 저장소(예: Greasemonkey, Tampermonkey)와 연계되어 다양한 용도와 예제가 공유되었다.
보안 이슈
- XSS 위험: 북마클릿이 실행되는 컨텍스트가 현재 페이지와 동일하기 때문에, 악의적인 스크립트가 포함될 경우 사용자의 세션 쿠키, 입력 데이터 등에 접근할 위험이 있다.
- 브라우저 정책 변화: 일부 최신 브라우저는 보안 강화를 위해
javascript:URI를 제한하거나, 사용자에게 경고 메시지를 표시한다. - 권고 사항: 출처가 확인된 북마클릿만 사용하고, 의심스러운 스크립트는 실행하지 않을 것을 권고한다.
사용 예시
| 용도 | 대표적인 북마클릿 예시 |
|---|---|
| 페이지 색상 반전 | javascript:(function(){document.body.style.filter='invert(100%)';})(); |
| 이미지 다운로드 | javascript:(function(){var imgs=document.images;for(var i=0;i<imgs.length;i++){window.open(imgs[i].src);}})(); |
| 텍스트 선택 복사 | javascript:(function(){var s=window.getSelection().toString();navigator.clipboard.writeText(s);alert('복사되었습니다');})(); |
관련 용어
- 북마크(Bookmarks): 웹 페이지 URL을 저장하는 브라우저 기능.
- 스마트북마크(Smart Bookmark): Firefox에서 제공하는, 파라미터를 받아 동적으로 동작하는 북마클릿 형태.
- 브라우저 확장 프로그램(Extensions): 북마클릿보다 복잡한 기능을 제공하며, 별도의 설치가 필요한 소프트웨어.
참고 문헌
- Mozilla Developer Network (MDN) – Bookmarklets
- W3C – JavaScript URI Scheme (비표준 사양)
- 다양한 오픈소스 커뮤니티와 기술 블로그에서 제공되는 실사용 예시 및 보안 가이드라인.
(본 내용은 공개된 기술 자료와 일반적인 웹 개발 관행을 기반으로 작성되었습니다.)