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我

相关推荐
Summer不秃1 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰6 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye12 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm14 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x41 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚42 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap2 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图