程序员别唬我系列之:跨域与同源

4 评论 8426 浏览 33 收藏 10 分钟

关于跨域与同源,你造吗?

产品妹子脸憋的通红,一个劲儿的摇着头,委屈的小声说:“唉呀,前端开发说目前情况是产生了「跨域」问题,浏览器有「同源策略」保证安全性,突破不了,改动成本非常高,可是不改也不行啊,用户在线上反馈几天了,老大可生气了,我可怎么办啊,老大会不会以后不喜欢我了,呜呜呜”。

此时,正是我装逼的好时光,于是我一个箭(贱)步,跳到她面前,“哭毛啊,哥在这儿呢,好好说话~”。

「同源策略」「跨域」在前端开发(通常前端都是跟浏览器打交道哦,因为更靠近用户,更多的将后台数据展示给用户,所以叫前端)中,是很基本的常识,很多没做过前端开发的程序员其实也不是很了解这种策略和场景(注意,没有鄙视的意思,请不要乱扣帽子),更不用说很多产品同学,为了不再被忽悠,请听我九浅一深的解读。

先说iframe

首先说说iframe,iframe是html中的一个标签,它可以指定一个随意的Url地址,比如我写了个网页是www.a.com/index.html,内容如下:

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

你给远方的情郎写了一封情书,当把邮票贴在信封右上角的时候,信封为页面,邮票可以想象为一个iframe标签,它里面也描写很多内容(有山,有水,有人家)。

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

有这样一种需求,一个网站有3个展示页面,每个页面都有一个评论区,那这个评论区可以封装为一个url,并用iframe嵌入到每个不同的页面当中去,全局复用一套评论区的代码,节省程序员,逻辑又好维护,只要一个人实现就可以了哦。

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

再说跨域

还是上面贴出来那一段简单代码,我已经写好了一个网页,跟腾讯网一模一样哦。

我动了坏心思,假设我有渠道能搞来流量,为啥我不在当前页面当中替换掉腾讯网的广告位置,而变成我的广告呢,靠这些流量不就把钱挣了嘛,而且用户也没什么感知,商业体验两不误,有没有任何的服务器和流量的花销。

于是我又开始改造代码了,争取能完成这个功能,分分钟走向人生巅峰呢~

这里在<script>标签中,我写了三句JS代码来描述整个流程(为了省去调试的时间,我用中文伪码代替),如果我真写了代码,这个功能也会被浏览器拒绝的,会提示「Permission Denied」之类的操作,也就是你无法篡改腾讯网的页面。

紧扣下小标题,当前「跨域」操作了。这种情况下浏览器直接拒绝掉了这种要求,否则baidu都能操作google页面了,那互联网世界就乱套了。

再再说同源策略

跨域被拒绝,其实是浏览器最底层的安全机制称为「同源策略」,啥是同源呢,建议先复习下以前关于URL的文章把URL五马分尸,只要协议,host,端口三个一样,就是同源的,否则就是非同源的。同源类比为宗教会比较容易理解,伊斯兰教信奉穆罕穆德,基督教信奉耶稣,这里是一个特征,同源要同时满足三个特征,举例如下:

http://www.a.com/index.html

http://www.b.com/index.html

不同源,因为host不同,一个为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生态下各个网站不乱套。

总结:

从前有一个大户人家,大老爷牛逼,一辈子挣了不少钱,娶了五房姨太太,老大到老五各有各的心思,都惦记着大老爷那点钱儿,请问这种情况下,虽然大家住在一个大院里面,名义上是一家人,但是各家财务都是自负盈亏、独立结算,谁也不能把手伸到别人家去。

大老爷心知肚明光靠说是不管用的,必须要立家法,如果哪房姨太太手伸到别人家去了或者红杏出墙了,那就没收一切财产,并扫地出门,这是大老爷最后的底线。

大老爷就是浏览器,制定了一套规则(同源策略),五个姨太太(网页或网站)谁也不能偷到别人的财产,也不能去别人家捣乱,五个姨太太生活的平平稳稳,谁也不打扰谁。

但日子长了,五位太太还是闲不住的,东家长西家短的开始有了攀比之心和坏心思,她们注定是要交流的

  • 我平时都用大宝,你的化妆品是啥牌子的?
  • 你的LV是A货吧,我只背GUCCL的
  • 快来看看我这50克拉的钻石

但是老爷又有规矩,不让她们交流,这咋办呢?

这也引出了最后一个问题,浏览器天生是拒绝非同源的网页沟通的,但是沟通需求无处不在。

比如上面举了个评论区的例子,如果评论区是iframe,当有一个新评论的时候,主页面要展示评论数+1,这个时候就产生了沟通的需求。一面是拒绝的,一面又要突破限制,似乎是矛盾的,你要玩儿欲擒故纵嘛,亲~~~

其实不冲突的,同源策略最基本的保证了域之间的隔离,如果要产生沟通,是要用一些附加的方法来实现的,比如后台的配合,两个网站之间的配合。就像有些国家本来是法律上拒绝同性恋的,但是如果双方愿意,也不反对。

合理的用于跨域沟通的方法有以下几种:

  1. JSONP
  2. iframe document.domain
  3. iframe location.hash
  4. HTML5 PostMessage

重点说下第4种,这是新的Html5规范,规定了跨域问题的解决办法,并且是异步的,大部分浏览器已经支持了,前面几种有一点hack的感觉,而且有的方法有些局限性,重点推荐第4种。如果你不知道这几种都是什么方案,用度娘查下,好多博客已经讲的比较清楚了,不墨迹了,有兴趣可以深入了解下。

如果从事产品工作,能知道跨域和同源的基本概念,并且知道为什么产生了这个问题,当前是什么状态,大概的解决方案是什么,你就已经很优秀了,你是最棒的~

#专栏作家#

给产品经理讲技术,微信公众号(pm_teacher),人人都是产品经理专栏作家。资深程序猿,专注客户端开发若干年,对前端、后台技术略懂,热衷于对新的科技领域的探索。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自PEXELS,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 爱你~

    来自北京 回复
  2. 比喻是亮点~ 😉

    来自湖北 回复
  3. 写得不错的

    回复
  4. 没看懂

    回复