current position:Home>Use and configuration of Vue | XSS

Use and configuration of Vue | XSS

2021-08-23 06:03:55 Andarinz

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)
    }

copyright notice
author[Andarinz],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823060353000g.html

Random recommended