說到與 CSS 相關的攻擊,就不得不提到最經典的 Clickjacking 和 CSS injection 啦 ~
此次的介紹將著重於 Clickjacking ~
根據 Wiki 的定義:
Clickjacking (點擊劫持)
是一種在網頁中將惡意代碼等隱藏在看似無害的內容之下
,並誘使使用者點擊的手段。
Clickjacking
有很多種形式,此次聚焦在 IFrame
的 clickjacking
攻擊方式:
IFrame
篇:
攻擊者將一個元素疊在原本的元素上,然後誘騙使用者點擊疊在原本元素上的元素
,以進行攻擊者想要使用者進行的動作,例如: 導向惡意網站等等。
一般最簡單的攻擊方式,就是將惡意元素透過 css 來調整它的透明度
以及 z-index
,藉此將元素移動到最上方,並且假裝沒有這個元素。
簡單範例 - 惡意元素:
#target_virus_website {
position: relative;
// 此處請設定 width , height 以便可以覆蓋你的目標元素
// 調整透明度
opacity:0.00001;
// 設置 z-index 並把它放在目標元素上
z-index:2;
}
<iframe id="target_virus_website" src="https://virus-website.com">
</iframe>
由上述範例可知,IFrame 式 clickjacking
的主要攻擊方式就是把 IFrame
給嵌入到網站內。
而快刀斬亂麻的方式就是阻止嵌入 IFrame
啦!
那麼,要怎麼防範呢? 可以進行以下設定:
設定 CSP or X-Frame-Options
CSP (Content Security Policy) (Notes: 到 IE11 都不支援)
禁止任何網站內嵌
Content-Security-Policy: frame-ancestors 'none'
限定只能被同個網站內嵌 (Scheme、Host、Port 都要相同)
Content-Security-Policy: frame-ancestors 'self'
只允許特定網站內嵌
Content-Security-Policy: frame-ancestors *uri*
X-Frame-Options
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM uri
若使用的版本太舊(IE6/IE7 之類的),就無法使用上述的 X-Frame-Options。
為了支援上述不能使用的情況,可以採用 Frame-killing 的方式:
<style>
/* 預設隱藏你的 page */
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>
明天要補班,今天剛好又要去運動,只能好好把握時間打文章,原本想完整研究 Clickjacking 並且把所有的 Clickjacking 方式都好好寫出來的,礙於時間有限,只能交給明天的自己啦 XD