CSS 相關的攻擊 (上篇)

15th鐵人賽

kika

2023-09-22 20:05:15

275 瀏覽

分享至

CSS 相關的攻擊 (上篇)

說到與 CSS 相關的攻擊，就不得不提到最經典的 Clickjacking 和 CSS injection 啦 ~
此次的介紹將著重於 Clickjacking ~

Clickjacking 介紹

根據 Wiki 的定義:

Clickjacking (點擊劫持) 是一種在網頁中將惡意代碼等隱藏在看似無害的內容之下，並誘使使用者點擊的手段。

Clickjacking 有很多種形式，此次聚焦在 IFrame 的 clickjacking 攻擊方式:

常見的攻擊方式

IFrame 篇:
攻擊者將一個元素疊在原本的元素上，然後誘騙使用者點擊疊在原本元素上的元素，以進行攻擊者想要使用者進行的動作，例如: 導向惡意網站等等。

攻擊範例

一般最簡單的攻擊方式，就是將惡意元素透過 css 來調整它的透明度以及 z-index，藉此將元素移動到最上方，並且假裝沒有這個元素。

簡單範例 - 惡意元素:

css:

#target_virus_website {
    position: relative;
    // 此處請設定 width , height 以便可以覆蓋你的目標元素
    // 調整透明度
    opacity:0.00001;
    // 設置 z-index 並把它放在目標元素上
    z-index:2;
}

html - 透過設置 iframe 並覆蓋原有的元素，以達到誘騙使用者點擊並導向惡意網站的意圖:
```
<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
```
- 限定只能被同個網站內嵌 (Scheme、Host、Port 都要相同)
```
X-Frame-Options: SAMEORIGIN
```
- 只允許特定網站內嵌 (只有 IE8+ 跟 Firefox for Android 支援，只限單一 Uri)
```
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>