首页 > 编程笔记 > Web笔记

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

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

首先,我们介绍 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,这时就产生了沟通的需求。

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

合理的跨域沟通的方法有以下几种:
第 4 种是较新的 HTML 5 规范,规定了跨域问题的解决办法,并且是异步的,大部分浏览器已经支持。前面几种有点走偏门的感觉,而且有的方法有些局限性,这里重点推荐第 4 种,大家有兴趣可以深入了解。

所有教程

优秀文章