使用vue-dompurify-html防御xss攻击

使用vue-dompurify-html防御xss攻击

背景

之前的防御xss攻击的前端方案太low,影响到了现网用户的体验,但是富文本渲染势不可挡,v-html确实又会被xss攻击,这时vue-dompurify-html就来了!!

使用

我们这里还是以vue2为例

npm install vue-dompurify-html
// 在main.js中引入
import Vue from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'

Vue.use(VueDOMPurifyHTML)

// 在vue页面中使用,就可以达到xss防御的效果
 <div v-dompurify-html="rawHtml"></div>

坑&解决方案

信心满满给业务爸爸测试,好,a标签的target="_blank"属性给干没了,这可是很重要的属性,上官网看看

https://www.npmjs.***/package/vue-dompurify-html/v/2.6.0


you can also config,那就来config一下。

重写属性配置

https://github.***/cure53/DOMPurify#can-i-configure-dompurify

Vue.use(VueDOMPurifyHTML, {
  default: {
    ALLOWED_ATTR: ['target','href']
  }
});

但是a标签的其他属性全被过滤了,原来这就是覆盖默认配置!那可不行

增加hooks

在处理属性后,如果有target属性的节点,统统加上target=blank

vue.use(VueDOMPurifyHTML, {
  hooks: {
    afterSanitizeAttributes: (currentNode) => {
      if('target' in currentNode){
	  currentNode.setAttribute("target","_blank");
	  }
    }   
  }
});

还有更多hook可以添加

beforeSanitizeElements
uponSanitizeElement (No 's' - called for every element)
afterSanitizeElements
beforeSanitizeAttributes
uponSanitizeAttribute
afterSanitizeAttributes
beforeSanitizeShadowDOM
uponSanitizeShadowNode
afterSanitizeShadowDOM

后续

看文档,还有更多的方法可以使用,主要结合npm install dompurify

转载请说明出处内容投诉
CSS教程_站长资源网 » 使用vue-dompurify-html防御xss攻击

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买