jsonp vulnerability

The principle of jsonp
Ajax requests are affected by the same-origin policy and cross-domain requests are not allowed, while the link in the src attribute of the script tag can access cross-domain js scripts. With this feature, the server no longer returns data in JSON format, but Return a piece of js code that calls a function and call it in src, thus achieving cross-domain.
Implementation:
1: Construct the jsonp.php file
The following uses JSONP to remove the ajax request in the front-end code, add a script tag, and the src of the tag points to the remote.js script under another domain

<!DOCTYPE html>
<html>
<head>
	<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
	function jsonhandle(data){
    
    
		console.log(data)
		alert("age:" + data.age + "name:" + data.name);
	}
</script>

</script>
<script type="text/javascript" src="http://10.228.11.159/phplist/remote.js"></script>
</body>
</html>

The cross-domain remote.js script is called here, and the remote.js code is as follows:

jsonhandle({
    
    
	"age" : 15,
	"name": "John",
})

That is, this remote js code executes the function defined above, and a prompt box
Insert picture description here
2 pops up :: Modify the front-end code again, the code is as follows

<!DOCTYPE html>
<html>
<head>
	<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
	function jsonhandle(data){
    
    
		alert("age:" + data.age + "name:" + data.name);
	}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
	$(document).ready(function(){
    
    
		var url = "http://10.228.11.159/jsonp.php?&callback=jsonhandle";
		var obj = $('<script><\/script>');
		obj.attr("src",url);
		$("body").append(obj);
	});
</script>
</body>
</html>

A script tag is dynamically added here, src points to a cross-domain php script, and the above js function name is passed in as the callback parameter, then let's see how the PHP code is written:

<?php
$data = array(
	'age' => 20,
	'name' => '张三',
);

$callback = $_GET['callback'];

echo $callback."(".json_encode($data).")";
return;

The PHP code returns a JS statement, namely

jsonhandle({
    
    
	"age" : 15,
	"name": "张三",
})

When the page is accessed at this time, a script tag is dynamically added, src points to the PHP script, the returned JS code is executed, and a prompt box pops up successfully.
So JSONP turns accessing cross-domain requests into executing remote JS code. The server no longer returns data in JSON format, but returns a piece of function execution code that takes JSON data as an input parameter.
3: Finally, jQuery provides a convenient way to use JSONP, the code is as follows:

<!DOCTYPE html>
<html>
<head>
	<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
	$(document).ready(function(){
    
    
		$.ajax({
    
    
			type : "get",
			async: false,
			url : "http://www.practice-zhao.com/student.php?id=1",
			dataType: "jsonp",
			jsonp:"callback", //请求php的参数名
			jsonpCallback: "jsonhandle",//要执行的回调函数
			success : function(data) {
    
    
				alert("age:" + data.age + "name:" + data.name);
			}

		});
	});
</script>
</body>
</html>

https://mp.weixin.qq.com/s/Q8AiQw1AxVxV8U-5Wv7fHA

Guess you like