nuxt中v-html指令警告(warning ‘v-html‘ directive can lead to XSS attack vue/no-v-html)
XSS是跨站脚本攻击(Cross-Site Scripting)的简称。通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript。vue官网如下描述v-html在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击]。只在可信内容上使用 v-html,永不用在用户提交的内容
·
XSS是跨站脚本攻击(Cross-Site Scripting)的简称。通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript。
vue官网如下描述v-html
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击]。只在可信内容上使用 v-html
,永不用在用户提交的内容上。
比如下面代码会在浏览器弹出2021
<template>
<section>
<div v-html='htmlString'></div>
</section>
</template>
<script>
export default {
components: {
},
data() {
return {
htmlString: '<img src="http://www.jpg" οnerrοr="alert(2021)"/>'
}
}
}
</script>
<style scoped>
</style>
解决方案如下:
1、安装
npm install vue-dompurify-html --save
2、在vueInject.js添加
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)
3、使用v-dompurify-html替代v-html
<div v-dompurify-html='htmlString'></div>
更多推荐
已为社区贡献2条内容
所有评论(0)