前端百题斩之浏览器出让安全性造就Jsonp

安全 应用安全
众所周知,JSONP是一种跨域解决方案,下面来一步步剖析一下为什么JSONP能够解决跨域问题。

[[432964]]

1 JSONP基础

众所周知,JSONP是一种跨域解决方案,下面来一步步剖析一下为什么JSONP能够解决跨域问题。

基本思想

JSONP基本思想是在网页中添加一个< script >元素,向服务器请求数据,服务器收到请求后,将数据放在一个指定名字的回调函数中传回来。这应该是经常看到的一种解释JSONP请求的思路,但是同源策略不是不允许向非同源发送请求的,那怎么又怎么可以通过JSONP解决跨域呢?看起来是一个很矛盾的点。

为什么JSONP能够实现跨域

从同源策略的角度考虑,确实嵌入的< script >发起的请求(非同源)违背了同源策略,但其实这是由于浏览器为了便利性让出了部分安全性,允许js文件、css文件、图片等资源来自于非同源服务器,这也就解释了为什么script请求的资源分明跨域了但是仍有内容返回的原因,也正是由于浏览器出让了部分安全性(允许页面中可以嵌入第三方资源),采用了JSONP的诞生。

2 手撕JSONP

上述聊了什么是JSONP、其基本思想以及为什么JSONP能够实现跨域,下面一起来实现JSONP。

  • 全局挂载一个接收数据的函数;
  • 创建一个script标签,并在其标签的onload和onerror事件上挂载对应处理函数;
  • 将script标签挂载到页面中,向服务端发起请求;
  • 服务端接收传递过来的参数,然后将回调函数和数据以调用的形式输出;
  • 当script元素接收到影响中的脚本代码后,就会自动执行它们。
  1. function createScript(url, charset) { 
  2.     const script = document.createElement('script'); 
  3.     script.setAttribute('type''text/javascript'); 
  4.     charset && script.setAttribute('charset', charset); 
  5.     script.setAttribute('src', url); 
  6.     script.async = true
  7.     return script; 
  8.  
  9. function jsonp(url, onsuccess, onerror, charset) { 
  10.     const hash = Math.random().toString().slice(2); 
  11.     window['jsonp' + hash] = function (data) { 
  12.         if (onsuccess && typeof(onsuccess) === 'function') { 
  13.             onsuccess(data); 
  14.         } 
  15.     } 
  16.  
  17.     const script = createScript(url + '?callback=jsonp' + hash, charset); 
  18.  
  19.     // 监听加载成功的事件,获取数据,这个位置用了两个事件onload和onreadystatechange是为了兼容IE,因为IE9之前不支持onload事件,只支持onreadystatechange事件 
  20.     script.onload = script.onreadystatechange = function() { 
  21.         //若不存在readyState事件则证明不是IE浏览器,可以直接执行,若是的话,必须等到状态变为loaded或complete才可以执行 
  22.         if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { 
  23.             script.onload = script.onreadystatechange = null
  24.             // 移除该script的DOM对象 
  25.             if (script.parentNode) { 
  26.                 script.parentNode.removeChild(script); 
  27.             } 
  28.  
  29.             // 删除函数或变量 
  30.             window['jsonp' + hash] = null
  31.         } 
  32.     }; 
  33.  
  34.     script.onerror = function() { 
  35.         if (onerror && typeof(onerror) === 'function') { 
  36.             onerror(); 
  37.         } 
  38.     } 
  39.  
  40.     // 添加标签,发送请求 
  41.     document.getElementsByTagName('head')[0].appendChild(script); 

本文转载自微信公众号「前端点线面」,可以通过以下二维码关注。转载本文请联系前端点线面公众号。

 

责任编辑:武晓燕 来源: 前端点线面
相关推荐

2021-07-08 07:01:53

浏览器安全前端

2021-07-14 07:00:53

浏览器技巧前端

2021-07-26 05:01:55

浏览器渲染流程

2021-07-19 07:02:10

浏览器进程单进程浏览器

2021-05-09 22:00:59

TypeofInstanceof运算符

2021-10-19 22:23:05

typeof方式Instanceof

2021-07-01 07:05:31

浏览器存储

2011-09-06 10:00:04

2013-04-23 10:27:40

Chrome浏览器

2009-04-24 09:08:24

2019-03-05 10:48:24

Web浏览器前端

2011-05-23 13:32:46

2015-11-12 10:23:11

Edge浏览器Windows 10

2014-01-02 13:15:21

2021-05-12 07:04:55

Js变量方式

2021-06-28 07:12:28

赋值浅拷贝深拷贝

2009-03-11 08:52:33

2021-05-19 07:02:42

JS对象方法

2009-06-04 09:20:45

2018-12-03 14:58:21

Linux网络浏览器安全性
点赞
收藏

51CTO技术栈公众号