Vue项目如何进行XSS防护

前言

在目前主推网络安全的情况下,很多开发项目都需要在上线前进行渗透测试,当符合渗透测试标准及没有安全漏洞即可正常上线,当前还会有代码审计的,这个另当别论。

如何对XSS进行防护

在很多的富文本编辑器项目中,xss漏洞已经是家常便饭了。接下来直接上修复代码。

当前使用环境为vue3+ts+vite项目,首先安装依赖

bash 复制代码
npm install xss

在main.ts中引入

typescript 复制代码
import xss from 'xss'

然后全局挂在自定义方法,这里提供两种挂在方法

第一种

typescript 复制代码
//挂在全局xss过滤器方法
app.config.globalProperties.$xss = (html: any) => {
  return xss(html)
}

在组件中的使用

typescript 复制代码
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
if (!instance) {
  // 处理无法获取到实例的情况
  throw new Error('Cannot get current instance')
}
// 通过实例的 appContext.config.globalProperties 访问 $xss
const $xss = instance.appContext.config.globalProperties.$xss
console.log($xss('<img src=q οnerrοr=alert(1)>'))

第二种

typescript 复制代码
const $xss = (html: any): any => {
  return xss(html)
}
// 使用 provide 提供 $xss 方法
app.provide('$xss', $xss)

组件中的使用

typescript 复制代码
import { inject } from 'vue'
// 使用 inject 注入 $xss 方法
const $xss: any = inject('$xss')
console.log($xss('<img src=q οnerrοr=alert(1)>'))

在v-html中没有过滤xss的效果

在v-html中使用xss过滤后的效果

最后

如果你的项目是vue2+webpack+js的话,推荐使用vue-xss库,方便快捷

安装命令

bash 复制代码
npm install vue-xss

在main.js中引入并且使用

javascript 复制代码
import VueXss from 'vue-xss'
Vue.use(VueXss)

在组件中的使用

typescript 复制代码
<div v-html="$xss(content)"></div>

如果你的是阴间项目,使用的是vue2+ts+webpack的项目,那你可以参考上面的vue3+ts+vite项目的使用方法,注意vue2和vue3全局挂在自定义方法是不一样的,这里需要自行修改。

*如果有更好的解决方案欢迎评论diss我

相关推荐
Apifox9 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
麦麦大数据32 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿36 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周2 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端