在前端面试中,跨域似乎是一个必问的环节,从跨域的出现到跨域的解决方案,这一系列是前端必须要掌握的内容。本次仅这一个系列中的一小环展开讨论,并且深入其原理了解其用法。
跨域是什么?
首先,跨域是浏览器本身施加的安全限制,并不是人为的给某一个特定的网站设置的。其次,跨域是浏览器上的概念,服务端不存在跨域的说法。本质,浏览器的同源策略决定了一个网站不可以执行非本网站下的脚本。
浏览器的同源策略,即指网站域名,请求协议,服务端口均相同 ,看下面跨域的例子。
http://www.qq.com调用http://www.baidu.com, 属于跨域;
http://www.qq.com调用http://qq.com, 属于跨域;
http://www.qq.com调用http://www.qq.com:81, 属于跨域;
http://www.qq.com调用https://www.qq.com, 属于跨域;
如果www.qq.com的服务器ip是127.0.0.1,
http://www.qq.com调用https://127.0.0.1,属于跨域;
解决跨域的方式
跨域的出现是为了web安全,但是也限制了我们的使用能力,例如你的网站要调用一个第三方平台的api,这个时候不得不面对跨域的问题,这时候就要思考如何解决跨域。
1. 就如上面的这个三方API,首先你可以考虑让后端转发,因为服务端不存在跨域,后端通过转发再将数据返回给你,变成非跨域请求。
2. 后端不能提供接口转发,就要思考如何即让跨域存在又能获取数据,第一种方式,服务端返回头信息修改,要让三方平台服务端接口给你的网站加跨域头,这个是可以的,但是一般情况三方平台接口不可能为你的网站改变的,因为三方平台面对大量的网站。一般会提供另一种方式,三方平台Api在写好后按一种特定类型返回,其他网站接入时,平台本身完全不在改变,只需要调用方决定即可,这时候你应该想到jsonp。
Jsonp(JSON with Padding)
实质是一种跨域数据获取的解决方案,本质是利用html中的script标签的跨域调用能力。
在网站中,我们一般使用<script>这个标签来加载一些脚本,但是这个标签加载的内容是没有同源限制的,例如你在www.qq.com的网站上使用<script src="https://www.google-analytics.com/analytics.js"></script>是可以正常加载的,这时候我们可以通过这个标签的跨域来完成数据的跨域获取。
实现一个Jsonp
1. 服务端(三方平台)API 设计
// api可以接受一个callback参数, 存在callback时,拼接返回结果
http://xxx.com/api?callback=fn
... 提取callback参数fn
... 拼接返回内容
response: fn({
"code": 1,
"data": true
})
2. 客户端请求格式
<script type="text/javascript">
function handle(response) {
console.log('response', response);
}
const oScript = document.createElement('script');
oScript.setAttribute('src','http://xxx.com/api?callback=handle');
oScript.setAttribute('type','text/javascript');
document.body.appendChild(oScript);
</script>
3. 代码解释
首先创建一个script标签,script的src属性即是三方平台的地址,该地址需要带一个必选参数callback,并且它的值是一个已经被定义好的函数,当script加载完成后,由于脚本内容已经约定好,执行起脚本内容时,即执行已定义好的函数,并且将请求内容返回作为函数参数返回,成功解决跨域。
4. 实例
如下这个接口是iqiyi的一个jsonp接口,可以用来调试,查看其返回值。
http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=func
总结
上述将jsonp的原理简单实现完成,从它的本质就可以看出一个明显缺点,因为script标签仅支持get,所以jsonp也仅仅能对get请求跨域,不能支持post。还有另一个缺点,即callback传入的参数是在后端进行了一次拼接,这即代表存在注入的可能,如果后端设计不当,是有可能出现安全风险的。
如果对你有帮助的话,记得点订阅哦,欢迎你的关注