BlueSec Inspector

English README

BlueSec Inspector는 보안 연구원과 웹 개발자를 위한 Chrome MV3 확장 도구입니다. Chrome DevTools 창을 직접 열기 어려운 제한된 개발 환경에서, Chrome 공식 chrome.debugger API와 Chrome DevTools Protocol(CDP)을 사용해 모든 일반 http/https 웹 페이지의 Console과 Elements 중심 워크플로를 제공합니다.

이 프로젝트는 Chrome DevTools 대체 도구, Chrome extension inspector, CDP console tool, DOM inspector, security research browser tool을 찾는 사용자를 위한 개발/연구용 도구입니다.

BlueSec Inspector는 ASTx 또는 기타 보안 프로그램을 비활성화, 우회, 탐지, 종료하거나 간섭하지 않습니다. 원격 코드를 로드하지 않으며, 사용자가 명시적으로 입력한 JavaScript expression만 실행합니다.

주요 기능

• Chrome Manifest V3 기반 확장 도구
• Chrome side panel 및 별도 popup window UI
• chrome.debugger 기반 active tab attach / detach
• http://*/*, https://*/* host permission을 통해 일반 웹사이트 attach 지원
• Chrome DevTools Protocol(CDP) Runtime, Console, Log, DOM, CSS, Overlay 도메인 사용
• 일반 http:// 및 https:// 웹 페이지 attach 지원
• Chrome 내부 페이지, extension 페이지, file:// 등 비웹 URL은 제한
• Console tab:
  • console.log, console.info, console.warn, console.error, console.debug
  • uncaught exception 수집
  • browser log entry 수집
  • 명시적 JavaScript expression 실행
  • object preview 및 property expansion
  • 명령어 history navigation
  • 기본 자동완성
  • clear 및 JSON export
• Elements tab:
  • DOM.getDocument 기반 DOM tree 로드
  • DOM.requestChildNodes 기반 lazy child loading
  • Overlay.highlightNode 기반 node hover highlight
  • selected element attribute 표시
  • attribute 수정 및 제거
  • matched / computed CSS 읽기 전용 표시

설치

npm install
npm run build

Chrome에서 chrome://extensions를 열고 Developer mode를 켠 뒤, "Load unpacked"를 선택하고 dist 폴더를 지정합니다.

사용법

1. 검사하려는 http:// 또는 https:// 페이지를 엽니다.
2. BlueSec Inspector 확장 아이콘을 클릭합니다.
3. Chrome side panel이 열립니다.
4. Attach를 클릭합니다.
5. Console 또는 Elements 탭을 사용합니다.
6. 별도 창이 필요하면 Open Window를 클릭합니다.
7. 작업이 끝나면 Detach를 클릭합니다.

JavaScript는 Console 입력창에서 사용자가 명시적으로 expression을 제출할 때만 실행됩니다. Attach 직후 자동으로 JavaScript를 평가하지 않습니다.

보안 메모

debugger 권한은 attach된 탭을 Chrome DevTools Protocol로 검사하고 제어할 수 있는 강력한 권한입니다. BlueSec Inspector는 사용자가 직접 Attach를 누른 탭에만 debugger session을 연결합니다.

이 도구는 모든 일반 http/https 웹사이트에서 동작하도록 host permission을 요청합니다. 수집한 console log나 DOM 데이터는 사용자의 로컬 브라우저 안에서만 처리되며 외부 서버로 전송하지 않습니다. Chrome 내부 페이지, Chrome Web Store, extension page처럼 Chrome이 debugger attach를 제한하는 페이지에서는 동작하지 않을 수 있습니다.

제한 사항

• Chrome DevTools의 완전한 대체품이 아닙니다.
• Sources, breakpoint, Network, Performance, Application, Lighthouse는 범위 밖입니다.
• iframe, worker, OOPIF, shadow DOM 처리는 제한적입니다.
• CSS cascade 세부 정보는 Chrome DevTools UI와 다를 수 있습니다.
• 같은 탭에 Chrome DevTools가 이미 attach되어 있으면 Chrome이 이 세션을 detach할 수 있습니다.
• Chrome 또는 로컬 보안 제품이 chrome.debugger attach 자체를 차단하는 경우 이 확장은 우회하지 못합니다.

수동 테스트

localhost 페이지에서 attach 후 아래 코드를 실행합니다.

console.log('hello');
console.info({ user: 'dev', count: 3 });
console.warn('warning');
console.error(new Error('boom'));
setTimeout(() => { throw new Error('async error'); }, 1000);

BlueSec Inspector Console 입력창에서:

1 + 1

({ a: 1, b: { c: 2 } })

Elements 테스트에는 아래 HTML이 있는 페이지를 사용합니다.

<div id="app">
  <button class="primary" data-test="btn">Click</button>
  <p>Hello <strong>world</strong></p>
</div>

DOM tree가 표시되는지, hover 시 페이지 element가 highlight되는지, data-test attribute 수정이 실제 페이지에 반영되는지 확인합니다.

문제 해결

• Only http and https pages can be inspected.: Chrome 내부 페이지나 file:// 페이지가 아닌 일반 웹 페이지에서 실행합니다.
• Another debugger is already attached to this tab.: 기본 DevTools를 닫거나 다른 debugger를 detach합니다.
• The target tab is no longer available.: BlueSec Inspector에서 활성 탭을 새로고침합니다.
• DOM tree가 비어 있음: 먼저 attach한 뒤 Reload DOM을 클릭합니다.

검색 키워드

Chrome extension, Manifest V3, Chrome DevTools Protocol, CDP, chrome.debugger, DevTools alternative, Console inspector, DOM inspector, Elements panel, browser security, security research, BlueSecurity.