클릭재킹과 같은 정교한 공격의 출현으로 인해 보안이 오늘날 온라인 세계의 주요 문제가 되었습니다. 공격자는 소비자가 처음에 본 것과 다른 것을 클릭하도록 속임으로써 비참한 결과를 초래할 수 있는 "클릭재킹"이라는 사악한 방법을 배포합니다. 이러한 종류의 공격은 사람들을 속여 맬웨어를 다운로드하거나, 개인 정보를 보내거나, 심지어 물건을 구매하는 등 의도하지 않은 일을 하도록 할 가능성이 있습니다. 이러한 종류의 공격으로부터 보호하기 위해 JavaScript는 동적 웹 애플리케이션의 필수 구성 요소입니다.

이 블로그 게시물에서는 클릭재킹 공격이 작동하는 방식, 이것이 위험한 이유, JavaScript에서 클릭재킹 방어 기술을 구현하는 방법에 대해 자세히 알아봅니다. 웹 애플리케이션을 보호하고 이러한 악의적인 공격을 방지하는 데 도움이 되는 실용적인 코드 예제와 전략을 제공합니다.

클릭재킹 공격 이해

클릭재킹은 악의적인 웹사이트가 일반적으로 HTML을 사용하여 다른 웹사이트를 삽입하고 보이지 않거나 오해의 소지가 있는 요소를 오버레이하여 사용자의 클릭을 효과적으로 '하이재킹'하는 공격 유형입니다. 사용자가 삽입된 페이지와 상호 작용할 때 보이는 사이트의 버튼이나 링크를 클릭하고 있다고 생각하지만 실제로는 숨겨진 삽입된 사이트와 상호 작용하고 있습니다.

다음은 공격자가 클릭재킹 공격을 수행할 수 있는 방법에 대한 기본적인 예입니다.

    
Click the button to win a prize!
    Claim Prize
     

위 코드에서 공격자의 페이지는 일반 웹페이지처럼 보이지만, 그 위에 대상 페이지를 로드하는 보이지 않는 iframe이 오버레이되어 있습니다. 사용자는 악성 페이지와 상호작용하고 있다고 생각하지만 실제로는 iframe 내의 요소를 클릭하고 있습니다.

클릭재킹이 위험한 이유

클릭재킹은 다음과 같은 심각한 결과를 초래할 수 있습니다.

의도하지 않은 구매: 사용자가 숨겨진 '구매' 버튼을 클릭하여 원치 않는 거래가 발생할 수 있습니다.

계정 손상: 공격자는 사용자를 속여 설정을 변경하거나 신뢰할 수 있는 웹사이트에 민감한 데이터를 제출하도록 할 수 있습니다.

맬웨어 다운로드: 클릭재킹을 사용하면 악성 파일 다운로드를 시작하여 사용자 기기를 감염시킬 수 있습니다.

소셜 미디어에 대한 통제력 상실: 일부 공격에는 사용자가 소셜 미디어 플랫폼에서 콘텐츠를 좋아하거나 공유하도록 속이는 것이 포함됩니다.

이러한 공격은 특히 위험합니다. 사용자는 일반적으로 너무 늦을 때까지 자신이 손상되었는지 전혀 알지 못하기 때문입니다.

자바스크립트의 클릭재킹 방어

이제 클릭재킹이 어떻게 작동하는지 이해했으므로 JavaScript로 구현할 수 있는 다양한 방어 기술을 살펴보겠습니다.

1. X-Frame-Options 헤더 사용

X-Frame-Options HTTP 헤더는 웹페이지가 다른 웹사이트의 iframe에 삽입되는 것을 방지하는 가장 간단하고 효과적인 방법 중 하나입니다. 이 헤더는 사이트가 iframe 내에 삽입될 수 있는지 여부를 브라우저에 지시합니다.

X-Frame-Options 헤더에는 세 가지 주요 옵션이 있습니다.

DENY: 페이지가 iframe에 완전히 표시되는 것을 방지합니다.

SAMEORIGIN: 요청이 동일한 도메인에서 발생한 경우에만 페이지가 삽입되도록 허용합니다.

ALLOW-FROM: 신뢰할 수 있는 특정 도메인에만 페이지가 포함되도록 허용합니다.

Node.js에서 JavaScript를 사용하여 이 헤더를 설정하는 방법은 다음과 같습니다.

const express = require('express');
const helmet = require('helmet');

const app = express();

// Use helmet to set X-Frame-Options header
app.use(helmet.frameguard({ action: 'deny' }));

app.get('/', (req, res) => {
    res.send('Clickjacking prevention with X-Frame-Options');
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

이 예에서 헬멧.frameguard() 미들웨어는 모든 응답에 대해 X-Frame-Options 헤더가 DENY로 설정되도록 보장하여 iframe 삽입을 허용하지 않음으로써 클릭재킹을 효과적으로 방지합니다.

1. 콘텐츠 보안 정책(CSP)

또 다른 효과적인 방어 메커니즘은 CSP(Content-Security-Policy) 헤더를 사용하는 것입니다. CSP 헤더는 콘텐츠를 삽입할 수 있는 방법과 위치를 보다 세밀하게 제어할 수 있습니다.

클릭재킹을 방지하려면 CSP 헤더에 프레임 조상 지시어를 포함할 수 있습니다. 이 지시어를 사용하면 사이트 삽입이 허용되는 도메인을 지정할 수 있습니다.

CSP 헤더 예:

콘텐츠 보안 정책: 프레임 조상 '자체';

이 정책은 동일한 출처('자체')만이 iframe에 페이지를 삽입할 수 있도록 보장하여 다른 웹사이트가 그렇게 하는 것을 효과적으로 방지합니다.

Node.js 애플리케이션에서 CSP를 구현하는 방법은 다음과 같습니다.

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader("Content-Security-Policy", "frame-ancestors 'self'");
    next();
});

app.get('/', (req, res) => {
    res.send('CSP frame-ancestors directive in action!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

1. JavaScript 프레임 파괴 기술

X-Frame-Options 및 CSP와 같은 헤더를 사용하는 것이 일반적으로 더 안정적이지만 JavaScript를 사용하여 프레임 버스팅을 구현할 수도 있습니다. 프레임 버스팅 스크립트는 페이지가 iframe에 삽입되는 시기를 감지하여 강제로 iframe에서 벗어나게 합니다.

다음은 iframe 삽입을 감지하고 방지하는 간단한 JavaScript 스니펫입니다.

if (window.top !== window.self) {
    // The page is embedded in an iframe, so redirect it
    window.top.location = window.self.location;
}

이 코드는 현재 창이 iframe(window.top !== window.self) 내에 로드되고 있는지 확인합니다. 그렇다면 상위 프레임(window.top)을 iframe의 현재 위치(window.self)로 리디렉션하여 효과적으로 iframe을 중단합니다.

이것은 기본 기술이며 고급 공격자가 우회할 수 있으므로 X-Frame-Options 및 CSP와 같은 헤더와 함께 보조 방어 메커니즘으로 사용해야 합니다.

1. 자바스크립트로 클릭 동작 이중 확인

또 다른 방어 기술은 클릭재킹 공격에 악용될 수 있는 중요한 작업에 대한 확인 대화 상자를 추가하는 것입니다. 사용자에게 자신의 작업을 확인하도록 요구하면 무단 클릭의 위험을 줄일 수 있습니다.

다음은 버튼 클릭 이벤트에 확인 대화 상자를 추가하는 예입니다.

Delete Account

이 예에서는 사용자가 "계정 삭제" 버튼을 클릭하면 확인 대화 상자가 나타납니다. 사용자가 취소하면 작업이 금지됩니다.

1. 삽입된 콘텐츠에 대한 샌드박스 속성 구현

자신의 사이트에 콘텐츠를 삽입할 때 iframe의 샌드박스 속성을 사용하여 삽입된 콘텐츠의 기능을 제한할 수 있습니다. 이는 포함된 콘텐츠가 수행할 수 있는 작업을 제한하므로 신뢰할 수 없는 제3자 콘텐츠를 포함할 때 유용합니다.

예를 들어:

샌드박스 속성은 양식, 스크립트 비활성화, iframe의 상위 페이지 탐색 방지 등 iframe에 대한 제한 사항을 적용합니다. 허용 스크립트 또는 허용 동일 출처와 같은 값을 추가하여 특정 기능을 선택적으로 허용할 수 있습니다.

결론: 클릭재킹 방어 강화

클릭재킹은 웹 개발자가 사용자와 데이터를 보호하기 위해 해결해야 하는 심각한 보안 위험입니다. X-Frame-Options 및 Content-Security-Policy 헤더 설정, JavaScript 프레임 버스팅 기술 사용, 중요한 작업에 대한 사용자 확인 대화 상자 추가와 같은 방어 기술을 구현하면 웹 애플리케이션에 대한 클릭재킹 공격의 위험을 크게 줄일 수 있습니다.

단일 방법만으로는 완벽할 수 없으므로 포괄적인 보호를 보장하려면 이러한 방어 메커니즘을 계층화하는 것이 중요합니다. 여러 전략을 결합하면 클릭재킹 및 기타 형태의 공격에 대한 웹 애플리케이션의 탄력성을 높일 수 있습니다.

참조 링크:

OWASP: 클릭재킹 방어 요약본

MDN 웹 문서: 콘텐츠 보안 정책(CSP)

Google 웹 기초: 클릭재킹 방지

정보를 지속적으로 확인하고 주의를 기울이면 클릭재킹의 위험으로부터 사용자와 사용자의 데이터를 보호하여 보다 안전한 탐색 환경을 보장할 수 있습니다.