首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >面试经典之Jsonp跨域原理

面试经典之Jsonp跨域原理

作者头像
用户1462769
发布2019-08-08 18:01:14
1.5K0
发布2019-08-08 18:01:14
举报
文章被收录于专栏:全栈者全栈者

在前端面试中,跨域似乎是一个必问的环节,从跨域的出现到跨域的解决方案,这一系列是前端必须要掌握的内容。本次仅这一个系列中的一小环展开讨论,并且深入其原理了解其用法。

跨域是什么?

首先,跨域是浏览器本身施加的安全限制,并不是人为的给某一个特定的网站设置的。其次,跨域是浏览器上的概念,服务端不存在跨域的说法。本质,浏览器的同源策略决定了一个网站不可以执行非本网站下的脚本。

浏览器的同源策略,即指网站域名,请求协议,服务端口均相同 ,看下面跨域的例子。

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传入的参数是在后端进行了一次拼接,这即代表存在注入的可能,如果后端设计不当,是有可能出现安全风险的。

如果对你有帮助的话,记得点订阅哦,欢迎你的关注

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-06-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈者 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档