跨域解决方案及实现

摘要:

身为一个前端,每当别人提起跨域,我的心里还真是虚,当面试官问我了解跨域吗,“了解”,解决方案呢,“jsonp或者iframe再或者代理”,好吧这个问题基本凉透了。日常的工作中,我们很少有机会去涉及配置跨域问题或者说基本没有,工作三年时间,干过产品也干过项目,整体架构都是大佬们配置好的,于是我就开始卡卡累业务流程了,很多问题其实平时都听过,也知道个大概,但是具体知识点其实很模糊,今天就记录一下什么是跨域,跨域的由来,以及什么是同源策略,为什么有这个东西存在,具体的解决方案是什么。

什么是跨域:

跨域字面意思不是同一个域,一个域去请求(获取)另外一个域下的资源,就是跨域。

跨域的由来:

听到跨域,我们总能跟一个词叫同源策略联系到一起,因为同源策略才会出现的跨域的情况,那么什么是同源策略。

同源策略:

同元策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制(官方答案,详见:https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy)。啥意思嘞,就是不是一个域的不让互相请求,首先这是浏览器的一种机制,其次其实是可以请求的,但是返回结果被浏览器拦截了。浏览器从哪些方面做的这个同源策略呢。

(1)针对接口请求(2)针对dom查询,如果没有同源策略会怎么样呢。

没有同源策略限制的接口请求:

首先了解下http是无状态协议,每次请求服务器的时候需要标识,不然服务器不认啊,这就是cookie了,这个cookie当然是服务器颁发并在响应头Set-Cookie字段返回给浏览器的,再次发送的时候回带着这个cookie,服务器见到这个cookie就如同见到你这个人,知道两次都是你干的。如果这时候再放问另一个站点呢,浏览器会带着cookie一起访问,这时候你不注册,站点也有你的身份了,这个站点如果用着你的cookie干点别的事儿呢,这就很尴尬了。这种情况也叫CSFR攻击方式

没有同源策略限制的dom查询:

1 <iframe name='site_a' src='www.a.com'></iframe>
2 <script>
3     var iframe = window.frames['site_a'];
4     var input = iframe.document.getElementById('input');
5     console.log(`input内容:${input}`);
6 </script>

这个时候我们可以拿到site_a的想要的页面信息。

同源策略具体方案:

1.

未完待续。。。

猜你喜欢

转载自www.cnblogs.com/moran1992/p/10472051.html