一、基础知识
1.window.self
①self 和window.self都可以
②window Context下解析成window.self;worker Context下解析成WorkerGlobalScope.self
③访问window的四种方式
var w1 = window;
var w2 = self;
var w3 = window.window;
var w4 = window.self;
// w1, w2, w3, w4 all strictly equal, but only w2 will function in workers
2.window.top
Returns a reference to the topmost window in the window hierarchy.
var topWindow = window.top;
3.location对象
// Create anchor element and use href property for the purpose of this example// A more correct alternative is to browse to the URL and use document.location or window.locationvar url = document.createElement('a');
url.href = '[https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'](https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container');;
console.log(url.href); // [https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container](https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container)
console.log(url.protocol); // https:
console.log(url.host); // [developer.mozilla.org:8080](http://developer.mozilla.org:8080/)
console.log(url.hostname); // [developer.mozilla.org](http://developer.mozilla.org/)
console.log(url.port); // 8080
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // [https://developer.mozilla.org](https://developer.mozilla.org/)
二、分析猜想
不同hirearchy下，top.location&self.location分析及防嵌套猜想
1.localhost想嵌套www.baidu.com
localhost的index.html,写下这样一行代码
<iframe src="www.baidu.com"></iframe>
2.www.baidu.com被嵌套判断
www.baidu.com/80/index.html 中的script中会有一段
if(self.location != top.location){
top.location = self.location;
}
猜想:
此时self.location当然指的是https://www.baidu.com，但是此时的top.location是localhost，判断为真，那么www.baidu.com会强制将top.location也就是localhost（想嵌套别人网站的主动者），改为https://www.baidu.com，从而导致套路被反套路。
也就是，此时我的网站内容已不再，而是被嵌套进来的网站所替代。
由于www.baidu.com的index.html文件我们无从修改，至少目前是这样，因为我们不是www.baidu.com的管理者，也不是一个愿意冒着触碰法律危险去触碰信息安全的黑客。
所以我们需要一个属于自己的网站去验证我们的猜想。
三、实验验证
1.一个可以被访问的域名
https://frankkai.github.io，index.html中添加防嵌套代码
<script>
if(self.location != top.location){
top.location = self.location;
}
</script>
2.本地localhost
开放一个端口，尝试嵌套frankkai.github.io
<iframe src="[https://frankkai.github.io"]</iframe>
3.实验结果及分析
经验证，网站防嵌套成功。√
期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：
- SegmentFault技术圈:ES新规范语法糖
- SegmentFault专栏：趁你还年轻，做个优秀的前端工程师
- 知乎专栏：趁你还年轻，做个优秀的前端工程师
- Github博客: 趁你还年轻233的个人博客
- 前端开发QQ群：660634678
微信公众号： 人兽鬼 / excellent_developers
努力成为优秀前端工程师！
