通过一篇文章由浅入深的理解JSONP并拓展

JSONP（JSON with Padding）是一种常见的跨域数据请求方式，其原理是利用script标签可以跨站加载资源的特点，实现从其他域名下获取数据。下面就是一篇由浅入深的理解JSONP的攻略。

为什么需要JSONP？

在前后端分离的架构下，前端应用需要从后端获取数据，一般情况下都是通过AJAX请求进行获取。但是由于同源策略的限制，AJAX只能请求同源下的数据，跨域请求会被浏览器拒绝。这时候就需要用到跨域数据请求的解决方法，其中JSONP是一种经典的解决方式。

JSONP原理

JSONP的实现原理是利用script标签可以跨站加载资源的特点。我们可以定义一个script标签，将src属性设置为请求数据的URL，并给其添加一个回调函数的函数名，如下所示：

<script src="http://example.com/data.php?callback=callbackFunction"></script>

服务端收到请求后，会将数据包裹在callbackFunction函数中返回。因为script标签的src属性值会被当做javascript代码执行，所以接收到数据后，会立即执行callbackFunction函数，达到获取数据的目的。

回调函数的执行需要前端先定义好，定义方式如下：

function callbackFunction(data) {
  // 在回调函数中处理data数据
}

客户端可以在全局作用域中定义该回调函数。服务端收到请求后，在返回的数据中会调用该回调函数，传递数据作为参数传入函数中，并在客户端执行该回调函数。

JSONP的安全性问题

需要注意的是，由于JSONP的请求是一个script标签，所以服务端要返回的数据是一段可执行的javascript代码。如果返回的数据被恶意代码篡改，会导致客户端的安全问题。

例如，一个非常常见的攻击方式是，在返回的数据中添加一个hack脚本，通过该脚本获取到用户的cookies，并发送到服务器中，实现cookie劫持攻击。因此在使用JSONP时，要保证返回的数据安全可靠。

JSONP的示例

下面是一个JSONP的示例。假设我们需要从其他域名下获取一个JSON数据，其URL如下所示：

http://example.com/data.php?callback=callbackFunction

我们可以在客户端定义callbackFunction函数，将该函数名作为参数传递给服务端，如下所示：

function callbackFunction(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'http://example.com/data.php?callback=callbackFunction';
document.body.appendChild(script);

服务端在收到请求后，会处理data数据，并将其包裹在callbackFunction函数中返回，如下所示：

callbackFunction({ "name": "hello", "age": 18 });

客户端接收到该数据后，会自动执行callbackFunction函数，并传递一个对象参数，输出结果如下所示：

{ "name": "hello", "age": 18 }

这里，我们可以根据返回的数据进行业务逻辑的处理。

JSONP的优缺点

JSONP虽然可以解决跨域数据请求的问题，但是也有其自身的优缺点。

优点

JSONP的优点主要有以下几点：

• 能够跨域请求数据，解决AJAX的同源策略限制。
• 相对简单，易于实现。

缺点

JSONP的缺点主要有以下几点：

• 安全性不足。JSONP的实现原理是利用script标签可以跨站加载资源的特点实现跨域数据请求，但是script标签的执行可以被恶意代码利用，从而可以进行cookie和敏感信息的获取，存在安全风险。
• 只支持GET请求。由于script标签只能发送GET请求，因此JSONP也只能发送GET请求，无法发送POST等其他类型的请求。
• 无法处理错误。JSONP的回调函数是在script标签加载完毕后自动执行，无法处理HTTP的错误码等数据请求的错误情况。

综上，JSONP虽然有其缺点，但是在特定的业务场景下，仍然可以使用JSONP实现跨域数据请求，同时也可以了解到JSONP的优点和缺点，从而在实际开发中进行选择。