Vue项目如何进行XSS防护
创作时间:
作者:
@小白创作中心
Vue项目如何进行XSS防护
引用
CSDN
1.
https://m.blog.csdn.net/weixin_43726881/article/details/139162413
XSS(跨站脚本攻击)是一种常见的Web安全漏洞,攻击者通过在网页中注入恶意脚本,从而窃取用户信息或执行其他恶意操作。在Vue项目开发中,如何有效防护XSS攻击,保障用户数据安全,是每个开发者都需要关注的重要课题。本文将详细介绍在Vue3+TS+Vite项目中进行XSS防护的具体方法,并提供Vue2项目的解决方案。
前言
在目前主推网络安全的情况下,很多开发项目都需要在上线前进行渗透测试,当符合渗透测试标准及没有安全漏洞即可正常上线,当前还会有代码审计的,这个另当别论。
如何对XSS进行防护
在很多的富文本编辑器项目中,xss漏洞已经是家常便饭了。接下来直接上修复代码。
当前使用环境为vue3+ts+vite项目,首先安装依赖
npm install xss
在main.ts中引入
import xss from 'xss'
然后全局挂在自定义方法,这里提供两种挂在方法
第一种
//挂在全局xss过滤器方法
app.config.globalProperties.$xss = (html: any) => {
return xss(html)
}
在组件中的使用
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)>'))
第二种
const $xss = (html: any): any => {
return xss(html)
}
// 使用 provide 提供 $xss 方法
app.provide('$xss', $xss)
组件中的使用
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过滤后的效果
CSS样式丢失处理
很不巧过滤完css出现了css样式代码丢失,我应该如何解决,这种情况一般都是我们的过滤太严格了,我们添加一些自己允许的白名单配置即可。出现下图状况
修复方案
const options: any = {
onIgnoreTagAttr: function(tag: any, name: any, value: any, isWhiteAttr: any) {
if (name.substr(0, 2) === 'on') {
return '' // 过滤掉所有的事件监听器属性,例如 onclick
}
// 如果属性是 style,并且不在白名单内,仍然允许它通过
if (name === 'style' || name === 'iframe') {
return `${name}="${value}"` // 直接返回 style 属性
}
},
onTag: (tag: any, html: any) => {
if (tag === 'style') {
// 当遇到 style 标签时,直接返回,不做处理
return html
}
if (tag === 'iframe') {
// 从 HTML 字符串中解析出 src 属性的值
const srcMatch = html.match(/src="([^"]+)"/)
const src = srcMatch ? srcMatch[1] : ''
// 验证 src 是否来自可信来源
if (src.startsWith('http://www.iot-wiki.cn')) {
return html
} else {
// 如果不是可信来源,移除 iframe
return ''
}
}
},
stripIgnoreTag: true, // 去除不在白名单上的标签
stripIgnoreTagBody: ['script'],// 去除不在白名单上的标签及其内容
css: false
}
const $xss = (html: any): any => {
return xss(html, options)
}
// 使用 provide 提供 $xss 方法
app.provide('$xss', $xss)
最后
如果你的项目是vue2+webpack+js的话,推荐使用vue-xss库,方便快捷
安装命令
npm install vue-xss
在main.js中引入并且使用
import VueXss from 'vue-xss'
Vue.use(VueXss)
在组件中的使用
<div v-html="$xss(content)"></div>
如果你的是阴间项目,使用的是vue2+ts+webpack的项目,那你可以参考上面的vue3+ts+vite项目的使用方法,注意vue2和vue3全局挂在自定义方法是不一样的,这里需要自行修改。
热门推荐
探索表观遗传修饰与细胞老化的奥秘:深入理解生物老化机制
什么是滚弯管?
怎样选择合适的建筑油漆
去年买的笔记本电脑现在能卖多少钱?如何评估其价值?
欧洲史笔记162 :为什么查理五世未能及时制止宗教改革?
养猫和养狗对主人生活的影响
2024年深圳小学入学学位申请所需材料详解(深户+非深户)
私家车报废新规实施,里程达60万公里即强制报废,车主如何应对?
延长电池寿命的关键?工程师解开数十年来的锂离子电池谜团
康熙皇十三子胤祥的后代为何卷入乾隆政变阴谋?
用"峰"取名字的寓意:刚强、远大、坚韧与孝顺
行政服务中心周末上班吗?
AI: GPT与BERT两大自然语言处理模型的比较
如何摆脱学习时对手机的依赖?
如何用GPU算力卡P100玩黑神话悟空?
怎么解释赔率?如何理解赔率的含义及作用?赔率的计算方法有哪些?
AI“魔改”泛滥 短视频伤不起
欠银行500万还不起怎么办?全方位应对指南
《素书》的思想内容与观点
石榴树的最佳土壤栽培方式(选择合适的土壤,助力石榴树生长)
聚合物锂电池的优缺点分析
鱼的特征和生活环境——探索水下生物的奥秘
生物多样性危机:四分之一淡水动物、四成树种面临灭绝风险
回顾:研究糖尿病60年,名中医祝谌予总结控糖方法,值得借鉴
2024年江苏事业单位统考面试考情全解析
建国产大飞机供应链,我国将自研航发反推,优化LEAP1C发动机反推
《7岁~18岁儿童青少年血压偏高筛查界值》发布
宝宝用油宣传陷阱:哪种油更适合宝宝?贵的一定是对的么?
唇部护理看这一篇就够了,深唇纹、暗沉、干裂看过来,超全护唇攻略!
80岁老人饮食营养搭配指南