JSONP:
我们开发时可能会有一些接口,前端向后端发送 XMLHTTPRequest ,后端返回 JSON 数据或其他以供前端展示 :
但是由于 浏览器的同源策略 ,在浏览器层面禁止跨域访问读取数据。
比如你是 A 域网站的用户, 张三前端想向 B 域读取你的信息时,则无法通过浏览器的 同源策略。 但是如果向其他域请求一段 js 代码或者请求加载远程图片,则可以访问。
如果 A 这样访问,是不行的。
function get_config(){
var a = $.getJSON("http://B/get1");
alert(a);
}
可以看到被浏览器 ban 了,请求无法送达。
但是引用 B 域下的资源是可以的。
<script src="http://www.B.com/some.js">
利用这个 trick , JSONP便诞生了,看下图:
我们要修改前后端代码,使他接近 JSONP 协议的规范:
举例说明(注意:示例和图片不符,凑合着看吧!!!):
前段:
<script>
function TakeData(data){
alert(data["whoami"]);
}
</script>
<script src="http://www.B.com/index.php?callback=TakeData"></script>
后端:
<?PHP
header('Content-type: application/json');
$JSON='{"whoami":"C0d3r1iu"}';
if(isset($_GET['callback'])){
echo $_GET['callback'].'('.$JSON.')';
}
else{
echo $JSON;
}
?>
实际应用情况:
发现某接口:
加上callback 后则会返回 将数据 “封装” 成 JS代码的 代码。
如果从其他域调用这个接口,就可以实现跨域访问然后用这个方法处理数据了。
JSONP劫持:
让用户带着他的身份认证去请求这个JSONP接口,通过数据外带,从而拿到接口返回的他的信息。
类似CSRF,我们让用户访问构造好的页面,从而达到攻击效果。
最后再说一下: 并不一定是浏览器限制了发起跨站请求,也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了。