当前位置： 首页 > news >正文

web前端安全性——JSONP劫持

news 2025/9/15 4:39:05

1、JSONP概念

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，协议+IP+端口有任意不同都会导致请求跨域，而HTML的script元素是一个例外。利用script元素的这个开放策略，网页可以得到从其他来源动态产生的JSON 资料。
代码如下仅供参考
假设有一个远程服务器 https://example.com/api/data，它返回以下 JSONP 格式的响应：

myCallback({"name": "John", "age": 30});

在前端，你可以创建一个 script标签，并将其 src 属性设置为该 URL，同时定义一个名为 myCallback 的函数来处理返回的 JSON 数据：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>JSONP Example</title>  
<script>  // 定义回调函数  function myCallback(data) {  console.log(data); // 输出：{name: "John", age: 30}  }  
</script>  
</head>  
<body>  
<script>  // 创建一个新的script标签  var script = document.createElement('script');  // 设置script标签的src属性为远程API的URL  script.src = 'https://example.com/api/data?callback=myCallback';  // 将新创建的script标签添加到DOM中  document.body.appendChild(script);  
</script>  
</body>  
</html>

举例：你可以在自己的界面建立搜索功能，但是搜索的数据等内容可以通过script标签的src属性为其他浏览器的URL ，那么你所搜索的数据就是来自于浏览器，也就是访问到这个函数参数中的 JSON 数据…

2、JSONP劫持概念

通过JSONP技术可以实现数据的跨域访问，必然会产生安全问题。如果网站B对网站A的JSONP请求没有进行安全检查直接返回数据，则网站B便存在JSONP漏洞，网站A利用JSONP漏洞能够获取用户在网站B上的数据。

3、流程

（1）用户在网站B注册并登录，网站B 包含了用户的id，name，email等信息。
（2）用户通过浏览器向网站A发出URL请求。
（3）网站A向用户返回响应页面，响应页面中注册了JavaScript的回调函数和向网站B请求的script标签。
（4）用户收到响应，解析JS代码，将回调函数作为参数向网站B发出请求
（5）网站B接收到请求后，解析请求的URL，以JSON 格式生成请求需要的数据，将封装的包含用户信息的JSON数据作为回调函数的参数返回给浏览器。
（6）网站B数据返回后，浏览器则自动执行Callback函数对步骤4返回的JSON格式数据进行处理，通过alert弹窗展示了用户在网站B的注册信息。另外也可将JSON数据回传到网站A的服务器，这样网站A利用网站B的JSONP漏洞便获取到了用户在网站B注册的信息。

4、JSPNP劫持的危害

（1）攻击者利用存在漏洞的网站，将链接通过邮件等形式推送给受害者，如果受害者点击了链接，则攻击者便可以获取受害者的个人敏感的信息。所以JSONP劫持漏洞会泄露信息。
（2）可能导致用户权限被盗用:攻击者通过JSON劫持构造盗取管理员或高权限用户的脚本，一旦被访问，权限立即被盗用。
（3）可以通过劫持对网页进行挂马;在JSON劫持点构造引向漏洞后门木马，但访问直接利用漏洞批量挂马。
（4）可对劫持页进行网站钓鱼;利用JSON劫持直接导向伪装网站地址
（5）可做提权攻击。

5、JSONP劫持的防护

（1）限制referer
前端可以通过设置document.referrer属性来限制Referer。虽然这并不能阻止攻击者伪造Referer，但可以增加一层防护。
代码如下仅供参考

// 设置或修改当前文档的Referer  
document.referrer = 'https://trusted-domain.com';  
// 发起JSONP请求  
const script = document.createElement('script');  
script.src = 'https://example.com/api/data?callback=handleResponse';  
document.body.appendChild(script);  
function handleResponse(data) {  // 处理返回的数据  console.log(data);  
}

注意：由于Referer可以被伪造，所以仅仅依赖Referer来防止JSONP劫持是不够的。它应该与其他安全措施结合使用。

（2）使用token
在前端，你可以通过添加一个自定义的token参数来增强JSONP请求的安全性。这个token可以是服务器生成的一个随机字符串，并存储在客户端的某个安全位置（如localStorage）。在服务器端验证该token。只有持有有效token的请求才会被处理。这样可以防止未经授权的第三方发起JSONP请求。
代码如下仅供参考

// 从安全存储中获取token  
const token = localStorage.getItem('secureToken');  
// 发起带token的JSONP请求  
const script = document.createElement('script');  
script.src = `https://example.com/api/data?callback=handleResponse&token=${token}`;  
document.body.appendChild(script);  
function handleResponse(data) {  // 验证token  if (data.token === token) {  // 处理返回的数据  console.log(data);  } else {  // token验证失败，可能是劫持攻击  console.error('Invalid token, potential JSONP hijacking!');  }  
}

在服务器端，你还需要验证这个token是否有效。只有当token有效时，才返回数据。这种方法可以增加攻击者伪造有效请求的难度。

（3）不使用JSONP进行跨域(最直接的方法)
现代浏览器支持CORS（跨源资源共享）机制，它提供了更安全、更灵活的跨域解决方案。通过使用CORS，可以在不暴露数据给不安全脚本的情况下实现跨域通信。
代码如下仅供参考
javascript

// 使用CORS替代JSONP  
fetch('https://example.com/api/data', {  method: 'GET',  mode: 'cors', // 表明这是一个跨域请求  headers: {  'Content-Type': 'application/json'  }  
})  
.then(response => response.json())  
.then(data => {  // 处理返回的数据  console.log(data);  
})  
.catch(error => {  console.error('Error:', error);  
});

使用CORS时，服务器需要正确配置响应头部以允许跨域请求
http

Access-Control-Allow-Origin: https://your-frontend-domain.com  
Access-Control-Allow-Methods: GET, POST, PUT, DELETE  
Access-Control-Allow-Headers: Content-Type

通过上面措施，前端可以显著减少JSONP劫持的风险。但是安全是一个综合性的工作，前端和后端都需要共同努力来确保系统的安全性。

相关文章：

web前端安全性——JSONP劫持

1、JSONP概念 JSONP(JSON with Padding)是JSON的一种“使用模式”&#xff0c;可用于解决主流浏览器的跨域数据访问的问题。由于同源策略&#xff0c;协议IP端口有任意不同都会导致请求跨域&#xff0c;而HTML的script元素是一个例外。利用script元素的这个开放策略&#xff0…...

编程日记 2024/2/23 12:27:51

从零开始学HCIA之广域网技术03

1、LCP中包含的报文类型 &#xff08;1&#xff09;Configure-Request&#xff08;配置请求&#xff09;&#xff0c;链路层协商过程中发送的第一个报文&#xff0c;该报文表明点对点双方开始进行链路层参数的协商。 &#xff08;2&#xff09; Configure-Ack&#xff08;配置…...

编程日记 2024/2/23 12:26:49

AI推介-大语言模型LLMs论文速览（arXiv方向）：2024.01.01-2024.01.10

1.Pre-trained Large Language Models for Financial Sentiment Analysis 标题:用于金融情感分析的预训练大型语言模型 author:Wei Luo, Dihong Gong date Time:2024-01-10 paper pdf:http://arxiv.org/pdf/2401.05215v1 摘要&#xff1a; 金融情感分析是指将金融文本内容划分…...

编程日记 2024/2/23 12:25:48

Redis降低内存占用（二）分片结构

一、分区方法&#xff1a; 分片&#xff0c;也称为分区。Redis提供了多种分区实现方案: 1、哈希分区 2、区间分区 3、一致性哈希分区 4、虚拟分区 5、LUA脚本实现分片 二、...

编程日记 2024/2/23 12:24:47

vue大文件读取部分内容，避免重复加载大文件，造成流量浪费

使用场景&#xff1a;项目点云地图是pcd文件&#xff0c;但是文件可能上百兆&#xff0c;我需要获取到文件中的版本信息&#xff0c;跟本地的缓存文件做比较&#xff0c;如果不一致&#xff0c;才会加载整个文件。从而节省流量。 避免重复加载整个“.pcd文件&#xff0c;以最大…...

编程日记 2024/2/23 12:22:45

5G网络RedCap

RedCap&#xff1a;RedCap&#xff08;Reduced Capability&#xff09;&#xff0c;即“降低能力”。它是3GPP在5G R17阶段&#xff0c;针对速率、时延要求不高的5G应用场景&#xff0c;专门推出的一种新技术标准协议&#xff0c;旨在全面提升5G网络质量和覆盖率&#xff0c;也…...

编程日记 2024/2/23 12:21:44

vue+springboot登录与注册功能的实现

①首先写一个登录页面 <template> <div style"background-color: #42b983;display: flex;align-items: center;justify-content: center;height: 100vh"><div style"background-color: white;display: flex;width: 50%;height: 50%;overflow: h…...

编程日记 2024/2/23 12:13:37

数据结构D3作业

1. 2. 按位插入 void insert_pos(seq_p L,datatype num,int pos) { if(LNULL) { printf("入参为空&#xff0c;请检查\n"); return; } if(seq_full(L)1) { printf("表已满&#xff0c;不能插入\n"); …...

编程日记 2024/2/23 12:12:36

Spring框架@Autowired注解进行字段时，使用父类类型接收子类变量，可以注入成功吗？（@Autowired源码跟踪）

一、 前言 平常我们在使用spring框架开发项目过程中&#xff0c;会使用Autowired注解进行属性依赖注入&#xff0c;一般我们都是声明接口类型来接收接口实现变量&#xff0c;那么使用父类类型接收子类变量&#xff0c;可以注入成功吗&#xff1f;答案是肯定可以的&#xff01;…...

编程日记 2024/2/23 12:10:34

【springblade】springblade(bladeX) 数据权限失效原因分析

文章目录 数据权限接口权限 前言&#xff1a;最近博主在按照bladeX官方文档 配置数据权限 结果发现失效了&#xff0c;网上搜了一下没找到合适的答案&#xff0c;本着求人不如求己的精神&#xff0c;自己调试了一下发现了问题所在&#xff0c;也大致看了一下bladeX的权限逻辑。…...

编程日记 2024/2/23 12:09:33

单例模式的几种实现方式

在Java中&#xff0c;实现单例模式主要有几种方式&#xff1a;懒汉式、饿汉式、双重检查锁定、静态内部类和枚举。每种方式都有其特点和适用场景。 1. 饿汉式&#xff08;线程安全&#xff09; 饿汉式是最简单的一种实现方式&#xff0c;通过静态初始化实例&#xff0c;保证了…...

编程日记 2024/2/23 12:07:31

鸿蒙OS运行报错 ‘ToDoListItem({ item })‘ does not meet UI component syntax.

在学习harmonyOS时&#xff0c;原本是好好运行的。但是突然报错 ToDoListItem({ item }) does not meet UI component syntax. 一脸懵逼&#xff0c;以为是自己语法问题检查了半天也没问题。 网上搜索了一下&#xff0c;说把多余的js\map文件删除就行 才发现我的 鸿蒙的开…...

编程日记 2024/2/23 12:06:30

React18源码: reconciler执行流程

reconciler执行流程 1 &#xff09;概述 此处先归纳一下react-reconciler包的主要作用&#xff0c;将主要功能分为4个方面&#xff1a; 输入&#xff1a;暴露api函数&#xff08;如&#xff1a;scheduleUpdateOnFiber&#xff09;, 供给其他包&#xff08;如react包&#xff0…...

编程日记 2024/2/23 12:01:25

mapbox面图层标注

mapbox并没有一个属性类似于’text-field’的symbol图层的直接可以标注的办法&#xff0c;这里笔者提供两种其他的面图层标注的办法用来大家参考 效果图 方案一 把面图层当做点图层直接展示 在mapbox里面&#xff0c;面图层是可以直接渲染成线图层和点图层的&#xff0c;这里…...

编程日记 2024/2/23 11:59:24

MySQL|MySQL基础(求知讲堂-学习笔记【详】）

MySQL基础 目录 MySQL基础一、 MySQL的结构二、 管理数据库1&#xff09;查询所有的数据库2&#xff09;创建数据库3&#xff09;修改数据库的字符编码4&#xff09;删除数据库5&#xff09;切换操作的数据库 三、表的概念四、字段的数据类型4.1 整型4.2 浮点型(float和double)…...

编程日记 2024/2/23 11:57:21

10.docker exec -it /bin/bash报错解决、sh与bash区别

报错 进入容器时&#xff0c;报如下错误 dockeruserdell-PowerEdge-R740:~$ docker exec -it daf2 /bin/bash OCI runtime exec failed: exec failed: unable to start container process: exec: "/bin/bash": stat /bin/bash: no such file or directory: unknown…...

编程日记 2024/2/23 11:56:20

查询数据库的编码集Oracle,MySQL

1、查询数据库的编码集Oracle,MySQL 1.1、oracle select * from v$nls_parameters where parameterNLS_CHARACTERSET; 查询版本&#xff1a;SELECT * FROM v$version 2、MySQL编码集 SELECT DEFAULT_CHARACTER_SET_NAME, DEFAULT_COLLATION_NAME FROM information_schema.SC…...

编程日记 2024/2/23 11:55:19

电商数据采集+跨境电商|API电商数据采集接口洞悉数字新零售发展

随着全球经济一体化和电子商务的快速发展&#xff0c;网络购物的需求日益增加。不断涌现的电商企业使得行业的竞争情况愈演愈烈。在这种情况下&#xff0c;企业不仅要加大经营力度&#xff0c;还要在自己的基础设施和技术上持续投入&#xff0c;才能更好的适应市场和消费习惯。…...

编程日记 2024/2/23 11:53:18

linux之用户和用户组

文章目录 一、简介1.1 用户1.2 用户组1.3 UID和GID1.4 用户账户分类 二、用户2.1 添加新的用户账号&#xff1a;useradd2.2 删除账号&#xff1a;userdel2.3 修改账号&#xff1a;usermod(modmodify)2.4 用户口令的管理:passwd2.5 切换用户&#xff1a;su 三、用户组3.1 增加一…...

编程日记 2024/2/23 11:51:16

人工智能深度学习

目录 人工智能 深度学习 机器学习 神经网络 机器学习的范围 模式识别 数据挖掘 统计学习 计算机视觉 语音识别 自然语言处理 机器学习的方法 回归算法 神经网络 SVM&#xff08;支持向量机&#xff09; 聚类算法 降维算法 推荐算法 其他 机器学习的分类 机器…...

编程日记 2024/2/23 11:45:11

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/9/12 22:07:42

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/9/9 14:59:47

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/8/26 22:46:30

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/8/26 18:48:34

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/9/5 19:39:35

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/9/9 10:09:33

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/9/13 9:39:42