处理v-html的潜在XSS风险

实际开发中,在使用v-html的时,需要注意绑定的数据中可能包含点击事件,页面dom加载完毕后会触发点击事件,可以使用XSS函数阻止点击事件触发

具体如下
没有进行防止xss攻击的例子

<p v-html="test"></p>
 
export default {
  data () {
    return {
      test: `<a οnclick='alert("xss攻击")'>链接</a>`
    }
}

结果，js事件被执行，弹出弹框，我们要杜绝这种情况，保留a标签，拦截onclick事件

解决办法
使用一个xss的npm包来过滤xss攻击代码，给指令的value包上一层xss函数

npm install xss --save

import xss from 'xss'

<p v-html="$xss(test)"></p>
 
import xss from 'xss'
export default {
  data () {
    return {
      test: `<a οnclick='alert("xss攻击")'>链接</a>`
    }
}
 
Object.defineProperty(Vue.prototype, '$xss', {
  value: xss
})

参考文章
https://blog.csdn.net/lj1530562965/article/details/108790220

注意的是
是安装的过程会出现以下问题

D:\work\workspace\yushanbank-com\yushan>npm install xss --save
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://registry.npmjs.org/bindings failed, reason: connect ETIMEDOUT 104.16.19.35:443
npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: request to https://registry.npmjs.org/fsevents/-/fsevents-1.2.11.tgz failed, reason: connect ECONNABORTED 104.16.19.35:443

+ xss@1.0.8
added 2 packages from 2 contributors and audited 1421 packages in 1883.87s

37 packages are looking for funding
  run `npm fund` for details

found 1119 vulnerabilities (1090 low, 7 moderate, 22 high)
  run `npm audit fix` to fix them, or `npm audit` for details

按提示运行 npm audit fix
出现以下报错

D:\work\workspace\yushanbank-com\yushan>npm audit fix
npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/-/npm/v1/security/audits failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-10-13T07_02_55_933Z-debug.log

运行 npm audit
也同样出现以下报错

D:\work\workspace\yushanbank-com\yushan>npm audit
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/-/npm/v1/security/audits failed, reason: connect ETIMEDOUT 104.16.24.35:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-10-13T07_23_26_929Z-debug.log

通过网上查询 npm ERR! code ETIMEDOUT
发现这是使用 npm install 安装组件的报错
解决方法：
执行下面两行代码，清除代理和缓存，问题解决

npm config set proxy false
npm cache clean --force
// npm cache clean 使用会报错 , 需要加上 --force

D:\work\workspace\yushanbank-com\yushan>npm config set proxy false

D:\work\workspace\yushanbank-com\yushan>npm cache clean
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache
verify' instead. On the other hand, if you're debugging an issue with the installer, you can use `npm install --cache /tmp/empty-cache` to use a temporary cache instead of nuking the actual one.
npm ERR!
npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-10-13T07_32_07_742Z-debug.log

D:\work\workspace\yushanbank-com\yushan>npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.

参考文章
https://www.w3h5.com/post/518.html
https://segmentfault.com/q/1010000019921386/a-1020000019922882

运行结果出现

D:\work\workspace\yushanbank-com\yushan>npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.

可以了
此时,项目可以运行npm run serve重新启动