JSONP跨域访问实现

最新推荐文章于 2024-04-29 17:02:19 发布

EternalStarCity

最新推荐文章于 2024-04-29 17:02:19 发布

阅读量749

点赞数

分类专栏： CSRF 文章标签：网络安全 csrf

本文链接：https://blog.csdn.net/m0_73896875/article/details/131685749

版权

CSRF 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一介绍

JSONP（JSON with Padding）是一种用于解决跨域请求的方法，它允许从一个域请求另一个域的数据。JSONP利用了'<script>'标签的特性通过动态创建<script>标签来加载包含JSON数据的JavaScript文件。

1.JSONP的基本工作原理

1.客户端(浏览器)创建一个<script>标签，并将其src属性设置为目标域中包含JSON数据的URL，并指定一个回调函数名作为查询参数

例

<script src="http://example.com/data?callback=myCallback"></script>

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

<?php

// //连接数据库并访问
$conn = new mysqli('127.0.0.1','root','123456','learn') or die("数据库连接不成功.");
$conn->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.浏览器访问

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var listUrl = 'http://192.168.120.84/jsonp/list-json.php';
        //实例化XMLHttpRequest，用于发送AJAX请求
        xmlhttp = new XMLHttpRequest();
        var count = 0;
        //当请求状态发生变化时，触发执行代码
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status==200){
                //取得请求的响应，并通过响应正则提取Token
                var text = xmlhttp.responseText
                alert(text)
            }
        };
        xmlhttp.open("GET",listUrl,false);
        xmlhttp.send();
    </script>
</head>
<body>

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

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页面修改为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //先定义好一个JS函数
        function test(args){
            alert(JSON.stringify(args));
        }
    </script>
    <script src="http://192.168.120.51/list-json.php?callback=test"></script>
</head>
<body>

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

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

五JSONP跨域要点

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

2.另外一点就是将<script src="192.168.120.51/list-json.php?callback=test"></script>放在<script>标签中，因为该标签允许跨域访问

EternalStarCity

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONP跨域访问实现

JSONP（JSON with Padding）是一种用于解决跨域请求的方法，它允许从一个域请求另一个域的数据。JSONP利用了'<script>'标签的特性通过动态创建<script>标签来加载包含JSON数据的JavaScript文件。
复制链接

扫一扫