web前端安全性——JSONP劫持

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劫持的风险。但是安全是一个综合性的工作,前端和后端都需要共同努力来确保系统的安全性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697214.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode【报错】yarn : 无法将“yarn”项识别为 cmdlet

问题 CMD下载完yarn可以查看到yarn版本&#xff0c;但是进入到vscode控制台报错无法识别&#xff0c;报错内容如下&#xff1a; vscode【报错】yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff…

@ 代码随想录算法训练营第8周(C语言)|Day57(动态规划)

代码随想录算法训练营第8周&#xff08;C语言&#xff09;|Day57&#xff08;动态规划&#xff09; Day53、动态规划&#xff08;● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和 动态规划 &#xff09; 1143.最长公共子序列 题目描述 给定两个字符串 text1 …

C#面:i++ 和 ++i 的区别

i 先参与左边的运算&#xff0c;之后 i 自增&#xff1b; int i 5; int result i; // result的值为5&#xff0c;i的值变为6 i i 先自增&#xff0c;之后的值&#xff0c;参与左边的运算&#xff1b; int i 5; int result i; // result的值为6&#xff0c;i的值也为6…

【一步步由简入深,搞定FFT,持续更新中...】

作为一个倾向于形象思维的工程师&#xff0c;总想把复杂深奥的知识搞的方便理解&#xff0c;虽然上学时学过数字信号处理&#xff0c;仍然一知半解&#xff0c;现在想借着项目中涉及到的频谱相关知识总结下来&#xff0c;在了解中逐步完善。 好了&#xff0c;首先要明确的概念是…

ffmpeg for android编译全过程与遇到的问题

编译前准备 编译环境&#xff1a;Ubuntu16&#xff0c;可自行下载VMWare最新版并百度永久许可证或在服务器上安装Ubuntu ffmpeg源码&#xff1a;ffmpeg4.2.2 NDK下载&#xff1a;Android NDK r21e 有条件的最好还是在Liunx平台下编译吧&#xff0c;Windows平台下编译坑更多…

【计算机网络】数据链路层|封装成帧|透明传输|差错检测|PPP协议|CSMA/CD协议

目录 一、思维导图 ​ 二、数据链路层功能概述 1.数据链路层概述 2.数据链路层功能概述——封装成帧 3.数据链路层功能概述——透明传输 4.数据链路层功能概述——差错检测 三、数据链路层重要协议 1.数据链路层重要协议&#xff1a;PPP协议 2.数据链路层重要协议&#x…

js设计模式:备忘录模式

作用: 封装的对象可以在对象触发行为时进行状态的记录与保存 也可以进行状态的回退,恢复之前的状态 示例: class Editor{constructor(){this.allText }edit(text){this.allText text}saveNow(){return new EditorText(this.allText)}backspacing(editorText){this.allText…

护眼台灯哪个品牌更好用?五大好用护眼台灯大爆料!

护眼台灯相信大家都有所耳闻或者使用过,家里有小孩的可能了解更深,毕竟是孩子学习时需要使用的小家电。现在市面上的护眼台灯种类可以说是多到眼花缭乱,甚至有些劣质的产品掺杂在里面,或许有些宝妈已经踩过一些坑了&#xff0c;护眼台灯究竟哪个品牌更好用&#xff1f; &#x…

这个春节,爽了

四次医院 请了一周假&#xff0c;准备开始愉快的长假。 结果第一天小孩就发烧了&#xff0c;赶紧送医院拿药。回到家才发现&#xff0c;给医生看的验血报告是上一次的&#xff0c;那是好几个月之前的。 但是药已经吃了&#xff0c;这是吃错药了呀&#xff01;&#xff01; …

手机中有哪些逆向进化的功能

手机中有哪些逆向进化的功能&#xff1f;逆向进化是指明明很优秀的很方便的功能&#xff0c;却因为成本或者其他工业原因莫名其妙地给取消了。 逆向进化1&#xff1a;可拆卸电池-变为不可拆卸电池。 智能手机为了追求轻薄等原因&#xff0c;所以移除了可拆卸电池功能。将电池…

GoLand 相关

goland 下载依赖 go mod tidy&#xff1a;保持依赖整洁 go mod tidy 命令的作用是清理未使用的依赖&#xff0c;并更新 go.mod 以及 go.sum 文件。 go mod tidy 和 go mod vendor 两个命令是维护项目依赖不可或缺的工具。go mod tidy 确保了项目的 go.mod 文件精简且准确&…

ubuntu20.04安装实时内核补丁PREEMPT_RT

参考&#xff1a; Ubuntu 18.04安装 RT-PREEMPT 实时内核及补丁【过程记录】_ubuntu18.04 preempt rt linux 5.6.19-CSDN博客 https://github.com/UniversalRobots/Universal_Robots_ROS_Driver/blob/master/ur_robot_driver/doc/real_time.md当前内核&#xff1a;5.15.0-94-ge…

1.deeplabv3+网络结构及原理

这里的网络结构及原理可以看这篇博客&#xff0c;DeepLabV3: 在DeepLabV3基础上引入了Decoder_matlab deeplabv3resnet101-CSDN博客该博客翻译原论文解释得很清楚。 一、引言 语义分割的目标是为图像中的每个像素分配语义标签。在这项研究中&#xff0c;考虑了两种类型的神经网…

Vue计算属性computed()

1. 计算属性定义 获取计算属性值 <div>{{ 计算属性名称}}</div>创建计算属性 let 定义的属性ref/reactive....let 计算属性名称 computed(() > {//这里写函数式,函数式里面包含定义属性//只有这个包含的定义属性被修改时才出发此函数式//通过计算属性名称co…

docker:Haoop集群

系列文章目录 docker&#xff1a;环境安装 docker:Web迁移 docker:Haoop集群 文章目录 系列文章目录前言一、宿主机选择二、环境准备1.前置技术2.网络环境1. docker网卡2. 分配IP 三、容器互联三、Jdk和Hadoop安装四、分发脚本五、启动Hadoop总结 前言 年前学习了docker的相关…

ubuntu18 环境安装

1. ubuntu18 环境安装 1. ubuntu18 环境安装 1.1. default language1.2. sougou shurufa1.3. cmake-last1.4. audio-recorder1.5. sources.list切换清华源1.6. oh my zsh1.7. weixin1.8. bcompare1.9. wireshark1.10. 其他问题 1.1. default language ubuntu 修改系统默认语…

https://registry.npm.taobao.org淘宝npm镜像仓库地址更新

在工作中有遇见获取淘宝的npm镜像存在问题&#xff0c;图示如下的报错&#xff1a; 根据报错的内容是说 https://registry.npm.taobao.org地址访问失败了&#xff0c;然后通过排查发现淘宝的npm镜像仓库地址有更新了。需要使用最新的地址 旧的淘宝镜像仓库&#xff1a;https://…

数据结构2月19日

题目&#xff1a;顺序表作业 代码&#xff1a; 功能区&#xff1a; #include <stdio.h>#include <stdlib.h>#include "./d2191.h"SeqList* create_seqList(){SeqList* list (SeqList*)malloc(sizeof(SeqList));if(NULL list){return NULL;}list->p…

Linux系列讲解 —— 【Vim编辑器】在Ubuntu18.04中安装新版Vim

平时用的电脑系统是Ubuntu18.04&#xff0c;使用apt安装VIM的默认版本是8.0。如果想要安装新版的Vim编辑器&#xff0c;只能下载Vim源码后进行编译安装。 目录 1. 下载Vim源码2. 编译3. 安装4. 遇到的问题4.1 打开vim后&#xff0c;文本开头有乱码现象。4.2 在Vim编辑器中&…

JS常见问题

文章目录 如何判断是数组 如何判断是数组 Array.isArray console.log(Array.isArray(arr))instanceof&#xff08;instanceof 运算符用于验证构造函数的 prototype 属性是否出现在对象的原型链中的任意位置&#xff09; console.log(arr1 instanceof Array)constructor&#x…