jsonp 的原理及应用

article/2025/9/30 19:23:24

1. 什么是jsonp

jsonp全称json with padding，填充式的json,jsonp是为跨域而生的

2. 那么有哪些标签可以跨域呢

<img src=""> //图片
<link href=""> //css
<script src=""> //程序

我们可以使用script来帮助我们跨域

2.1 写一个服务端

server.js

//服务端
//引入支持接受请求，返回响应的模块http
const http=require("http");
//创建服务端程序实例
http.createServer(
//每当有客户端发来请求时
//自动调用一下回调函数(req,res)=>{var weather = "北京 晴 18-20";res.writeHead(200,{"Content-Type":"text/plain;charset=utf-8"});//res.write(weather);res.write(`alert("${weather}")`);res.end();}
).listen(80);

测试一下
在这里插入图片描述

2.2 写一个客户端

注意客户端不要用服务端的ip，可以在本地写一个，或者另找一台服务器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JSONP</title>
</head>
<body>
<div id="divCustomers"></div>
<script src="http://47.xxx.xxx.xx/">
</body>
</html>

2.3 测试

在这里插入图片描述
访问一下客户端，可以看到他发起的请求，并且也成功弹窗了

2.4 小总结

可以看到，在这个例子中，要返回的实际数据【天气】，被填充到一条合法的js语句中【alert(天气)】,然后被客户端js引擎执行。钻一下牛角尖，现在是data with padding，因为我们还没用到json。
仔细一点，我们会发现，目前的服务端是死的【只能alert】，当我们有多个客户端而带来不同的需求后【你要alert，他要document.write。。。】，目前的服务端代码应付不了

3. 改进【方案二】

所以，我们可以让服务端就产生数据，而不用写什么乱七八糟的js，我们在客户端写自己的函数，那么怎么写呢？
在这里插入图片描述
可以看到，在服务端，我就把alert换成了show，而在客户端，我们可以自定义show函数的内容，每次客户端去请求，求回来的是一段show("内容") 的脚本，然后这个脚本被执行，调用我们自己定义好的show函数，实现了一个服务端，多种客户端的需求

4. 改进【方案三，故事的主人公】

怎么还要改进？因为方案二依旧在服务端写死了show函数，我们做个小小的改进，在客户端传个参数进去，在服务端对参数进行解析后，和数据拼接在一起
在这里插入图片描述

在这里插入图片描述

5. 我要看jsonp

之前的几个例子还没用到json，其实这个不过是一个数据格式而已，原理上都是一样的
server.js

//服务端
//引入支持接受请求，返回响应的模块http
const http=require("http");
const url=require("url");
//创建服务端程序实例
http.createServer(
//每当有客户端发来请求时
//自动调用一下回调函数(req,res)=>{var mycallback = url.parse(req.url,true).query.mycallback;var weather = {"location":"Beijing","weather":"sun","temprature":"18-20"};weather = JSON.stringify(weather);res.writeHead(200,{"Content-Type":"application/json;charset=utf-8"});res.write(`${mycallback}(${weather})`);res.end();}
).listen(80);

test.html

<!DOCTYPE html>
<!-- 客户端-->
<html>
<head><meta charset="utf-8"><title>JSONP</title>
</head>
<body>
<div id="divCustomers"></div>
<script>function show(weather){alert(weather.location);}
</script>
<script src="http://47.116.97.185/?mycallback=show">
</script>
</body>
</html>

在这里插入图片描述

6. jquery 使用jsonp

jquery 简化了我们的使用方式，让本来无法跨域的ajax也可以跨域了
在这里插入图片描述

7. jsonp在红蓝对抗中的使用场景蜜罐、钓鱼页面

我们可以去各大社交网站上找一些jsonp的接口目前我的办法是点点点，然后network里看一下有没有jsonp的东西如下图，我在优酷里找了一些但这个接口限制了ip 我用自己的服务器请求不到
在这里插入图片描述
总之如果够细心可以找到这些社交网站上的一些接口，并为你所用，从而实现一访问就被抓到一些社交id的功能。