内容简介：全称 JSON with Padding，用于解决AJAX跨域问题的一种方案。由于同源策略的限制，浏览器只允许XmlHttpRequest请求当前源（域名、协议、端口）的资源，而对请求script资源没有限制。通过请求script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，这种跨域的数据的方式被称为JSONP。
JSONP
全称 JSON with Padding，用于解决AJAX跨域问题的一种方案。
由于同源策略的限制，浏览器只允许XmlHttpRequest请求当前源（域名、协议、端口）的资源，而对请求script资源没有限制。通过请求script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，这种跨域的数据的方式被称为JSONP。
<script>
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
if (request.readyState === 4){
if(request.status === 200){
alert('success!');
}
}
}
request.open('GET','http://xxx.xxx.xx/json.txt');
request.send();
</script>
服务端json.php
<?php
header('Content-type: application/json');
$jsoncallback = htmlspecialchars($_REQUEST['jsoncallback']);
$json_data = array(
"username" => "test",
"password" => "123456",
"userimage" => "http://xxx.com/smi1e.jpg"
);
echo $jsoncallback.'('.json_encode($json_data).')';
index.html
<!DOCTYPE html>
<html>
<head>
<title>test_jsonp</title>
</head>
<script type="text/javascript">
function refresh(data){
var p = document.getElementById('test-jsonp');
p.innerHTML = '测试:'+'</br>'+
data.username+'</br>'+
data.pssword+'</br>'+
data.userimage+'</br>';
}
function gettxt(){
var
js = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
js.src='http://xxx.xxx.xxx/json.php?jsoncallback=refresh';
head.appendChild(js);
}
</script>
<body>
<p>hello,friend</p>
<p id='test-jsonp'>测试:</p>
<p><button type="button" onclick="gettxt()">刷新</button></p>
</body>
</html>
jsonp跨域漏洞
JSONP劫持
callback无过滤导致的xss
bypass可以参考： JSONP 安全攻防技术
防御
1、严格安全的实现 CSRF 方式调用 JSON 文件：限制 Referer 、部署一次性 Token 等。
2、严格安装 JSON 格式标准输出 Content-Type 及编码（ Content-Type : application/json; charset=utf-8 ）。
3、严格过滤 callback 函数名及 JSON 里数据的输出。
4、严格限制对 JSONP 输出 callback 函数名的长度。
Referer
https://juejin.im/entry/59a5a194f265da24734447f2
https://segmentfault.com/a/1190000007935557
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
一个APP的诞生
Carol 炒炒、刘焯琛 / 电子工业出版社 / 2016-7-1 / 79
在移动互联网高度发达的今天，一个个APP，成为我们通向网络世界的窗口。它的诞生流程，令不少对互联网世界产生幻想甚至试图投身其中的年轻人充满了好奇。 《一个APP 的诞生》就是这样一步一步拆分一个APP 的诞生过程。从前期市场调研，竞品分析开始，一直到设计规范，界面图标，设计基础，流程管理，开发实现，市场推广，服务设计，甚至跨界融合，都有陈述。 《一个APP 的诞生》被定义是一本教科书，......一起来看看 《一个APP的诞生》 这本书的介绍吧!
