共计 953 个字符，预计需要花费 3 分钟才能阅读完成。
文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢。
概述
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，返回以后窗口的间接父对象。
最初
- 文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢。
- 有疑难和问题，请留言。
- 如果感觉文章还能够，请点赞或珍藏，谢谢。
正文完
