跨域与同源
跨域和同源是前端开发领域中很基本的概念，但是很多没做过前端开发工作的程序员不是很了解它们的使用场景，产品经理对它们的了解可能更少。
首先，我们介绍 iframe。iframe 是 HTML 中的一个标签，它可以随意指定一个URL地址，比如www.qq.com/index.html，它的代码如下：
<htm1>
<body>
くiframe id="ifr" src="www.qq.com" >
</body>
</htm1>
iframe 里面的 src 字段为www.qq.com。打开这个网页后，会看到腾讯网的整个页面嵌入了这个index.html网页。iframe的意义非常简单，就是将一个URL地址嵌入当前页面并展示出来。
例如，你给远方的亲人写了一封家书，当把邮票贴在信封右上角的时候，可以把信封想象为页面，把邮票想象为一个iframe标签，它描写了很多内容（有山、有水、有人家）。信封是在超市买的，邮票是在邮局买的，它俩的生产厂家、品牌、材质毫不相干，但组合在一起可以发挥作用。信封属于“超市”这个域，邮票属于“邮局”这个域。
如何实现这样一种一个网站有3个展示页面，3个页面共用同一个评论区的需求呢？这个评论区可以封装为一个URL，并将iframe嵌入每个页面，全局复用一套评论区的代码，既节省人力，又便于维护逻辑，只要一个人就可以实现。
这就是 iframe 大致的用途：嵌入另一个页面，两个页面的功能可以解耦合，不依赖对方而存在。
接下来，我们介绍“跨域”。还是以上述代码段为例，通过 iframe 嵌入的方式，开发者可以设计出一个与腾讯网外观一模一样的网页。同时，开发者动了坏心思，把页面中腾讯网的广告位置变为自己的广告，想靠这些流量来挣钱，于是将代码改造为：
<html>
<script>
1.得到1d为1fr的iframe的文档对象
2.得到ifr里面的www.qq.com的广告标签
3.替换www.qq.com广告标签里的内容为我联系的广告商内容
</script>
<body>
<iframe id="ifr" src="www.qq.com">
</body>
</html>
在这个<script>标签中，开发者写了3句JS代码来描述整个流程（为了省去调试的时间，这里用中文伪码代替），这样做的结果是：这个功能会被浏览器拒绝，提示“Permission Denied”，也就是当前“跨域”操作了，开发者无法篡改腾讯网的页面。
最后，我们介绍同源。跨域被拒绝，其实是浏览器底层被称为“同源策略”的安全机制起了作用，什么是同源呢？只要两个页面的协议、主机名、端口一样，就是同源的，否则就是非同源的。同源要同时满足3个特征，例如http://www.a.com/index.html和 http://www.b.com/index.html 不同源，因为主机名不同，一个为a.com，另一个为b.com。http://www.a.com/index.html 和 https://www.a.com/index.html 不同源，因为协议不同，一个为HTTP，另一个为HTTPS。https://www.a.com:80/index.html 和https://www.a.com:81/index.html不同源，因为端口号不同，一个为80，另一个为81。
同源就是同域，“跨域”也可以说成“跨源”。不同源，就不能修改另一个页面，更不能获取与另一个页面相关的内容。只有同源的页面才可以相互访问。
浏览器提供了原生的同源机制来保证不同域下的网站互相隔离，正是这种机制的存在，保证了Web生态下各个网站不乱套。
这也引出了一个问题：浏览器天生是拒绝非同源的网页沟通的，但是沟通需求无处不在。
例如上面的评论区的例子，如果评论区页面是用 iframe 实现的，当有一个新评论时，主页面要展示评论数+1，这时就产生了沟通的需求。同源策略基本上保证了域之间的隔离，如果要沟通，是要用一些附加的方法来实现的，例如后台的配合、两个网站之间的配合。
合理的跨域沟通的方法有以下几种：
（1）JSONP
（2）iframe document.domain
（3）iframe location.hash
（4）HTML 5 PostMessage
第4种是较新的HTML 5规范，规定了跨域问题的解决办法，并且是异步的，大部分浏览器已经支持。前面几种有点走偏门的感觉，而且有的方法有些局限性，作者重点推荐第4种，读者有兴趣可以深入了解。