浏览器跨域请求与同源策略

跨域和同源是前端开发领域中很基本的概念，但是很多没做过前端开发工作的程序员不是很了解它们的使用场景，产品经理对它们的了解可能更少。

首先，我们介绍 iframe。iframe 是 HTML 中的一个标签，它可以随意指定一个 URL 地址，比如 www.qq.com/index.html，它的代码如下：

<body>
    <iframe id="ifr" src="www.qq.com"></iframe>
</body>

iframe 里面的 src 字段为 www.qq.com。打开这个网页后，会看到腾讯网的整个页面嵌入了这个 index.html 网页。iframe 的意义非常简单，就是将一个 URL 地址嵌入当前页面并展示出来。

例如，你给远方的亲人写了一封家书，当把邮票贴在信封右上角的时候，可以把信封想象为页面，把邮票想象为一个 iframe 标签，它描写了很多内容（有山、有水、有人家）。

信封是在超市买的，邮票是在邮局买的，它俩的生产厂家、品牌、材质毫不相干，但组合在一起可以发挥作用。信封属于“超市”这个域，邮票属于“邮局”这个域。

如何实现这样一种一个网站有 3 个展示页面，3 个页面共用同一个评论区的需求呢？这个评论区可以封装为一个 URL，并将 iframe 嵌入每个页面，全局复用一套评论区的代码，既节省人力，又便于维护逻辑，只要一个人就可以实现。

这就是 iframe 大致的用途：嵌入另一个页面，两个页面的功能可以解耦合，不依赖对方而存在。

接下来，我们介绍“跨域”。还是以上述代码段为例，通过 iframe 嵌入的方式，开发者可以设计出一个与腾讯网外观一模一样的网页。同时，开发者动了坏心思，把页面中腾讯网的广告位置变为自己的广告，想靠这些流量来挣钱，于是将代码改造为:

<html lang="en">
    <script>
        1.得到id为ifr的iframe的文档对象
        2.得到ifr里面的www.qq.com的广告标签
        3.替换www.qq.com广告标签里的内容为我联系的广告商内容
    </script>
    <body>
        <iframe id="ifr" src="www.qq.com"></iframe>
    </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，这时就产生了沟通的需求。

同源策略基本上保证了域之间的隔离，如果要沟通，是要用一些附加的方法来实现的，例如后台的配合、两个网站之间的配合。

合理的跨域沟通的方法有以下几种：