clickjacking的示例讲解

文章不易，请关注公众号 毛毛虫的小小蜡笔，多多支持，谢谢。

概述

clickjacking，中文叫点击劫持。
是一种在网页中将恶意代码等隐藏在看起来安全的内容之下，并诱使用户点击的手段。

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

可简单的理解，clickjacking就是攻击网站嵌套了正常网站。

Demo

代码如下所示：

// 攻击网站

    
    


    
攻击网站
    


// 正常网站

    
    


    
正常网站

效果如下截图所示：

防御

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

CSP的frame-ancestors指令

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

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

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

效果如下截图所示：

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

window.self和window.top的判断

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

window.self，返回一个指向当前 window 对象的引用。

window.top，返回窗口层级最顶层窗口的引用。

window.parent，返回当前窗口的直接父对象。

最后

• 文章不易，请关注公众号 毛毛虫的小小蜡笔，多多支持，谢谢。
• 有疑问和问题，请留言。
• 如果觉得文章还可以，请点赞或收藏，谢谢。