4. 클릭재킹

(1) 이해

[그림 4-1] 클릭재킹 공격 - 사용자는 응원하기를 누른다고 생각하지만 결제하기를 누르게 된다

클릭재킹(Clickjacking)은 공격자가 사용자로 하여금 자신이 의도하지 않은 행동을 하도록 속이는 웹 보안 공격이다. 공격자는 사용자가 신뢰하는 웹사이트의 콘텐츠를 프레임이나 투명한 레이어 뒤에 숨기고, 사용자가 그 위에 겹쳐진 투명한 버튼이나 링크를 클릭하도록 유도한다. 사용자는 자신이 클릭한 것이 신뢰할 수 있는 웹사이트의 기능이라고 생각하지만, 실제로는 공격자가 의도한 악성 동작을 수행하게 된다. 쉽게 말해서, 사용자가 "취소" 버튼을 누르려고 했는데, 사실은 "개인정보 제공" 버튼을 누른 셈이 되는 것이다. 클릭재킹을 통해 공격자는 사용자의 개인 정보를 유출하거나 그들의 컴퓨터에 대한 제어를 획득할 수 있다.

(2) 클릭재킹 공격 시나리오

1) 사용자 인터페이스 조작

공격자는 투명한 레이어나 CSS를 이용하여 사용자 인터페이스를 조작하여 사용자의 클릭을 가로챌 수 있다.

예를 들어, 신뢰할 수 있는 웹사이트인 척하며 사용자에게 클릭재킹을 유도하는 피싱 사이트가 있다고 가정해보자. 이런 경우 사용자는 신뢰할 수 있는 웹사이트 내의 버튼을 동작시켰다고 생각하지만, 실제로는 공격자가 유도한 동작이 실행되게 된다.


<html>
<head>
  <title>Clickjacking Example</title>
  <style>
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.1; /* 투명하게 설정하여 사용자가 신뢰할 수 있는 웹사이트를 보게 함 */
      z-index: 1;
    }
    .clickable {
      position: absolute;
      top: 200px; /* 신뢰할 수 있는 웹사이트의 버튼 위치에 맞춤 */
      left: 300px;
      width: 200px;
      height: 50px;
      z-index: 2;
      opacity: 0; /* 완전히 투명하게 설정 */
      cursor: pointer;
    }
  </style>
</head>
<body>
  <iframe src="https://trustworthy-website.com"></iframe>
  <div class="clickable" onclick="alert('Clickjacking successful!');"></div>
</body>
</html>

2) 웹 애플리케이션의 취약점

웹 애플리케이션에 XSS(Cross-Site Scripting)와 같은 취약점이 존재하는 경우, 공격자는 이를 악용하여 클릭재킹을 수행할 수 있다. 예를 들어, 공격자가 저장형 XSS의 취약점을 이용해 아래 코드를 서버에 저장했다고 가정해보자. 그러면 사용자는 iframe 안에 로드된 신뢰할 수 있는 웹사이트의 특정 버튼을 누른다고 생각하지만 공격자가 의도한 동작이 수행되게 될 것이다.


<script>
  // 공격자가 XSS를 통해 삽입한 스크립트
  const iframe = document.createElement('iframe');
  iframe.style.position = 'absolute';
  iframe.style.top = '0';
  iframe.style.left = '0';
  iframe.style.width = '100%';
  iframe.style.height = '100%';
  iframe.style.opacity = '0';
  iframe.src = 'https://신뢰할수있는웹사이트.com';
  document.body.appendChild(iframe);

  var transparentButton = document.createElement('button');
  transparentButton.style.position = 'absolute';
  transparentButton.style.top = '50px'; // 신뢰할 수 있는 웹사이트의 특정 버튼 위치에 맞춤
  transparentButton.style.left = '100px';
  transparentButton.style.width = '100px';
  transparentButton.style.height = '50px';
  transparentButton.style.opacity = '0';
  transparentButton.onclick = function() {
    // 공격자가 의도한 동작 수행
    alert('클릭재킹 성공!');
  };
  document.body.appendChild(transparentButton);
</script>

(3) 클릭재킹 대책

1) UI 디자인 및 인터페이스 요소 보호

중요한 버튼이나 링크는 사용자가 쉽게 접근할 수 없는 곳에 배치하거나, 클릭 전에 추가 확인 절차를 거치도록 한다.

2) JavaScript를 사용한 방어

아래 코드와 같이 JavaScript를 사용하여 페이지가 iframe 내에서 로드되는지 확인하고, 로드된 경우 사용자에게 경고하거나 페이지 로드를 중지한다.


if (window.top !== window.self) {
  window.top.location = window.location;
}