什么是跨域,以及为什么浏览器要做“跨域限制”

不明白为什么大家解释“跨域限制”这个事情都这么费劲?!动不动就给出一堆学术名词,神马“同源策略”“限制加载”blabla… 一上来就用高度抽象的词语来解释,初学者可能只会说一句:请说人话。

“跨域”是在browser做的限制,按照 client-server 的模型,就是在client端做了些限制。如果我们先不考虑跨域,那么,假设在页面上对某个按钮的点击,涉及到需要请求第三方(third-party)网站的数据请求,我们有哪些解决方案呢?

  • 最直观的想法是,既然你需要访问third-party的信息,那么,我直接从browser这里(即client端)发送一个异步请求(Ajax)就好了。
  • 稍微绕一点的方法是:我把需要请求的third-party的信息发送给自己的server端,让server端去发送对third-party的请求。server端拿到返回的数据后,再回传给client端。

显然,第一种方法要直观得多,第二种方法感觉就是多此一举。特别是后端的同学,更是会赞同这个意见:你前端需要啥数据,自己去调用访问不就完了,拿给我去访问干嘛?我拿到了还要回传给你,你有这么懒么?!

所谓的“跨域限制”,就是browser这边直接把第一种解决方案给禁止掉了,强制性要求,任何对third-party的数据请求,都必须回传给自己的server端,让你自己的server端去做处理,再把信息回传到client端。

(如何判断是不是third-party的请求?!很简单啊,你的网站本身是有一个域名的,你的域名是绑在自己的server ip上的。任何不是以你自己域名开头的请求,都被认为是third-party的请求。所谓的“同源”,指的就是“和你自己相同的请求源,即相同的域名”。)

如上所说,这个“禁止”,是谁做的?仅指浏览器而已。而如果client端是手机App呢?又或者是桌面App呢?那当然,它是不受这种方式的限制的,因为这样的native App不受浏览器的控制,所以可以直接在client端发出third-party的请求。后端的同学,当然也会兴高采烈地告诉App端的同学,请自己发送请求,切莫来找我。

那为什么浏览器要做这种奇葩限制呢?答案当然就是为了整个web生态的安全啊!一个最直观的作恶方式便是,如果你在browser这边的js代码可以任意访问third-party的数据,那么你可以让你的js代码定时轮询对这个third-party的访问,比如每秒访问一次。那么,任何正在浏览你的网页的用户,都会以每秒一个请求的频率对这个third-party的网站做访问。假设有十万人在浏览你的网页,那么这个third-party的网站就不得不承受每秒10万次的无效访问。这谁受得了。。。当然,这里说的是你去作恶他人。但如果放开了同源策略,就是人人平等的,别人也可以用同样的方式来作恶你的网站。如此这般,整个web生态将充斥着这样海量的无效请求,以至于大家都没办法正常地访问web页面了,因为带宽都被无效请求吃掉了。

所以,即便是单单考虑这一种作恶方式,第一种直观而便捷的对第三方信息的请求方式,都应该被禁止掉。当然,你可能会说,如此,手机/桌面的App端是不是也可以如此作恶呢?!Hmmm,你可能忘记了App需要审核这件事情了。

猜你喜欢

转载自blog.csdn.net/kid551/article/details/104248503