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