Vue进阶(贰零捌)浏览器地址栏URL防篡改攻略

文章目录

    • 一、前言
    • 二、动态路由
    • 三、Params 参数
    • 四、在 URL 中使用加密参数
    • 五、参数转码
    • 六、综述
    • 七、拓展阅读

一、前言

在应用 vue.js 开发前端项目时,浏览器中url 地址栏参数的处理是一个很基础但却很重要的问题。在很多情况下,我们需要从 url 中获取参数,比如从上一个页面跳转到当前页面,需要将一些信息传递给这个页面,这时候就需要将这些信息以参数的形式传递给 url。但是,有时候这些参数又需要被隐藏起来,毕竟 url 中敏感信息不应该被轻易泄露,因此本文将介绍如何在 vue.js 中隐藏地址栏参数。

二、动态路由

首先,我们可以通过 Vue.js 的动态路由来隐藏地址栏中的参数。动态路由是一种将 URL 中的参数与实际展示的组件进行映射的技术。举个例子,我们假设有一个文章列表页,每篇文章都有一个唯一的 ID 用于标识这篇文章,我们可以将这个 ID 作为路由的一个参数,然后在组件中读取这个 ID 并使用它来获取对应的文章信息。

具体来说,我们可以首先在路由配置中定义一条动态路由,将路由的路径中的某一段(比如文章 ID)设置为动态参数:

const router = new VueRouter({routes: [{path: '/article/:id',name: 'Article',component: Article}]
})

在这个例子中,:id 就是一个动态参数,表示文章的 ID。在对应的组件中,我们可以通过 $route.params.id 来获取这个参数的值:

export default {mounted () {console.log(this.$route.params.id)}
}

这样,在用户访问这个路由时,即可在组件中获取到参数的值,而 URL 中并不会显示这个参数。

三、Params 参数

除了使用动态路由,我们还可以通过 Params 参数来隐藏地址栏中的参数。

举个例子,我们假设有一个搜索页,需要在搜索时将用户输入的关键词传递给服务器来获取匹配的结果,可以将输入的关键词作为 Params 参数,然后在路由组件中获取和解析这个参数:

const router = new VueRouter({routes: [{path: '/search',name: 'Search',component: Search}]
})// 当用户在输入框中输入搜索关键词时
this.$router.push({name: 'Search',params: { keyword: '关键词' }
})export default {mounted () {console.log(this.$route.params.keyword)}
}

在这个例子中,params 选项表示传递的参数。然后在组件中可以通过 $route.params.keyword 来获取这个参数的值。这样在 URL 中就看不到实际传递的参数了。

四、在 URL 中使用加密参数

除了以上两种方法,我们还可以在 URL 中使用加密参数来隐藏地址栏参数。具体来说,我们可以将参数进行加密后再传递给 URL,这样在 URL 中即使被他人截获,也无法轻易解析出实际的参数值。

加密的方式有很多种,可以使用对称加密(如 DESAES)或非对称加密(如 RSA)等算法来进行加密。在这里不做过多介绍。

在 Vue.js 中使用加密参数时,可以将加密后的参数写入 CookieLocalStorage 等本地存储器中,然后让后续的页面读取这个数据并进行解密。这样可以保证加密的参数只在本地存储器中显示,而不会暴露给 URL。唯一需要注意的是加密后的参数长度应该要比明文参数的长度要小,不然会导致 Cookie 等存储器过大。

五、参数转码

应用Base64实现将URL参数转码并作为参数追加至url中,若同一用户拷贝该url至新视图并试图修改url参数,则无法继续访问页面,或者不同用户拷贝该url不做任何url修改在新视图中也无法正常访问,因为url中涉及用户身份标识。

注意⚠️:应用Base64进行转码后得到的结果不定长,存在转码结果过长导致请求失败或数据丢失风险。建议使用哈希算法,例如MD5SHA-256,详参博文《Vue进阶(贰零捌)六种常用数据加密方式》。

import Base64 from 'base-64'Vue.prototype.$setCCMSAuthCode = function (obj) {let copyQuery = JSON.parse(JSON.stringify((obj.query)))copyQuery.usrUid = store.getters.usrUidreturn Base64.encode(encodeURIComponent(JSON.stringify(copyQuery)))
}Vue.prototype.$router_push = function (obj) {if (obj.query && JSON.stringify(obj.query) !== '{}') {let copyQuery = JSON.parse(JSON.stringify((obj.query)))copyQuery.usrUid = store.getters.usrUidobj.query.AuthCode = Base64.encode(encodeURIComponent(JSON.stringify(copyQuery)))this.$router.push({path: obj.path,query: obj.query})} else {this.$router.push({path: obj.path})}
}// 白名单的路径
// const whiteList = ['/login']// 不重定向白名单
let islogin = false
router.beforeEach((to, from, next) => {NProgress.start()if (islogin) {islogin = falsenext()NProgress.done() // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps:history模式下无问题,可删除该行!return}
// 未登录if (!store.getters.usrUid) {store.dispatch('GetInfo').then(res => {if (res.code === 99) {islogin = trueif (process.env.NODE_ENV === 'development') {next('/login')} else {window.location.href = window.logOutUrl}return}const role = res.usrUidstore.dispatch('SetRole', role)router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表next(to.fullPath) // hack方法 确保addRoutes已完成})} else {// 方案一if (to.fullPath !== '/login' && JSON.stringify(to.query) !== '{}') {if (to.fullPath.indexOf('AuthCode') < 0) {let copyQuery = JSON.parse(JSON.stringify((to.query)))copyQuery.usrUid = store.getters.usrUidlet obj = {AuthCode: Base64.encode(encodeURIComponent(JSON.stringify(copyQuery)))}let query = Object.assign({}, to.query, obj)console.log(query, 'query')router.push({path: to.path, query: query})return} else {let copyQuery = JSON.parse(JSON.stringify((to.query)))copyQuery.usrUid = store.getters.usrUiddelete copyQuery.AuthCodeif (decodeURIComponent(Base64.decode(to.query.CCMS_AuthCode)) !== JSON.stringify(copyQuery)) {next('/404')}}}// 方案二// if (to.fullPath !== '/login' && JSON.stringify(to.query) !== '{}') {//   let copyQuery = JSON.parse(JSON.stringify((to.query)))//   copyQuery.usrUid = store.getters.usrUid//   delete copyQuery.AuthCode//   if (!to.query.AuthCode || decodeURIComponent(Base64.decode(to.query.AuthCode)) !== JSON.stringify(copyQuery)) {//     next('/404')//   }// }if (to.path === '/login') {next()} else {next()NProgress.done() // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps:history模式下无问题,可删除该行!}}
})
router.afterEach((to) => {NProgress.done()// 跳转回页面顶部window.scrollTo(0, 0)
})/* eslint-disable no-new */
new Vue({el: '#app',router,store,i18n,components: {App},template: '<App/>'
})

六、综述

以上就是在 Vue.js 中浏览器地址栏URL防篡改的若干种方法。无论哪种方法,都需要确保在保证安全性的前提下,尽可能的隐藏 URL 中的参数值。诚然,这并不是一件简单的事情,但在实际开发中,对于一些敏感数据而言,这个问题却是非常重要的。

七、拓展阅读

  • 《Vue进阶(幺叁捌):vue 路由传参的几种基本方式》
  • 《Vue进阶(贰零贰)六种常用数据加密方式》

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

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

相关文章

采购管理软件:采购自动化提高效率的5种方式

在采购领域&#xff0c;手动数据输入和耗时的文书工作的时代已经落后了。采购自动化正在改变游戏规则&#xff0c;使企业能够简化流程、降低成本并提高效率。 以下是采购自动化帮助企业提高效率的5种方法。 采购管理软件,采购自动化管理,8Manage SRM,高亚科技 减少手动流程和…

安卓手机APP开发__屏幕兼容性概述

安卓手机APP开发__屏幕兼容性概述 目录 概述 屏幕大小 灵活的布局 备选的布局 可改写的图像 像素的深度 深度依赖 备选的位图 向量图形 概述 安卓运行各种各样的设备&#xff0c;它们有不同的屏幕大小和屏幕的像素深度。 系统执行基本的缩放和变形来适配在不同的屏幕…

iview(viewUI) span-method 表格实现将指定列的值相同的行合并单元格

效果图是上面这样的&#xff0c;将第一列的名字一样的合并在一起&#xff1b; <template><div class"table-wrap"><Table stripe :columns"columns" :data"data" :span-method"handleSpan"></Table></div&…

HDFS- DataNode磁盘扩缩容

HDFS- DataNode磁盘扩缩容 背景: 缩减/增加节点磁盘 方案介绍: 采用hdfs dfsadmin -reconfig 动态刷新配置实现,不停服扩缩容。 注意事项: 请在进行缩容之前,务必了解实际的数据量,并确保磁盘有足够的空间来容纳这些数据。还需要考虑未来的使用需求,要预留一定数量的空间…

如何成为一个优秀的程序员

1 衡量一个程序员是否优秀&#xff0c;不是看程序员懂多少编程语言和编程技能&#xff0c;也不是看程序员做过多少项目&#xff0c;写过多少行代码&#xff0c;发表多少篇技术文章&#xff0c;甚至也不是看程序员的工作年限。 衡量程序员&#xff0c;第一看薪资&#xff0c;第…

java+vue3+iclientol实现警务地理信息系统实践

警务地理信息系统&#xff08;Police Geographic Information System, PGIS&#xff09;是一种专为警务工作设计的地理信息系统&#xff0c;它结合了地理信息技术、数据库技术、网络技术和现代警务理念&#xff0c;旨在提升公安机关的空间数据分析、决策支持、指挥调度、案件管…

SpringMVC的WebMvcConfigurer及返回

由于很久很久没有做过纯springmvc的代码了&#xff0c;好多东西都遗忘&#xff0c;最近接手了一个古早项目springmvc的。记录一下&#xff1a; 1、WebMvcConfigurer 是 Spring Framework 中的一个接口&#xff0c;它提供了一种扩展 Spring MVC 配置的方式。通过实现 WebMvcConf…

【QVariant类型剖析】

QVariant类型剖析 &#x1f31f; 官方文档中给出的定义&#x1f31f; 特性&#x1f338;QVariant实战应用&#x1f338;项目成果展示 &#x1f31f; 官方文档中给出的定义 &#x1f4d8;Because C forbids unions from including types that have non-default constructors or…

基于springboot+vue+Mysql的外卖点餐系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

【.NET Core】你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟

你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟 文章目录 你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟一、概述二、CallerMemberNameAttribute类三、CallerFilePathAttribute 类四、CallerLineNumberAttribute 类…

Android 简单的下拉选择框实现

要实现这种效果,目前知道的方法有以下两种,Spinner 和 ListPopupWindow,当然肯定还有很多别的方法,这里我们先尝试使用ListPopupWindow来实现这个效果; 以下是一个简单的demo: public class MainActivity extends AppCompatActivity {private List<String> dataList;pr…

三方库的调用方法

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言三方库的调用方法1. **下载并安装Boost库(三方库)**2. **配置开发环境**3. **包含Boost(三方库)头文件**4. **编写代码**5. **链接Boost库(三…

QueryPerformanceCounter实现高精度uS(微妙)延时

参考连接 C# 利用Kernel32的QueryPerformanceCounter封装的 高精度定时器Timer_kernel32.dll queryperformancecounter-CSDN博客https://blog.csdn.net/wuyuander/article/details/111831973 特此记录 anlog 2024年5月11日

ubuntu安装oceanbase调通本地navicat链接

分为两部分 一安装oceanbase服务 准备工作 mkdir -p /data/1 /data/log1 chown -R admin.admin /data/1 /data/log1/偷偷说&#xff1a;其实这步我忘记执行&#xff0c;也没影响我安装 oceanbase程序是很占内存的在安装时我们要先下载好安装包&#xff1a; 然后放在能记住的…

【C语言】/*操作符(上)*/

目录 一、算数操作符&#xff1a;、-、*、/、% 1.1 和 - 1.2 * 1.3 / 1.4 % 二、赋值操作符&#xff1a; 和符合赋值 2.1 连续赋值 2.2 复合赋值(自操作) 三、单目操作符&#xff1a;、--、(正号)、-(负号) 3.1 和 -- 3.1.1 前置 3.1.2 后置 3.1.3 前置-- …

稳定网络的诀窍:静态住宅代理解决方案

在数字化时代&#xff0c;网络稳定性对于个人和企业都至关重要。然而&#xff0c;由于多种因素的影响&#xff0c;如地理位置、网络拥堵或网络安全问题等&#xff0c;网络稳定性常常受到挑战。为了应对这些挑战&#xff0c;静态住宅代理作为一种高效且可靠的网络解决方案&#…

C++容器——list

目录 list容器 list容器使用流程 加入头文件 定义 list容器的使用 添加元素&#xff1a; 删除元素&#xff1a; 访问元素&#xff1a; 容器大小&#xff1a; 迭代器操作&#xff1a; 其他操作&#xff1a; list容器 功能&#xff1a;将数据进行链式存储 链表(list…

AWTK应用程序将资源放到 zip 文件中的方法

在支持文件系统的时候&#xff0c;AWTK 的资源缺省是以独立文件的形式放在指定目录里的。但在有的情况下&#xff0c;把全部资源文件放到一个 zip 文件中&#xff0c;是更好的或唯一的选择。比如&#xff1a; 开发 PC 应用程序。 在没有文件系统的情况下&#xff0c;把资源放到…

【软测学习笔记】Python 教程(1)

&#x1f31f;博主主页&#xff1a;我是一只海绵派大星 &#x1f4da;专栏分类&#xff1a;软件测试笔记 &#x1f4da;参考教程&#xff1a;菜鸟教程❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、Python 简介 二、Python发展历史 三、Python 特点 四、 Python 环…

kali linux2024.1版安装

1 基于 VMware 安装 Kali 系统 打开已经安装好的 VMware 程序&#xff0c;点击选项卡中的“主页”--》而后点击“创建新的虚拟机” 选择“典型(推荐)”&#xff0c;并点击“下一步” 客户机操作系统镜像选择&#xff1a;选择“稍后安装操作系统”&#xff0c;并点击“下一步”…