JavaScript에서 클릭재킹 공격 방지-JS 튜토리얼-php.cn

JavaScript에서 클릭재킹 공격 방지

WBOY

풀어 주다： 2024-07-22 17:56:39

원래의

1073명이 탐색했습니다.

Preventing Clickjacking Attacks in JavaScript

UI 교정이라고도 알려진 클릭재킹은 악의적인 행위자가 iframe 내에 웹페이지를 삽입하여 사용자가 인식한 것과 다른 것을 클릭하도록 속이는 공격 유형입니다. 이로 인해 무단 작업이 발생하고 사용자 보안이 손상될 수 있습니다. 이 블로그에서는 사용자 친화적인 예시와 함께 JavaScript와 Apache 및 Nginx용 서버 구성을 사용하여 클릭재킹 공격을 방지하는 방법을 살펴보겠습니다.

클릭재킹 이해

클릭재킹은 합법적인 웹페이지 요소 위에 투명하거나 불투명한 iframe을 배치하여 사용자가 자신도 모르게 설정 변경이나 자금 이체 등의 작업을 수행하도록 하는 것을 의미합니다.

실제 사례

공격자가 은행 사이트의 숨겨진 iframe을 신뢰할 수 있는 웹페이지에 삽입하는 시나리오를 생각해 보세요. 사용자가 겉으로는 무해해 보이는 버튼을 클릭하면 실제로는 은행 거래를 승인하는 것일 수도 있습니다.

다음은 취약한 페이지의 예입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clickjacking Example</title>
</head>
<body>
    <h1>Welcome to Our Site</h1>
    <button onclick="alert('Clicked!')">Click Me</button>
    <iframe src="https://example-bank.com/transfer" style="opacity:0; position:absolute; top:0; left:0; width:100%; height:100%;"></iframe>
</body>
</html>

로그인 후 복사

JavaScript로 클릭재킹 방지

클릭재킹 공격을 방지하려면 JavaScript를 사용하여 웹사이트가 프레이밍되지 않도록 할 수 있습니다. 이 보호를 구현하는 방법에 대한 단계별 가이드는 다음과 같습니다.

1. JavaScript 프레임 버스팅
프레임 버스팅에는 JavaScript를 사용하여 웹사이트가 iframe 내부에 로드되어 있고 iframe에서 빠져 나오는지 감지하는 작업이 포함됩니다.

예:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame Busting Example</title>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.self.location;
        }
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

로그인 후 복사

이 예에서 JavaScript는 현재 창(window.self)이 최상위 창(window.top)이 아닌지 확인합니다. 그렇지 않은 경우 최상위 창을 현재 창의 URL로 리디렉션하여 효과적으로 iframe을 중단합니다.

2. 이벤트 리스너를 통한 향상된 프레임 버스팅
이벤트 리스너를 사용하여 페이지에 프레임이 있는지 지속적으로 확인하면 프레임 버스팅 기술을 더욱 향상시킬 수 있습니다.

예:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Frame Busting</title>
    <script>
        function preventClickjacking() {
            if (window.top !== window.self) {
                window.top.location = window.self.location;
            }
        }

        window.addEventListener('DOMContentLoaded', preventClickjacking);
        window.addEventListener('load', preventClickjacking);
        window.addEventListener('resize', preventClickjacking);
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

로그인 후 복사

이 예에서는 지속적인 보호를 보장하기 위해 DOMContentLoaded, 로드 및 크기 조정 이벤트에서 PreventClickjacking 함수가 호출됩니다.

서버측 보호

JavaScript 방법이 유용하지만 서버 측 보호를 구현하면 추가 보안 계층이 제공됩니다. 클릭재킹을 방지하기 위해 Apache 및 Nginx에서 HTTP 헤더를 설정하는 방법은 다음과 같습니다.

1. X-프레임 옵션 헤더
X-Frame-Options 헤더를 사용하면 사이트를 iframe에 삽입할 수 있는지 여부를 지정할 수 있습니다. 세 가지 옵션이 있습니다:

거부: 모든 도메인이 페이지를 삽입하는 것을 방지합니다.
SAMEORIGIN: 동일한 출처에서만 임베딩을 허용합니다.
ALLOW-FROM uri: 지정된 URI에서 삽입을 허용합니다.
예:

X-Frame-Options: DENY

로그인 후 복사

아파치 구성
서버 구성에 다음 헤더를 추가하세요.

# Apache
Header always set X-Frame-Options "DENY"

로그인 후 복사

Nginx 구성
서버 구성에 다음 헤더를 추가하세요.

2. CSP(콘텐츠 보안 정책) 프레임 상위 항목
CSP는 iframe을 사용하여 페이지를 삽입할 수 있는 유효한 상위 항목을 지정하는 프레임 조상 지시문을 통해 보다 유연한 접근 방식을 제공합니다.

예:

Content-Security-Policy: frame-ancestors 'self'

로그인 후 복사

아파치 구성
서버 구성에 다음 헤더를 추가하세요.

예:

# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

로그인 후 복사

Nginx 구성
서버 구성에 다음 헤더를 추가하세요.

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";

로그인 후 복사

결론

클릭재킹은 웹 보안에 심각한 위협이지만 JavaScript 프레임 버스팅 기술과 X-Frame-Options 및 Content-Security-Policy 헤더와 같은 서버측 보호를 구현하면 웹 애플리케이션을 효과적으로 보호할 수 있습니다. 제공된 예를 사용하여 사이트 보안을 강화하고 사용자에게 보다 안전한 경험을 제공하세요.

위 내용은 JavaScript에서 클릭재킹 공격 방지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!