这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

JSONP是一种很远古用来解决跨域问题的技术,当然现在实际工作当中很少用到该技术了,但是很多同学在找工作面试过程中还是经常被问到,本文将带您深入了解JSONP的工作原理、使用场景及安全注意事项,让您轻松掌握JSONP。

JSONP是什么?

JSONP,全称JSON with Padding,是一项用于在不同域之间进行数据交互的技术。这项技术的核心思想是通过在页面上动态创建<script>标签,从另一个域加载包含JSON数据的外部脚本文件,然后将数据包裹在一个函数调用中返回给客户端。JSONP不仅简单而且强大,尤其在处理跨域数据请求时表现出色。

JSONP的工作原理

JSONP的工作流程如下:

  1. 客户端请求数据:首先,客户端会创建一个<script>标签,向包含JSON数据的远程服务器发出请求。这个请求通常包括一个名为callback的参数,用来指定在数据加载完毕后应该调用的JavaScript函数的名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<h1>JSONP Example</h1>
<div id="result"></div> <script>
// 定义JSONP回调函数
function callback(data) {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `Name: ${data.name}, Age: ${data.age}`;
} // 创建JSONP请求
const script = document.createElement('script');
script.src = 'http://localhost:3000/data?callback=callback';
document.body.appendChild(script);
</script>
</body>
</html>
  1. 服务器响应:服务器收到请求后,将JSON数据包装在指定的回调函数中,并将其返回给客户端。响应的内容类似于:
const Koa = require('koa');
const Router = require('koa-router'); const app = new Koa();
const router = new Router(); // 定义一个简单的JSON数据
const jsonData = {
name: 'John',
age: 30,
}; // 添加路由处理JSONP请求
router.get('/data', (ctx) => {
const callback = ctx.query.callback;
if (callback) {
ctx.body = `${callback}(${JSON.stringify(jsonData)})`;
} else {
ctx.body = jsonData;
}
}); // 将路由注册到Koa应用程序
app.use(router.routes()).use(router.allowedMethods()); // 启动Koa应用程序
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
  1. 客户端处理数据:在客户端的页面中,我们必须事先定义好名为callback的函数,以便在响应被加载和执行时被调用。这个函数会接收JSON数据,供我们在页面中使用。

JSONP使用场景

跨域请求:JSONP主要用于解决跨域请求问题,尤其适用于无法通过CORS或代理等方式实现跨域的情况。 数据共享:在多个域名之间共享数据,可以利用JSONP实现跨域数据共享。 第三方数据获取:当需要从第三方网站获取数据时,可以使用JSONP技术。

使用JSONP注意事项

JSONP的简单性和广泛的浏览器支持使其成为跨域数据交互的强大工具。然而,我们也必须谨慎使用它,因为它存在一些安全考虑,我们分析下它的优缺点:

优点

  • 简单易用:JSONP非常容易实现和使用,无需复杂的配置。
  • 跨浏览器支持:几乎所有现代浏览器都支持JSONP。
  • 绕过同源策略:JSONP帮助我们绕过了同源策略的限制,轻松获取跨域数据。

安全考虑

  • XSS风险:JSONP未经过滤的数据可能会引起XSS攻击,因此需要对返回的数据进行过滤和验证。
  • CSRF攻击:使用JSONP时要注意防范CSRF攻击,可以通过添加随机数等方式增强安全性。
  • 仅支持GET请求:JSONP只支持GET请求,不适用于POST等其他HTTP方法。
  • 难以处理HTTP错误:JSONP难以有效处理HTTP错误,在请求失败时的异常处理比较困难。

随着技术的发展,JSONP已不再是首选跨域解决方案,但了解它的工作原理仍然有助于我们更深入地理解跨域数据交互的基本原理。在实际项目中,根据具体需求和安全考虑,建议优先选择CORS或代理服务器方式处理跨域问题。

本文转载于:

https://juejin.cn/post/7280435879548715067

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--求你了,别再说不会JSONP了的更多相关文章

  1. hive实现根据用户分组,按用户记录求上下两条记录的时间差

    在mysql,数据如下:#查询某一用户该日抽奖时间 select draw_time from user_draw_log where user_id = 1 and draw_date='2016- ...

  2. HDU-4612 Warm up,tarjan求桥缩点再求树的直径!注意重边

    Warm up 虽然网上题解这么多,感觉写下来并不是跟别人竞争访问量的,而是证明自己从前努力过,以后回头复习参考! 题意:n个点由m条无向边连接,求加一条边后桥的最少数量. 思路:如标题,tarjan ...

  3. Dijkstra--POJ 2502 Subway(求出所有路径再求最短路径)

    题意: 你从家往学校赶,可以用步行和乘坐地铁这两种方式,步行速度为10km/h,乘坐地铁的速度为40KM/h.输入数据的第一行数据会给你起点和终点的x和y的坐标.然后会给你数目不超过200的双向地铁线 ...

  4. 求你了,再问你Java内存模型的时候别再给我讲堆栈方法区了…

    GitHub 4.1k Star 的Java工程师成神之路 ,不来了解一下吗? GitHub 4.1k Star 的Java工程师成神之路 ,真的不来了解一下吗? GitHub 4.1k Star 的 ...

  5. 计算机二级-C语言-程序设计题-190119记录-求出一个二维数组每一列的最小值。

    //编写一个函数:tt指向一个M行N列的二维数组,求出二维数组每列中最小的元素,并依次放入pp所指的一维数组中.二维数组中的数在主函数中赋予. //重难点:求出的是每一列的最小值,这里要注意,学会简化 ...

  6. 不要再说不会Spring了!Spring第一天,学会进大厂!

    工作及面试的过程中,作为Java开发,Spring环绕在我们的身边,很多人都是一知半解,本次将用14天时间,针对容器中注解.组件.源码进行解读,AOP概念进行全方面360°无死角介绍,SpringMV ...

  7. vue打包后空白页问题全记录 (background路径,css js404,jsonp等);

    总结一下vue打包后问题全记录:大部分开发者webpack基本上都是拿来就用的(并没有系统化的研究). 一 >>> 打包之后的静态文件不能直接访问:(例如dist)打包后搭个服务器才 ...

  8. 一条SQL语句求前面记录的平均值

    有算法要求如下: For (i=1,i<=10,i++) { ta[i] = (t[1] + t[2] + ... + t[i]) / i; } 用一条SQL语句实现它: 分别用表变量 @ta ...

  9. Codeforces 刷水记录

    Codeforces-566F 题目大意:给出一个有序数列a,这个数列中每两个数,如果满足一个数能整除另一个数,则这两个数中间是有一条边的,现在有这样的图,求最大联通子图. 题解:并不需要把图搞出来, ...

  10. 左求值表达式,堆栈,调试陷阱与ORM查询语言的设计

    1,表达式的求值顺序与堆栈结构 “表达式” 是程序语言一个很重要的术语,也是大家天天写的程序中很常见的东西,但是表达式的求值顺序一定是从左到右么? C/C++语言中没有明确规定表达式的运算顺序(从左到 ...

随机推荐

  1. C++ 单例模式以及内存管理

    引用: https://zhuanlan.zhihu.com/p/37469260 https://www.cnblogs.com/xiaolincoding/p/11437231.html http ...

  2. 好书推荐之《Java 核心技术:卷 1 基础知识》

    大佬推荐 <Java 核心技术:卷 1 基础知识>,这本书本来是 Sun 公司的官方用书,是一本 Java 的入门参考书. 对于 Java 初学者来说,是一本非常不错的值得时常翻阅的技术手 ...

  3. 我们在SqlSugar开发框架中,用到的一些设计模式

    我们在<SqlSugar开发框架>中,有时候都会根据一些需要引入一些设计模式,主要的目的是为了解决问题提供便利和代码重用等目的.而不是为用而用,我们的目的是解决问题,并在一定的场景下以水到 ...

  4. Vue+SpringBoot+ElementUI实战学生管理系统-5.用户管理模块

    1.章节介绍 前一篇介绍了项目的API接口设计,这一篇编写用户管理模块,需要的朋友可以拿去自己定制.:) 2.获取源码 源码是捐赠方式获取,详细请QQ联系我 :)! 3.项目截图 列表操作 动态图 4 ...

  5. oracle 游标变量ref cursor详解

    一 介绍      像游标cursor一样,游标变量ref cursor指向指定查询结果集当前行.游标变量显得更加灵活因为其声明并不绑定指定查询. 其主要运用于PLSQL函数或存储过程以及其他编程语言 ...

  6. std::weak_ptr 与 std::shared_ptr 配合使用

    std::shared_ptr<int> a = std::make_shared<int>(2); std::weak_ptr<int> b = a; a = n ...

  7. QT - Day 5

    1    event事件 用途:用于事件的分发 也可以做拦截操作,不建议 bool event( QEvent * e); 返回值 如果是true 代表用户处理这个事件,不向下分发了 e->ty ...

  8. defaultdict高级用法

    说明 defaultdict数据结构允许调用者提供一个函数,用来在键名缺失的情况下,创建与这个 键对应的值.只要字典发现调用者想要访问的键不存在,就会触发这个函数,以返回应该 与键相关联的默认值 下面 ...

  9. 在Winform界面中使用自定义控件,丰富界面的效果处理

    我们在<SqlSugar开发框架>中,Winform界面开发部分往往也用到了自定义的用户控件,对应一些特殊的界面或者常用到的一些局部界面内容,我们可以使用自定义的用户控件来提高界面的统一性 ...

  10. 深入理解String

    深入理解String String是Java中的一个类,是一个引用类型,用于表示字符串.它是不可变的(immutable),即一旦创建,其值就不能被修改.任何对String对象的修改操作都会创建一个新 ...