웹 응용 프로그램의 클릭 납치 방지
클릭 납치란 무엇입니까?
Clickjacking은 보이지 않거나 다른 요소로 위장한 웹페이지 요소를 클릭하도록 유인하는 공격이다.이로 인해 사용자가 무심코 악성 소프트웨어를 다운로드하거나 악성 웹 페이지를 방문하거나 증빙서류나 민감한 정보를 제공하거나 이체하거나 온라인으로 제품을 구매할 수 있다.
예를 들어, 만약 응용 프로그램이 로그인과 등록 같은 폼을 포함한다면, 납치 공격을 받을 수도 있다.
<iframe src=""> 라벨을 통해 가짜 UI 층을 연결해서 웹 사이트 맨 위에 끼워 넣을 수도 있다.다음 예를 고려하십시오.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Click jacking</title>
<style>
.toplayer{
position: relative;
width:100%;
z-index:1;
}
#topmostlayer{
position: absolute;
z-index: 9999;
opacity: 0.0001;
top: 50%;
left: 50% // can be adjusted according to your login button UI placements
}
</style>
</head>
<body>
<form >
<input type="text" placeholder="Enter username">
<input type="password" placeholder="Enter password">
<button class="toplayer btn btn-login">Login</button>
</form>
<a id="topmostlayer" role="button"> Click here
<iframe src="https://anonymous-web.com"></iframe>
</a>
</body>
</html>
현재 흥미로운 것은 우리가 알고 있는 css 속성
z-index 과 <iframe> 표시에 삽입된 <a> 표시를 사용하여 DOM 작업을 할 수 있다는 것입니다.로그인 단추에
.toplayer 라는 css 클래스가 추가되었습니다. 이 클래스의 z 인덱스는 1 또는 기본값으로 설정할 수 있습니다.따라서 언제든지 <iframe src="https://anonymous-web.com"> <a> 표시된 id와 함께 DOM에 들어가면 공격자는 DOM에 있는 단추의 위치를 식별하고 똑같은 복사본을 만들거나, 단추를 로그인 단추에 겹치도록 '여기를 클릭하십시오' 라는 button 위치를 배치합니다. #topmostlayer{
position: absolute;
z-index: 9999;
opacity: 0.0001;
top: 50%;
left: 50% // can be adjusted according to your login button UI placements
}
#topmostlayer 로그인 단추의 맨 위에 강제로 사용자 인터페이스를 표시하고 css 속성 z-index: 9999; 이 사용자 인터페이스를 숨겨서 기존 DOM 단계에 어떤 사용자 인터페이스가 있는지 알 수 있습니다.이러한 공격을 UI 수정이라고 합니다.
클릭 납치 빈틈 검사
많은 온라인 도구가 우리가 배치한 URL이 다른 URL에 삽입될 수 있는지 검사할 수 있습니다.예를 들어 Clickjacker,Lookout,gf-dev.나는 "Clickjacker"를 더 좋아한다. 왜냐하면 거기에서 네가 배치한 URL을 테스트할 수 있기 때문이다. 이것은 너에게 POC를 주고 너의 URL에 대한
opacity:0.0001; 정보를 식별할 수 있기 때문이다.X-frame-options, CSP headers, Raw Http headers가 "sameorigin"인 경우 URL이 안전합니다.
다음은 공격이 발생하지 않도록 원본 Http 헤드의 캡처입니다.
클릭 납치를 어떻게 방지합니까?
1. 프레임 파괴
간단한 작업은
X-frame-option 표시를 통해 UI가 겹치거나 DOM 작업이 겹치지 않도록 하는 것입니다.프런트엔드에서 페이지가 로드될 때 다음 코드를 추가하여 UI 레이어 삽입<iframe> 태그의 HTML 상단을 확인할 수 있습니다.<style>
/* Hide page by default */
html { display : none; }
</style>
<script>
if (self == top) {
// Everything checks out, show the page.
document.documentElement.style.display = 'block';
} else {
// Break out of the frame.
top.location = self.location;
}
</script>
2. X-Frame 옵션 및 컨텐츠 보안 정책
서버에서 X-Frame-Options가 응답 헤더임을 설정할 수 있습니다.개발자는 클릭 납치로부터 사이트를 보호하기 위해 그것을 사용할 수 있다.Iframe에서 브라우저가 다음 값을 설정하여 페이지를 표시할 수 있는지 여부를 나타내는 데 사용할 수 있습니다.
<body>DENY를 지정하면 프레임에 페이지를 로드할 수 없습니다.X-FRAME-OPTIONS: DENY다른 한편, SAMEORIGIN을 지정하면 프레임에 이 페이지를 포함하는 사이트가 이 페이지를 서비스하는 사이트와 같으면 프레임에서 이 페이지를 사용할 수 있다.X-FRAME-OPTIONS: SAMEORIGIN이 옵션을 지정하면, 지정한 ui를 통해서만 프레임에 사이트를 표시할 수 있습니다.그러나 이것은 현대 브라우저에서는 더 이상 유효하지 않은 유행이 지난 명령이다.HTTP 콘텐츠 보안 정책 응답 헤더는 사이트 관리자가 사용자 에이전트가 지정한 페이지에 불러올 수 있는 자원을 제어할 수 있도록 합니다.이것은 XSS 등 클릭 납치를 제외한 대량의 보안 구멍에 사용됩니다.그러나 Google 안내서는 클릭 납치만 방지하는 데 사용될 것입니다.HTTP CSP(Content Security Policy) 명령은 Iframe을 사용하여 페이지에 포함할 수 있는 유효한 상위 레벨을 지정합니다.Iframe에서 브라우저가 다음 값을 설정하여 페이지를 표시할 수 있는지 여부를 나타내는 데 사용할 수 있습니다.
X-FRAME-OPTIONS: ALLOW-FROM uri"없음"을 지정하면 프레임에 페이지를 불러올 수 없습니다.Content-Security-Policy:frame-ancestors 'none'다른 한편, 만약'self'를 지정한다면, 프레임워크에 이 페이지를 포함하는 사이트가 이 페이지를 서비스하는 사이트와 같다면, 프레임워크에서 이 페이지를 사용할 수 있습니다.Content-Security-Policy:frame-ancestors 'self'이 옵션을 지정하면, 지정한 ui를 통해서만 프레임에 사이트를 표시할 수 있습니다.예를 들어 다음 헤더 명령을 실행하면 사이트에서 지정한 URL을 통해서만 iFrame을 할 수 있습니다.
Reference
이 문제에 관하여(웹 응용 프로그램의 클릭 납치 방지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mak0099/prevent-click-jacking-in-your-web-applications-139g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
