浏览器同源策略+跨窗口通信（附项目iframe嵌入空白问题）

前言

设想这样一个场景：

学校开放了一个窗口给家长，让家长可以通过窗口询问孩子的成绩。班级里面的每个学生都是互不相关、互不影响的个体，每个学生和家长们都来自同一个家庭。当同一个家庭里面的家长询问孩子的成绩，窗口就会给出相应学生的成绩数据。

如果不同家庭的家长来询问其他学生的成绩，窗口都给出应答，这样孩子成绩的安全性就没法得到保证。这样不就乱套了吗？

这个例子中，可以找到对应的映射：

例子的窗口 —— 浏览器的窗口
家长和学生 —— 一个个独立的网站
来自同个家庭的成员（家长、学生）就是同源 的

想要解决类似的安全性问题，浏览器推出了同源政策的规则

一、“同源（Same Origin）”策略

限制了窗口（window）和 frame 之间的相互访问，目的是保护用户免遭信息盗窃。

规定：

• 如果我们有对另外一个窗口的引用，并且该窗口是同源的，那么我们就具有对该窗口的全部访问权限。
• 否则，如果该窗口不是同源的，那么我们就无法访问该窗口中的内容：变量，文档，任何东西。唯一的例外是 location：我们可以修改它（进而重定向用户）

二、 同源

如果两个 URL 具有相同的协议，域和端口，则称它们是“同源”的。

示例1
协议不一致（http vs https），不同源：

http://www.example.com/page1.html
https://www.example.com/page2.html

示例2:
域名不同（一个是www.example.com，另一个是subdomain.example.com），不同源：

http://www.example.com/page1.html
http://subdomain.example.com/page2.html

示例3:
具有相同的协议和域名，但是端口不同，不同源：

http://www.example.com:8080/page1.html
http://www.example.com:80/page2.html

三、跨域通信

3.1 document.domain（不推荐）

条件：窗口的二级域相同
例如 erya.youkuaiyun.com，peter.youkuaiyun.com （它们共同的二级域是youkuaiyun.com）

使用：在每个这样的窗口<script>加上以下代码：

document.domain = 'site.com';

这个操作可以使浏览器忽略他们域名的不同，使得它们可以被作为“同源”的来对待