• Github地址: https://github.com/leizongmin/js-xss
• 项目主页：http://jsxss.com
• 中文文档：https://jsxss.com/zh/
• 在线测试: https://jsxss.com/zh/try.html

1. 安装

推荐使用npm安装:

npm i vue-xss

2. 使用

// main.js
import VueXss from 'vue-xss'

Vue.use(VueXss)

<!-- *.vue -->
<div v-html="$xss(content)"></div>

/** *.vue中的js */
this.$xss(content)

3. 自定义配置项

支持 js-xss 的自定义规则，可通过 options 对象形式传入实例

// mani.js
var options = {
  // 默认白名单参考 xss.whiteList
  whiteList: {
    a: ['href', 'style'],
    img: ['src', 'alt'],
    ...
  },
  stripIgnoreTag: true, // 去掉不在白名单上的标签   true：去掉不在白名单上的标签
  stripIgnoreTagBody: ['script', 'style'] // 去掉不在白名单上的标签及标签体
  // ['tag1', 'tag2']：仅去掉指定的不在白名单上的标签
  onTagAttr: function () {
    // todo
  },
  ...
}

import VueXss from 'vue-xss'
Vue.use(VueXss, options)

<!-- *.vue -->
<template>
  <div v-html="$xss(content)"></div>
  <!-- 过滤后输出：<iframe></iframe> -->
<template>

<script>
export default {
  data () {
    return{
      content: '<iframe οnlοad=alert("XSS-TEST")></iframe>'
    }
  },
  ...
}
</script>

4. 源码

vue-xss底层依赖xss，源码如下：

import xss from 'xss'

export default {
  install: function (Vue, options = {}) {
    Object.defineProperty(Vue.prototype, '$xss', {
      value: function (html) {
        return xss(html, options)
      }
    })
  }
}

5. 缺陷分析

vue-xss设置的白名单属于全局设置，对所有xss过滤都生效，有时我们需要在不同的地方使用不同的过滤规则，比如，在有些地方只需要显示dev、span、p、label、a、em等文本型标签，而另一些地方还需要显示table、img、ul、dl等标签，vue-xss就显得有些力不从心了，可以直接使用xss来解决这一问题，xss可以在使用的地方独立设置白名单等。

npm install xss

import xss from 'xss'

xss(content, options)

不过在vue2中，v-html中不能使用filter，所以只能使用其它方式了，比如computed。