jsonp 的原理及应用-程序员宅基地

技术标签: 安全  

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的功能。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38677814/article/details/109532387

智能推荐

Aubo机械臂初学(愁)——1、gazebo和Rviz联合仿真_aubo机械臂仿真-程序员宅基地

文章浏览阅读1.7k次,点赞5次,收藏33次。auboi5机械臂初学者遇到的各种问题合集_aubo机械臂仿真

POJ_1064_Cable master【二分】_poj - 1064 二分枚举答案 floor向下取整函数 原创-程序员宅基地

文章浏览阅读1.7k次。/*Cable masterTime Limit: 1000MS Memory Limit: 10000KTotal Submissions: 43878 Accepted: 9409DescriptionInhabitants of the Wonderland have decided to hold a regional programmi_poj - 1064 二分枚举答案 floor向下取整函数 原创

【前端学习】HTML学习笔记-table_table前端心得-程序员宅基地

文章浏览阅读88次。<table><colgroup><col bgcolor='red' width=200></colgroup><thead><tr><th></th></tr><tbody><tr><td></td></t..._table前端心得

CSS 之 line-height 实现单行文字垂直居中的原理_css height=line-height 可以垂直居中-程序员宅基地

文章浏览阅读1.5k次,点赞3次,收藏12次。基础知识line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。我们暂且称之为顶部距离和底部距离,就是上图中的蓝色区域。也就是说: line-height = 顶部距离 + 内容高度(顶线和底线之间的距离) + 底部距离;顶部距离 = 底部距离;示例一: 当line-height 等于 height 时,文字垂直居中文本默认大小16px。结果:文字垂直居中。顶部距离 = 底部距离 = (line-heig_css height=line-height 可以垂直居中

uniapp实战——实现详情其他部分的结构_uniapp 实现关系图谱-程序员宅基地

文章浏览阅读241次。QQ 1274510382Wechat JNZ_aming商业联盟 QQ群538250800技术搞事 QQ群599020441解决方案 QQ群152889761加入我们 QQ群649347320共享学习 QQ群674240731纪年科技aming网络安全 ,深度学习,嵌入式,机器强化,生物智能,生命科学。叮叮叮:产品已上线 —>关注 官方认证-微信公众号——济南纪年信息科技有限公司民生项目:商城加盟/娱乐交友/创业商圈/外包兼职开发-项目发布/安全项目:态.._uniapp 实现关系图谱

如何查看其他人的ABAP authorization check log_查看authorization-程序员宅基地

文章浏览阅读375次。Created by Jerry Wang on Jul 29, 2014 Go to start of metadata在做middleware相关的scenario操作时,有时候需要evaluate其他user的authorization check log,例如在CRM tcode SMW01里发现BDoc state为validation error,点击show error butto..._查看authorization

随便推点

I.MX6 eMMC分区挂载-程序员宅基地

文章浏览阅读244次。/********************************************************************* * I.MX6 eMMC分区挂载 * 说明: * 如果想要修改分区的挂载情况,可以修改fstab.freescale文件。 * * ..._imx6 分区挂载

【opencv-python】霍夫圆检测_霍夫圆圆心检测python-程序员宅基地

文章浏览阅读6.7k次,点赞10次,收藏55次。霍夫变换检测直线的原理是利用累加器找到最大的(ρ,θ)(ρ,θ)(ρ,θ)数对,如文章所述。圆形的数学表达式为(x−xcenter)2+(y−ycenter)2=r2(x-x_{center})^2+(y-y_{center})^2=r^2(x−xcenter​)2+(y−ycenter​)2=r2,其中(xcenter,ycenter)(x_{center},y_{center})(xcenter​,ycenter​)为圆心坐标,rrr为圆的直径。因此可知一个圆需要xcenter,ycenter,rx_{_霍夫圆圆心检测python

码仔精选,Android面试题-程序员宅基地

文章浏览阅读171次。码个蛋(codeegg) 第 822次推文码妞看世界1.Java创建对象的几种方式使用new关键字使用Class类的newInstance方法使用Constructor类的newIn..._码个蛋 《每日一道面试题》 第一期

Milking Time (poj 3616 简单DP)_poj milking time-程序员宅基地

文章浏览阅读2.5k次,点赞3次,收藏5次。题意:给个时间长度n,m个工作时间段和每个时间段能完成的工作量,一次只能做一个工作并且一旦开始做就要把它做完,要求选择的两个工作时间段之间至少相差r时间(中间需要休息嘛)求选择那些工作n时间内能完成的最大工作量。输出最大值。思路:先按工作的结束时间从小到大排序,再动态规划。dp[i]表示从头开始取到第i段所获得的最大值。二重循环,如果第i段之前的某个段的结束时间加上r小于等于第i段的开始时间,则更新dp[i]。_poj milking time

GDCM:gdcm::Global的测试程序_gbcm main show main screen-程序员宅基地

文章浏览阅读333次。GDCM:gdcm::Global的测试程序GDCM:gdcm::Global的测试程序GDCM:gdcm::Global的测试程序#include "gdcmGlobal.h"#include "gdcmDicts.h"#include "gdcmDict.h"#include "gdcmDefs.h"int TestGlobal(int, char *[]){ // case 1 // Get the global singleton: gdcm::Trace::DebugOn_gbcm main show main screen

理解 OAuth 2.0_shanks user-agent-程序员宅基地

文章浏览阅读278次。转载自http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html作者:阮一峰日期:2014年5月12日OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版。本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释,主要参考材料为RFC 6749。更新:我后来又写了一组三篇的《OAuth 2.0 教程》,更加通俗,并带有代码实例,欢迎阅读。一、应用场景..._shanks user-agent