JSONP实现跨域访问

于 2024-08-20 11:18:09 发布
阅读量526 收藏 13
点赞数 13
分类专栏： 计算机网络 网络安全 渗透测试 文章标签： json web安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YhMjQx/article/details/141353397
版权

JSONP实现跨域访问

课程目标

1、理解JSONP跨域访问的解决方案和实现原理

2、能够利用JavaScript后台和JQuery实现跨域处理

3、理解JavaScript后台代码回调的工作机制，并实现代码回调

4、综合上述，利用JSONP实现跨域访问

一、生成JSON响应

1、生成json数据的PHP代码

在192.168.2230.147服务器上生成PHP代码，并命名为list-json.php

 <?php
 ​
 // 链接数据库并访问数据
 $conn = new mysqli('127.0.0.1','root','','woniunote',3306) or die("数据库连接失败");
 $conn->set_charset("utf8");
 ​
 $sql = "select articleid,headline from article where articleid<5";
 $result = $conn->query($sql);
 ​
 // 输出JSON数据到页面
 $json_result = json_encode($result->fetch_all(MYSQLI_ASSOC));
 echo $json_result;
 //echo "<br>";
 //echo gettype($json_result);
 ​
 $conn->close();
 ​
 ?>

在192.168.230.135服务器上生成PHP代码，也命名为list-json.php

 <?php
 ​
 // 链接数据库并访问数据
 $conn = new mysqli('127.0.0.1','root','','mysql',3306) or die("数据库连接失败");
 $conn->set_charset("utf8");
 ​
 $sql = "select Host,User from user";
 $result = $conn->query($sql);
 ​
 // 输出JSON数据到页面
 $json_result = json_encode($result->fetch_all(MYSQLI_ASSOC));
 echo $json_result;
 //echo "<br>";
 //echo gettype($json_result);
 ​
 $conn->close();
 ​
 ?>

2、浏览器访问

浏览器访问http://192.168.230.147/security/list-json.php，结果如下

image-20240812194429896

浏览器访问http://192.168.230.135/list-json.php，结果如下

image-20240812194500018

二、利用页面ajax访问

1、获取JSON数据的html页面

在192.168.230.147构建一个html页面，命名为list-json.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script type="text/javascript">
         var listurl = "http://192.168.230.147/security/list-json.php";
         // var listurl = "http://192.168.230.135/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>
     <title>跨域访问请求查看JSON数据</title>
 </head>
 <body>
     welcome to security world
 </body>
 </html>

在192.168.230.135服务器上后见一个html页面，命名为list-json.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script type="text/javascript">
         // var listurl = "http://192.168.230.147/security/list-json.php";
         var listurl = "http://192.168.230.135/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>
     <title>跨域访问请求查看JSON数据</title>
 </head>
 <body>
     welcome to security world
 </body>
 </html>

2、浏览器同源访问

访问http://192.168.230.147/security/list-json.html，该html页面代码中访问http://192.168.230.147/security/list-json.php，正常弹窗，结果如下：

image-20240812195902741

访问http://192.168.230.135/list-json.html，该html页面代码中访问http://192.168.230.135/list-json.php，正常弹窗，结果如下：

image-20240812200347465

3、浏览器跨域访问

访问http://192.168.230.147/security/list-json.html，该html页面代码访问http://192.168.230.135/list-json.php，弹窗不显示，结果如下：

image-20240812210536468

image-20240812210721221

我们可以发现，明明请求的响应中带有我们所需要的信息，但为社么浏览器没有给我们显示出来呢？是因为响应中没有 Access-Control-Allow-Origin 字段

访问http://192.168.230.135/list-json.html，该html页面代码访问http://192.168.230.147/security/list-json.php，弹窗不显示，结果如下：

image-20240812210555803

image-20240812213047845

我们可以看到，以上就是跨域访问的问题，即使服务器响应回了正常的数据，但由于请求头中带有Origin字段表示跨域访问，而响应中又没有Access-Control-Allow-Origin字段来同意跨域访问，所以浏览器解析响应时便认定服务器不同意跨域访问，所以就不显示响应数据

三、使用JSONP解决跨域访问的问题

1、修改list-json.php

两台服务器上的list-json.php修改方式都一样

 #只需将
 echo $json_result;
 #替换为
 echo $_GET['callback']."(".$json_result.")";  //向前端页面输出回调函数，然后再html页面中使用js代码执行。

访问http://192.168.230.147/security/list-json.php?callback=test之后输出结果如下：

 test([{"articleid":"1","headline":"\u6f2b\u8c08\uff1a\u5f3a\u54e5\u5728\u5f3a\u54e5\u5b66\u5802\u60f3\u5bf9\u670b\u53cb\u4eec\u8bf4\u7684\u4e00\u4e9b\u8bdd"},{"articleid":"2","headline":"\u6f2b\u8c08\uff1a\u5df2\u7ecf\u6709\u8717\u725b\u5b66\u9662\u4e86\uff0c\u4e3a\u4ec0\u4e48\u8fd8\u8981\u521b\u529e\u5f3a\u54e5\u5b66\u5802\uff1f"},{"articleid":"3","headline":"\u6f2b\u8c08\uff1a\u8f6f\u4ef6\u5f00\u53d1\u548c\u8f6f\u4ef6\u6d4b\u8bd5\uff0c\u6211\u8be5\u5982\u4f55\u9009\u62e9\uff1f"},{"articleid":"4","headline":"\u6f2b\u8c08\uff1aJava\u548cPython\u73b0\u5728\u90fd\u633a\u706b\uff0c\u6211\u5e94\u8be5\u600e\u4e48\u9009\uff1f"}])
 string

访问http://192.168.230.135/list-json.php?callback=test之后输出结果如下：

 test([{"Host":"%","User":"root"},{"Host":"127.0.0.1","User":"root"},{"Host":"::1","User":"root"},{"Host":"localhost","User":""},{"Host":"localhost","User":"pma"},{"Host":"localhost","User":"root"}])
 string

2、修改list-json.html

192.168.230.147要跨域访问192.168.230.135上的list-json.php，所以 <script src="http://192.168.230.135/list-json.php?callback=test"></script>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script type="text/javascript">
         // 先定义好一个js函数
         function test(args) {
             //alert(args); args是一个json对象，直接显示我们看到的结果只是 object 这样的内容
             alert(JSON.stringify(args));
         }
 ​
     </script>
     <!--形成回调之后，在直接去调用test($json_result)，所以要保证test函数先定义callback函数参数值必须是回调函数名-->
     <script src="http://192.168.230.135/list-json.php?callback=test"></script>
     <title>跨域访问请求查看JSON数据</title>
 </head>
 <body>
     welcome to security world
 </body>
 </html>

一旦远程代码包含了之后，就会变成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">
        // 先定义好一个js函数
        function test(args) {
            //alert(args); args是一个json对象，直接显示我们看到的结果只是 object 这样的内容
            alert(JSON.stringify(args));
        }

    </script>
    <!--形成回调之后，在直接去调用test($json_result)，所以要保证test函数先定义callback函数参数值必须是回调函数名-->
    <script>
        test([{"Host":"%","User":"root"},{"Host":"127.0.0.1","User":"root"},{"Host":"::1","User":"root"},{"Host":"localhost","User":""},{"Host":"localhost","User":"pma"},{"Host":"localhost","User":"root"}])
    </script>
    <title>跨域访问请求查看JSON数据</title>
</head>
<body>
    welcome to security world
</body>
</html>

所以下面的 <script> 标签中的test()就会执行上面 <script> 标签中的函数。

修改192.168.230.135上的list-json.html

同样的，192.168.230.135要跨域访问192.168.230.147上的list-json.php，所以对应的html代码中 <script src="http://192.168.230.147/security/list-json.php?callback=test"></script>

注意，我们包含的不是一份代码，而是以恶url地址请求，所以包含之后得到的内容将会是url地址请求之后的响应内容

3、浏览器访问

访问http://192.168.230.147/security/list-json.html，通过192.168.230.135的list-json.php代码执行之后，包含到前端页面进行回调，将可以弹窗得到192.168.230.135的数据库的json数据

image-20240812215228600

同样的，访问http://192.168.230.135/list-json.html，通过192.168230.147的list-json.php代码执行后的结果包含到前端页面，进行回调得到的是192.168.230.147的woniunote数据库中的内容

image-20240812215552160

4、思考总结

JSONP这种基于回调函数的方式，为什么可以实现跨域？

因为script标签不受同源策略的影响，再通过回调将script标签中远程包含的输出结果作为代码执行，执行的代码就是访问list-json.php的响应结果。

5、使用JQuery完成跨域回调

<script src="jquery-3.4.1.min.js"></script>
<script>
    $.getJSON("http://192.168.230.135/list-json.php?callback=test",function(data) {
        alert(JSON.stringify(data));
    });
</script>

6、JSONP跨域要点

当list-json.php实现了跨域访问后，任意网站的页面均可以访问其数据，只要知道其参数名称$_GET['callbsck']，从而在js代码（该代码执行的函数名称要和$_GET['callbsck'] 传递的参数值一样）中进行函数回调，即可完成访问。

另外一点就是将 <script src="http://192.168.230.135/list-json.php?callback=test"></script> 放在 <script> 标签中不受同源策略的影响，该标签允许跨域访问。

JSONP存在的限制：只能处理GET请求，必须经过回调，在真实场景中比较受限。

YhMjQx
关注
  • 13
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJax与Jsonp跨域访问问题小结
10-23
AJAX与JSONP跨域访问问题小结 ...内容涵盖了从创建XMLHttpRequest对象，到使用AJAX发起异步请求，再到通过JSONP实现跨域访问的一系列知识点。对于开发者而言，这些内容都是实现现代Web应用中不可或缺的重要技术。
jquery下利用jsonp跨域访问实现方法
10-28
下面我们将深入探讨如何在jQuery下利用JSONP进行跨域访问。 首先，理解JSONP的工作原理至关重要。由于JavaScript的同源策略限制，浏览器不允许JavaScript从不同的源加载数据。然而，`<script>`标签不受此限制，可以...
jsonp实现跨域访问
huidaoli
07-04 1352
要实现JSONP跨域访问，首先就要了解什么是跨域？然后JSONP与JSON的关系？ 1、什么是跨域？ 跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互。比如说：现有一个http://www.zq.com和http://www.qt.com两个独立的网站，要实现从后一个网站向前一个网站中取数据。把做为数据来源的当作服务端，把去获取数据的当作客户端，实现面向服务的编程。 在动态网页当中...
通过JSONP实现跨域访问
小康博客
09-05 1599
跨域访问 说到跨域访问就要谈到浏览器的同源策略，所谓同源指的就是协议相同、域名相同、端口号相同，三个条件必须全部匹配，否则就会收到限制，例如： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 无法获得 AJAX 请求不能发送 而互联网默认原则就是同源策略，也就是说不允许跨域访问。 常见的跨域可以通过标签元素实现，例如link、script、img、iframe等标签。 <!DOCTYPE html> <html lang="en"> <hea
Jsonp实现跨域原理
m0_56219678的博客
07-17 2210
Jsonp实现跨域原理
JSONP跨域访问实现_jsonp如何实现跨域
2301_82257383的博客
05-16 958
php​// //连接数据库并访问$conn = new mysqli('127.0.0.1','root','123456','learn') or die("数据库连接不成功.");​//输出JSON数据到页面echo $json;​​?​```
JSONP实现跨域访问的实现原理
weixin_43862991的博客
07-24 453
先了解一下同源策略 同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能 MDN官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互这是一个用于隔离潜在恶意文件的重要安全机制 通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互 例如： ① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB ② 无法接触非同源网页的 DOM ③ 无法向非同源地址发送 .
JsonP实现跨域访问的原理图文分析
weixin_36898943的博客
08-12 286
    1. JsonP实现跨域访问的原理分析:     1.首先理解几个知识点:         1.跨域:所谓跨域,就是指当 服务器A 响应(回来的html) 中有向 服务器B 发送的请求,当然这样说不太             准确,准确地说:只要 :协议,IP,端口,三者中有一个不同,那么都会出现同源访问策略问题,这个时候             的访问都是跨域访问;       ...
JSONP实现跨域
花生吃花生的学习记录
11-06 1695
首先说一下什么是跨域： 跨域就是在客户端在访问服务器的时候，出现了协议、域名、端口有一项或者几项不同，就会导致跨域。也就是说，在这种情况下，跨域会阻止你的访问。向服务器发送请求后，也自然不会收到服务器返回的数据了。 那么：跨域应该如何解决呢，通常跨域有两种解决办法，一种是利用JSONP来实现跨域，另外就是使用CORS来实现跨域。 JSONP（JSON with Padding）实现跨域 原理：jsonp实现跨域的原理，就是利用script标签可以实现跨域访问，我们在使用script标签的时候，有时会
JSON和JSONP 实现跨域访问
fangzy0112的专栏
02-13 727
来源：http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html  前言：   由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 当然了，通过调用强大的PhoneGap插件然后打包，你可以实现
跨域：利用JSONP、WebSocket实现跨域访问
qq_68163788的博客
11-12 3021
WebSocket和JSONP都可以用于跨域访问，但它们的实现方式和应用场景不同。 WebSocket是一种基于TCP协议的全双工通信协议，可以在浏览器和服务器之间建立一个持久性的连接，实现实时数据传输。WebSocket协议默认使用80端口（HTTP协议的默认端口）或443端口（HTTPS协议的默认端口），可以避免跨域问题。因此，使用WebSocket可以轻松实现跨域通信。 JSONP是一种通过动态创建script标签，利用浏览器对script标签跨域访问的特性，实现跨域数据传输的技术。
跨域访问禁止以及使用JSONP实现跨域的示例
03-08
在标题"跨域访问禁止以及使用JSONP实现跨域的示例"中，我们将探讨如何应对这一挑战，特别是通过JSONP技术来突破限制。 首先，我们要理解什么是跨域。跨域是指一个域下的文档或脚本试图请求另一个域下的资源。比如，...
使用jsonp实现跨域获取数据实例讲解
11-27
在本文中，我们将深入理解JSONP的工作原理，并通过实例来演示如何使用JSONP来获取跨域数据。 1. 同源策略：同源策略是浏览器为了安全考虑而设置的一项机制，它限制了脚本只能访问与当前页面具有相同协议（如HTTP或...
Springboot 实现跨域访问无需使用jsonp的实现代码
10-17
在Spring Boot中，我们可以直接通过配置或者自定义拦截器来实现跨域访问。下面我们将详细介绍如何在Spring Boot应用中实现CORS，而无需使用JSONP。 1. **CORS基本概念** CORS是一种浏览器安全策略，用于限制浏览器...
Python爬虫案例二：获取虎牙主播图片(动态网站)
最新发布
m0_74614835的博客
08-19 355
params不能写在__init__()里面，因为__init__()只执行一次，params是变化的。'iPageNo': '{}'.format(i), # i是字符串。print('ok 第{}张--{}'.format(self.no, name))1.异步数据（即先返回HTML，再返回目标的数据，只是触发了JSON请求），不在HTML中。os.mkdir('../虎牙')测试链接：https://live.huya.com/# 构造7页的params。2.不能刷新网页，直接翻页。
安企CMS多站点迁移教程
no_reg的博客
08-15 391
【代码】安企CMS多站点迁移教程。
MySQL中处理JSON数据:大数据分析的新方向
Chujun123528的博客
08-18 1102
灵活性：JSON数据类型允许你在单个列中存储复杂的数据结构，如数组和嵌套对象，这减少了需要创建多个表来存储相关信息的必要性。查询能力：MySQL为JSON数据类型提供了一系列内置的函数，如, , , , , 等，使得查询和修改JSON数据变得非常便捷。索引支持：MySQL支持为JSON文档中的特定路径创建虚拟列（Generated Columns），然后可以在这些虚拟列上创建索引，从而加速基于JSON内容的查询。性能优化：随着MySQL的不断改进，对JSON数据的处理性能也在不断提高。虽然与专门的NoSQL
JWT（JSON Web Token）工作原理及特点
modelsetget的博客
08-18 343
总结了JWT的基本概念、结构、工作流程、优势以及一些深入思考问题，希望对您理解JWT有所帮助。
jsonp跨域访问实现
05-10
JSONP（JSON with Padding）是一种跨域访问的解决方案，它利用了 HTML 中 script 标签可以跨域请求资源的特性。具体实现步骤如下： 1. 定义一个回调函数，用于接收服务器返回的数据。 2. 在页面中创建一个 script 标签，设置其 src 属性为需要请求的资源的 URL，并在 URL 中加上回调函数的名称。 3. 服务器接收到请求后，将数据包裹在回调函数的调用中返回给客户端。 4. 客户端接收到服务器返回的数据后，会自动执行回调函数，从而实现跨域访问。 以下是一个示例代码： ``` function callback(data) { // 处理返回的数据 } var script = document.createElement('script'); script.src = 'http://example.com/api?callback=callback'; document.body.appendChild(script); ``` 在上面的代码中，我们定义了一个名为 callback 的回调函数，并创建了一个 script 标签，并设置其 src 属性为 http://example.com/api?callback=callback。服务器端返回的数据将会被包裹在 callback 函数的调用中，从而实现跨域访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值