Use and configuration of Vue | XSS

First you can have a look xss Definition and basic ideas of

Front end security series （ One ）： How to prevent XSS attack ？

1. install

   $ npm install xss

2. The configuration file

   // @/utils/xss.j
   const xss = require('xss')
   
   const options = {
     css: false,
     onTag(tag, html, options) {
    if (tag === 'iframe') {
      return html.replace(/javascript:?/, '')
    }
     },
     //  Avoid filtering out page styles 
     onIgnoreTagAttr(tag, name, value, isWhiteAttr) {
    //  Filter out the events on the tag 
    if (/^[^on]/.test(name)) {
      return name + '="' + xss.escapeAttrValue(value) + '"'
    }
     },
   }
   const filter = new xss.FilterXSS(options)
   
   export default filter

3. Mount the overall situation

   // @/main.js
   
   import xss from '@/utils/xss'
   
   // ...
   
   Vue.prototype.$xss = xss //  Hanging in the overall situation is to  loader This method can be used to filter global  v-html  Return the data 
   

4. Module preprocessing

   // vue.config.js
   
   // ...
   module.exports = {
     // ...
     chainWebpack: config => {
    // ...
   
    //  increase  xss  Handle 
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.directives = {
          html (node, directiveMeta) {
            const props = node.props || (node.props = [])
            props.push({
              name: 'innerHTML',
              value: `$xss.process(_s(${directiveMeta.value}))`,
            })
          },
        }
        return options
      })
     },
   }

5. Use... When submitting forms on the page

   // @/views/demo/index.vue
   
   <script>
   import xss from '@/utils/xss'
   // ...
   
   function onInput(val) {
     return xss.process(str)
   }