First you can have a look xss Definition and basic ideas of
Front end security series ( One ): How to prevent XSS attack ?
install
$ npm install xss
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
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
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 }) }, }
Use... When submitting forms on the page
// @/views/demo/index.vue <script> import xss from '@/utils/xss' // ... function onInput(val) { return xss.process(str) }