JSONP跨域访问实现

一介绍

  • JSONP(JSON with Padding)是一种用于解决跨域请求的方法,它允许从一个域请求另一个域的数据。JSONP利用了'

    2.目标域服务器接收到请求后,将JSON数据作为参数传递给回调函数,并将其作为JavaScript代码返回给客户端

    myCallback({"name": "John", "age": 30});

    3.客户端定义回调函数myCakkback,在接收带返回的javascript代码时,自动执行该函数,并以JSON数据作为参数

     function myCallback(data) {
        // 处理返回的 JSON 数据
        console.log(data.name);
        console.log(data.age);
      }

    通过这种方式,JSONP可以绕过浏览器的同源策略限制,实现跨域请求和数据获取。

二生成JSON响应

1.PHP代码

在192.168.120.84上生成PHP代码,并命名为list-json.php

set_charset('utf8');
$sql = "select * from xssdata";
$result = $conn->query($sql);
​
//输出JSON数据到页面
$json = json_encode($result->fetch_all(MYSQLI_ASSOC));
echo $json;
​
$conn->close();
​
?>
2.浏览器访问

在浏览器中直接访问,将获取以下数据

JSONP跨域访问实现_第1张图片

 

三在另外一个页面使用AJAX访问

1.在192.168.120.84构建一个新的页面,命名为list-json.html,向list-json.php发送请求



    
    
    Document
    
2.在浏览器访问list-json.php,正常弹窗显示

JSONP跨域访问实现_第2张图片

 

3.将list-json.php保存至192.168.120.51服务器

(1)访问方式

将list-json.php的代码保存到192.168.120.51服务器,在浏览器中直接访问该地址,确认可以正常访问(注意改数据库连接)

(2)在84服务器发list-json.html页面访问

将list-json.html在的listUrl地址修改为51服务器的地址,此时在浏览器中访问,将无法弹窗,打开F12,看到控制台的输出如下

 

以上,就是跨域存在的问题。

四使用JSONP解决跨域访问

1.修改51服务器的list-json.php

将
echo $json;
替换为
echo $_GET['callback']."(".$json.")"; //向前端输出回调函数

2.将84服务器上的list-json.html页面修改为:




    
    
    Document
    
    

再次访问http://192.168.120.84/jsonp/list-json.html实现正常访问

 

原理:script标签不受同源策略影响,再通过回调将值作为实参传给页面。

五JSONP跨域要点

1.当list-json.php实现了跨域访问之后,任意网站均可以访问其数据,只要知道其参数名$_GRT['callback'],从而在JS中进行函数回调,即可完成访问。

2.另外一点就是将放在

你可能感兴趣的:(CSRF,网络安全,csrf)