iframe跨域的一些知识点

页面嵌套iframe是比较常见的，实现跨域的前提条件是父页面与子页面都是自己可以控制的。
iframe跨域的主要方法有以下几点：

  • 设置一致的document.domain
  • 设置window.name
  • 设置location.hash
  • 设置window.navigator
  • 设置postMessage

document.domain

document.domain是最常见iframe处理跨域的方式，可以实现同一个主域下不同子域之间的跨域请求。
比如 foo.com 和 img.foo.com 之间，img1.foo.com 和 img2.foo.com 之间，处理方式是把这两个页面的document.domain都指向主域，比如document.domain='foo.com'。
设置完父页面和子页面就可以像同一个域下两个页面之间访问了。
父页面通过ifr.contentWindow就可以访问子页面的window，子页面通过parent.window或parent访问父页面的window，接下来可以进一步获取dom和js。

1
2
3
4
5
6
7
8
9
10
11
<!-- foo.com/a.html -->
<iframe id="ifr" src="http://img.foo.com/b.html"></iframe>
<script>
document.domain = 'foo.com';
function aa(str) {
    console.log(str);
}
window.onload = function () {
    document.querySelector('#ifr').contentWindow.bb('aaa');
}
</script>
1
2
3
4
5
6
7
8
<!-- img.foo.com/b.html -->
<script>
document.domain = 'foo.com';
function bb(str) {
    console.log(str);
}
parent.aa('bbb');
</script>

【未完，待续】