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

概述

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

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

可简略的了解，clickjacking就是攻打网站嵌套了失常网站。

Demo

代码如下所示：

// 攻打网站<head>    <meta charset="utf-8">    <title>clickjacking</title></head><body>    <p>攻打网站</p>    <iframe src="http://localhost:3001/clickjacking.html"></iframe></body>// 失常网站<head>    <meta charset="utf-8">    <title>clickjacking</title></head><body>    <p>失常网站</p></body>

成果如下截图所示：

进攻

根本就是怎么避免网站被他人嵌套。

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，返回以后窗口的间接父对象。

最初

  • 文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢。
  • 有疑难和问题，请留言。
  • 如果感觉文章还能够，请点赞或珍藏，谢谢。