clickjacking攻击和防御详解

一、概述

clickjacking，中文叫点击劫持，是一种在网页中将恶意代码等隐藏在看似无害的内容（如按钮）之下，并诱使用户点击的手段。

比如用户收到一封包含一段视频的电子邮件，但其中的“播放”按钮并不是真正的播放视频，而是链入一购物网站。这样当用户点击“播放”按钮，实际是被诱骗而进入了一个购物网站。

可参考： https://zh.wikipedia.org/wiki/%E7%82%B9%E5%87%BB%E5%8A%AB%E6%8C%81

可简单理解，就是攻击网站（播放按钮的网站）嵌套了正常网站（购物网站）。

二、Demo

1 代码：

// 攻击网站

    
    


    
攻击网站
    


// 正常网站

    
    


    
正常网站

2、效果图：

三、防御

基本就是怎么防止网站被别人嵌套的问题。

1、CSP的frame-ancestors指令

frame-ancestors指令可以限定被嵌套网站的域名，协议等，如果不符合则网站不会被加载。

frame-ancestors指令的值可参考： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

比如在正常网站设置指定域名：

app.use((req, res, next) => {
  res.append('Content-Security-Policy', "frame-ancestors 'self'");
  // 其他代码...
});

效果图：

需要注意的是，CSP的frame-ancestors指令可替代旧的X-Frame-Options HTTP headers。

2、window.self&window.top

通过window.self和window.top来判断，如果不相等，则就是被嵌套了。

window.self，返回一个指向当前 window 对象的引用。
window.top，返回窗口层级最顶层窗口的引用。
window.parent，返回当前窗口的直接父对象。