JSONP(JSON with Padding)
是一种非官方跨域数据交互协议。它允许web页面从不同的域名下加载数据。
由于同源策略,web页面通过XMLHttpRequest调用通常只允许访问与其自身相同域名的资源。
JSONP是一种在早期浏览器中绕过这一限制的方法。
标签天生就拥有跨域请求的能力,这是由浏览器的同源策略所允许的。
这种特性被用于加载来自不同源(域名、协议或端口)的 JavaScript 文件,例如,从 CDN(内容分发网络)加载库或框架。
JSONP(JSON with Padding)正是基于这个能力来实现跨域请求的。通过动态创建一个
客户端通过标签发起一个GET请求。请求的URL包含一个查询参数,通常是callback,它的值是一个将被服务器端调用的函数名。
服务器端收到请求后,会将数据封装在一个函数调用中。这个函数就是请求URL中指定的callback
参数的值。
响应返回给客户端后,由于是标签的请求,所以返回的JavaScript代码会立即执行。
此时,客户端已经定义了一个与callback参数值相同名字的函数,因此,这个函数会被调用,并传入解析后的JSON数据作为参数。
客户端的回调函数执行,处理传入的数据。
192.168.112.200 html页面
192.168.112.202 php脚本
访问200上的html页面, 由html跨域访问202上的php脚本.
(1)在200服务器上准备一个jsonp.html
页面:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
// 这里定义你的回调函数
function jsonpCallback(data) {
// 处理JSON数据的代码
console.log(data);}
script>
<script type="text/javascript" src="http://192.168.112.202/security/jsonp.php?callback=jsonpCallback">script>
head><body>body>html>
这个页面定义了一个回调函数jsonpCallback()
, 它用于处理响应的json.
然后通过一个标签向202服务器发送GET请求, 通过
callback
参数传入函数名.
(2) 在202服务器上准备一个jsonp.php
脚本.
$person = array(
"name" => "John Doe",
"age" => "30",
"occupation" => "Developer"
);
$jsonString = json_encode($person);
echo $_GET['callback'] . "(" . $jsonString . ")";
?>
服务器这段代码生成一个叫做jsonString
的json字符串, 返回的数据通过拼接而成, 前面是GET传递过来的参数值$_GET['callback']
, 后面是被括号括起来的json数据"(" . $jsonString . ")"
.
(3) 访问200服务器上的jsonp.html
页面:
http://192.168.112.200/jsonp/jsonp.html
上面的url向200服务器发送GET请求访问页面, 传入参数callback=jsonpCallback
.
接下来200服务器上的jsonp.php
执行, 生成json字符串, $_GET['callback']
的值由前端传过来是jsonpCallback
, 那么最后拼接出来就是:
jsonpCallback({"name": "John Doe", "age": "30", "occupation": "Developer"});
可以看到服务器就是返回了一段js代码, 因为前端是使用标签请求的js, 所以响应返回后, 前端会立刻执行返回的js代码, 而这段代码是调用前端定义的
jsonpCallback()
函数, 并传入服务器生成的json字符串做进一步处理.
现在使用 JSONP 进行跨域请求的情况已经不太常见了。主要原因是它的安全问题和功能限制,尤其是以下几点:
JSONP 非常容易受到跨站脚本攻击(XSS)的影响。因为它通过 标签接收执行代码,如果攻击者可以控制 JSONP 响应,他们可以在用户的浏览器中执行恶意代码。
JSONP 只能进行 GET
请求,不能使用 POST、PUT、DELETE 等 HTTP 方法,这在现代应用程序中是一个严重的限制。
在 JSONP 中,如果请求失败,很难准确地捕捉到错误并进行处理,因为 标签没有提供标准的错误监听机制。
JSONP 需要服务器特别支持返回 JSONP 响应,这需要服务器端进行额外的编码工作。
相比之下,CORS(跨源资源共享)
是一个 W3C 标准,现代浏览器都支持这个标准。
CORS 允许浏览器向另一个域名的服务器发送XMLHttpRequest
或 Fetch API
请求,只要服务器返回正确的 CORS 响应头,就能够实现安全的跨域请求。
因为 CORS 提供了更细粒度的控制,更好的安全性和更全面的HTTP方法支持,所以它已经成为了处理跨域请求的首选方式。
在新的Web应用中,建议使用 CORS 而不是 JSONP。