點擊劫持-clickjacking

場景復現：小李登陸某網站後，沒過多久彈出一段「有趣的」連接，好奇心趨勢下小李打開了連接...，跟着提示點來點去，最後啥都沒看到，啥都沒幹成。鬱悶之餘關閉連接地址後驚奇的發如今已經登陸的網站頁面竟然多了幾行操做記錄，且操做記錄正是屬於本身！心態爆炸...javascript

經過用戶的點擊完成了一系列操做，可是用戶對此並不知曉發生了什麼？ 
複製代碼

危害

冒用用戶操做
獲取用戶敏感信息（郵件）
盜取用戶資金（轉帳、消費）

特性：

用戶本身操做
用戶本身不知情

這種攻擊利用HTML中的<iframe>標籤的透明屬性，就像在一幅畫上鋪了一層透明的紙，畫就是攻擊頁面，透明的紙就是用戶登陸的網站頁面。用戶看到的是攻擊頁面，但其實這個頁面之上是網站的頁面，網站頁面被透明化，攻擊頁面和網站頁面的按鈕位置、點擊方式幾乎都如出一轍。這時用戶看到的是攻擊頁面，用戶覺得本身操做的也是攻擊頁面，可是實際上操做的確實網站頁面；若是這個網站是用戶的郵箱、銀行帳戶，而且你還噼裏啪啦操做了一堆，內心頓時有點涼！html

案例分析

登陸某網站後，彈出了一段「點擊和美女聊天的連接",當用戶點擊了「和美女聊天」的連接後，在已經登陸的博客發表了一篇帖子...java

<!doctype html>
<html> <head> <meta charset="utf-8"/> <title>clickhijack</title> </head> <!--background是本地的一張有趣的圖片 --> <body style="background:url(clickjacking.jpeg) no-repeat;background-size: cover;"> <!-- src是筆者本地啓動的nodejs項目添加評論頁面--> <iframe style="opacity:0.3" src="http://localhost:3000/post/1" width="1260" height="600"></iframe> </body> </html>
複製代碼

頁面顯示的效果是這樣：
node

頁面真實的效果是這樣：
這裏將iframe的透明度改爲了0.5nginx

固然真實的攻擊頁面內容會很豐富很吸引人。筆者這裏只作演示，攻擊思路是同樣的。瀏覽器

攻擊防護

經過案例分析得知，點擊劫持的產生是基於iframe發生的，咱們防護的思路也應該是基於此。安全

JavaScript禁止內嵌

HTML DOM top 屬性

定義和用法

Top屬性返回當前窗口的最頂層瀏覽器窗口。markdown

該屬性返回對一個頂級窗口的只讀引用。若是窗口自己就是一個頂級窗口，top 屬性存放對窗口自身的引用。若是窗口是一個框架，那麼 top 屬性引用包含框架的頂層窗口。框架

實例

下面的例子窗口是否在一個框架中，若是是，則跳出框架；async

<!--下面案例來自W3c -->
<html>
<head>
    <script type="text/javascript"> function breakout() { if (window.top != window.self) { window.top.location = "test.html" } } </script>
</head>
<body>
    <form>
        Click the button to break out of the frame:
        <input type="button" onclick="breakout()" value="Break out!">
    </form>
</body>
</html>
複製代碼

瞭解top屬性的同時，咱們便可把top屬性應用到點擊劫持中。

代碼實現：

正常的頁面top屬性和window屬性對比：

top
>Window {window: Window, self: Window, document: document, name: "", location: Location, …}    
top.location
>Location {ancestorOrigins: DOMStringList, href: "http://localhost:3000/post/1", origin: "http://localhost:3000", protocol: "http:", host: "localhost:3000", …}  
window
>Window {window: Window, self: Window, document: document, name: "", location: Location, …}
top===window
>true
複製代碼

點擊劫持的頁面top屬性和window屬性對比：

top
>global {0: Window, window: global, self: global, location: {…}, closed: false, frames: global, …}
top.location
>{then: undefined, Symbol(Symbol.toStringTag): undefined, Symbol(Symbol.hasInstance): undefined, Symbol(Symbol.isConcatSpreadable): undefined, replace: ƒ}
window
>Window {window: Window, self: Window, document: document, name: "", location: Location, …}
top===window
//false
複製代碼

由以上區別作基礎便可進行判斷，示例代碼以下：

<script type="text/javascript">
if (top.location != windowlocation) 
{
    top.location = window.location
}
</script>
複製代碼

到此彷佛是解決了點擊劫持的問題，可是真的100%解決了嗎？答案確定是沒有。
只要能禁止執行腳本就會再次觸發攻擊！剛好iframe中的sandbox恰好有這做用.

HTML `<iframe>` 標籤的 sandbox 屬性

定義和用法

若是被規定爲空字符串（sandbox=""），sandbox 屬性將會啓用一系列對行內框架中內容的額外限制。

sandbox 屬性的值既能夠是一個空字符串（應用全部的限制），也能夠是空格分隔的預約義值列表（將移除特定的限制）。

語法

<iframe sandbox="value">
複製代碼

屬性值

值	描述
""	應用如下全部的限制。
allow-same-origin	容許 iframe 內容被視爲與包含文檔有相同的來源。
allow-top-navigation	容許 iframe 內容從包含文檔導航（加載）內容。
allow-forms	容許表單提交。
allow-scripts	容許腳本執行。

瞭解sanbox屬性後，咱們便可將設置屬性就能再次觸發攻擊！
示例：

<iframe style="opacity:0.3" src="http://localhost:3000/post/1" width="1260" height="600" sandbox="allow-forms"></iframe>
<!-- 容許表單提交事件，剩下的都會被禁止 -->
複製代碼

這時又能夠開始點擊劫持攻擊了！

X-FRAME_OPTIONS禁止內嵌

The X-Frame-Options HTTP 響應頭是用來給瀏覽器指示容許一個頁面能否在 <frame>, <iframe>, <embed> 或者 <object> 中展示的標記。站點能夠經過確保網站沒有被嵌入到別人的站點裏面，從而避免 clickjacking 攻擊。

語法：

X-Frame-Options 有三個可能的值

X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/
複製代碼

屬性值

值	描述
deny	表示該頁面不容許在frame中展現，及時是相同域名頁面的嵌套
sameorigin	表示該頁面能夠在相同域名頁面的 frame 中展現。
allow-from uri	表示該頁面能夠在指定來源的 frame 中展現。

實例：

Note: 設置 meta 標籤是無效的！例如沒有任何效果。不要這樣用！只有當像下面示例那樣設置 HTTP 頭 X-Frame-Options 纔會生效。

配置 Apache

要將 Apache 的配置 X-Frame-Options 設置成 deny , 按以下配置去設置你的站點：

Header set X-Frame-Options "deny"

要將 Apache 的配置 X-Frame-Options 設置成 allow-from，在配置裏添加：

Header set X-Frame-Options "allow-from example.com/"

配置 nginx

配置 nginx 發送 X-Frame-Options 響應頭，把下面這行添加到 'http', 'server' 或者 'location' 的配置中:

add_header X-Frame-Options sameorigin always;

配置 NODEJS_KOA框架

示例代碼：

//有可能被攻擊的頁面直接禁止被內嵌->DENY
router.all('/*', async function(ctx, next){
	ctx.set('X-Frame-Options','DENY')
	await next();
});
複製代碼

瀏覽器兼容性

X-FRAME_OPTIONS瀏覽器兼容性良好，讀者可放心使用。
詳細兼容性狀況讀者可參考文末X-FRAME_OPTIONS參考資料

其餘輔助手段

添加校驗碼
添加校驗短信

...

參考資料

百度百科——點擊劫持
 W3school-top屬性
 W3school-<iframe>標籤的sandbox屬性
 MDN-X-Frame-Options

結語

點擊劫持對於WEB安全來說，相當重要。尤爲是對iframe嵌套項目來說。本文記錄的是筆者在開發過程當中遇到問題引起的思考和探索。可供有相似問題的讀者參考。其餘安全方面的文章筆者會持續更新,歡迎各位讀者提出意見和建議。

web安全之你的姑娘

點擊劫持-clickjacking

危害

特性：

案例分析

攻擊防護

JavaScript禁止內嵌

HTML DOM top 屬性

定義和用法

實例

代碼實現：

HTML <iframe> 標籤的 sandbox 屬性

定義和用法

語法

屬性值

X-FRAME_OPTIONS禁止內嵌

語法：

屬性值

實例：

配置 Apache

配置 nginx

配置 NODEJS_KOA框架

瀏覽器兼容性

其餘輔助手段

參考資料

結語

HTML `<iframe>` 標籤的 sandbox 屬性