产品经理:前端实现网页防篡改,你会怎么做?

公众号:程序员白特,欢迎一起交流学习~

如果产品经理要求系统中某个页面的输入框做防止篡改处理,你会怎么做呢?

需求梳理

  • 首先,什么是防篡改?
    • 简单来说,就是用户输入input框值,我们传给后端的值就是用户输入的
  • 正常情况下用户输入input框值,就是我们传递给后端的值,但是部分浏览器插件或者恶意脚本会更改用户输入的值
    • 常见针对的是输入的钱包地址,我们需要防范被浏览器插件和恶意脚本更改
  • 因为实现的效果需要对已有的业务无任何侵入性,保证原有业务的正常运行
    • 这里的需求背景在nuxt2技术栈

最终效果

  • 业务方只需要加上这个指令就可以

实现思路

  • 我们如何保证对原有的代码没有侵入性,保证不影响原有的功能? 对此我们想到一个自定义指令,在指令里面操作。 但是一般指令都是直接写在组件里面的,并不是写在真实的 input 标签上,对此,我们要变更我们的指令,让其去找到真正的 input 标签。
// 通常情况下, 这是一个Input组件,我们需要给这个指令找到其真正的 input 标签
<Input v-xxx/>
  • 这里的代码实现的是如何找到真实的 input 标签。

  • 如何在指令里面发送请求给后端? 对此,我们在指令里面使用自定义事件,让真实的 input 标签绑定上自定义事件

  • 里面涉及2个知识点

    1. 如何给绑定过的 input标签解绑事件?
    2. 如何在指令里面调用请求的方法
  • 问题1答案,我们在指令的节点node, 在 vnode绑定上一个自定义函数,此自定义函数在解绑事件的时候在调用

  • 问题2答案,我们在vnode.context调用自定义方法tamperFn\(\); 这里的vnode.context 就是 this,相当于我们调用了 this.tamperFn\(\); 此处的this就是 Vue实例 (在下面的代码事例中有个属性 isTrusted 至关重要)

  • 至此,我们已经实现如何不侵入业务的情况下找到 input 标签 & 如何在 找到的 input 标签绑定事件并且发送请求出去 & 解绑事件 (有个核心问题,到目前为止没有看到如何区分提交的表单数据是用户写的还是被浏览器插件恶意改的,且继续往下看)
  • jsevent 有个属性 isTrusted
    • 点击链接了解 isTrusted

  • 首先要对所有的 input 标签使用Object.getOwnPropertyDescriptor 进行劫持,找到 input 标签的 set 属性,此时,当变更 input 的输入值我们都可以监控到变化,当有js变更input输入框的值都会触发 set 方法。

  • 上述的功能代码是一个完整的 config.js, 启动项目的时候直接在 nuxt.config.js 加载这个 config.js 即可,业务团队使用一个指令即可完成需求。

总结

我们来梳理下流程:

  1. 首先使用Object.getOwnPropertyDescriptor 进行劫持所有的 input 标签, 在里面会触发自定义事件dispatchTamper
  2. 自定义事件绑定在真实的 input 标签上,在浏览器执行js阶段完成了绑定事件。 通过 vnode.context 我们可以调用 Vue.prototype.tamperFn 方法。 在 tamperFn 里面拿到 isTrusted 来区分是不是被篡改的值。
  3. 我们在绑定 input 标签的事情同时,设置了 node.cusFn = cusFn, 用来解绑事件。

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

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

相关文章

TrueNAS怎么设置中文,最新2024版本安装详细说明

首先我们做好安装前的准备工作 1&#xff0c;ISO镜像安装包 2&#xff0c;虚拟机&#xff08;建议使用ESXI虚拟机环境&#xff09; 如果是物理机安装&#xff0c;建议先给底层安装虚拟机系统esxi&#xff0c;再在上面安装方便以后的管理&#xff0c;如果你想物理机直接安装&a…

【SpringCloud】使用Seata实现分布式事务

目录 一、Seata 框架的需求背景二、Seata 事务模式与架构2.1 Seata 组成2.2 Seata 事务模式 三、Seata 实战演示3.1 部署 Seata Server3.1.1 下载 Seata Server3.1.2 更改 Seata Server 配置3.1.3 创建 Seata Server 所需的数据库、数据库表3.1.4 启动 Seata Server 3.2 Seata …

二叉搜索树题目:将有序链表转换为二叉搜索树

文章目录 题目标题和出处难度题目描述要求示例数据范围 前言解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;将有序链表转换为二叉搜索树 出处&#xff1a;109. 将有序链表转换为二叉搜索树 难度 5 级 题目描述 要求 …

士兵排列问题

解法一&#xff1a; deque实现队头入队和队尾入队即可得到编号排列&#xff0c;每个士兵有二个属性&#xff1a;编号、能力值。 #include<iostream> #include<algorithm> #include<deque> #include<vector> using namespace std; #define endl \n st…

苍穹外卖-day04:项目实战-套餐管理(新增套餐,分页查询套餐,删除套餐,修改套餐,起售停售套餐)业务类似于菜品模块

苍穹外卖-day04 课程内容 新增套餐套餐分页查询删除套餐修改套餐起售停售套餐 要求&#xff1a; 根据产品原型进行需求分析&#xff0c;分析出业务规则设计接口梳理表之间的关系&#xff08;分类表、菜品表、套餐表、口味表、套餐菜品关系表&#xff09;根据接口设计进行代…

搜索二叉树迭代和递归的两种*简单*实现方式

判断搜索二叉树 概念 一棵树所有结点的左节点小于父节点&#xff0c;右节点大于父节点&#xff0c;则为搜索二叉树。 迭代方法 中序遍历二叉树&#xff0c;如果总是升序则是搜索二叉树。如果存在降序&#xff0c;那肯定不是搜索二叉树。 Coding checkTreeOrder()方法 boo…

python 基础知识点(蓝桥杯python科目个人复习计划65)

今日复习内容&#xff1a;做题 例题1&#xff1a;遥远的雪国列车 问题描述&#xff1a; 小蓝和小红今天在房间里一起看完了“雪国列车”这部电影&#xff0c;看完之后他们感触颇深&#xff0c;同时他们想到了这样一道题目&#xff1a; 现在有一个数轴&#xff0c;长度为N&a…

代码随想录算法训练营第二十五天|216.组合总和III,17.电话号码的字母组合

216.组合总和III 题目 找出所有相加之和为 n 的 k 个数的组合。组合中只允许含有 1 - 9 的正整数&#xff0c;并且每种组合中不存在重复的数字。 说明&#xff1a; 所有数字都是正整数。 解集不能包含重复的组合。 示例 1: 输入: k 3, n 7 输出: [[1,2,4]] 示例 2: 输入…

java方法的引用传递和值传递

1、方法的值参数传递 下面代码&#xff0c;它会在控制台输出什么&#xff1f; public class ArrayTest {public static void main(String[] args) {int number 100;System.out.println(number);change(number);System.out.println(number);}public static void change(int n…

想要了解更多商品信息?淘宝天猫详情接口API助你一键搞定!

想要了解更多商品信息&#xff1f;淘宝天猫详情接口API是你的理想选择&#xff01;作为唯一提供官方商品数据的接口&#xff0c;它能够帮助你快速获取商品的多种详细信息&#xff0c;联讯数据让你在购物过程中做出更明智的决策。 简介&#xff1a;淘宝天猫详情接口API的功能及…

【C语言_数组_复习篇】

目录 一、数组的概念 二、数组的类型 三、一维数组 3.1 一维数组的创建 3.2 一维数组的初始化 3.3 一维数组的访问 3.4 一维数组在内存中的存储 四、二维数组 4.1 二维数组的创建 4.2 二维数组的初始化 4.3 二维数组的访问 4.4 二维数组在内存中的存储 五、字符串数组 5.1…

干货分享,大厂内部压测方案设计!

01、为什么要做压测 1、什么是压力测试&#xff1f; 不断向被测对象施加压力&#xff0c;测试系统在压力情况下的表现。 2、压力测试的目的是什么&#xff1f; 测试得出系统的极限性能指标&#xff0c;从而给出合理的承诺值或者容量告警&#xff1b; 找出系统的性能瓶颈&a…