避免使用 vue 的 v-html 指令
一、问题说明在日常的后台系统中经常会有输入框的业务,最近有个业务是这样子的:编辑文章信息,生成可预览的文章信息卡片。我看到代码中有个信息是这样处理的:<div v-html="title"></div>并且title是用v-model绑定的,直接用v-html插入Dom中巧的是测试人员很有专业素养,直接输入一段script,alert脚本,问题就出来了,直接弹出...
一、问题说明
在日常的后台系统中经常会有输入框的业务,最近有个业务是这样子的:编辑文章信息,生成可预览的文章信息卡片。我看到代码中有个信息是这样处理的:
<div v-html="title"></div>
并且title
是用v-model
绑定的,直接用v-html
插入Dom中
巧的是测试人员很有专业素养,直接输入一段script,alert
脚本,问题就出来了,直接弹出
二、问题思考
问题就出现在这个v-html
的绑定,根据vue
官网文档的说明:
你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
既然知道问题的原因了,就该思考怎样去避免 XSS 攻击。
三、如何解决
按照官网的说明:
原始Html
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令。
应该直接实用双大括号就可以解决问题了。
<div>{{ title }}</div>
试一试,输入<script>alert('get')</script>
结果:直接显示<script>alert('get')</script>
但是这样虽然解决了问题,但是直接显示脚本代码,丑啊。再想想解决方法。
优雅的解决方案:
<pre>
根据w3c的说明
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>
标签的一个常见应用就是用来表示计算机的源代码。
四、延伸
通过了解还存在这样一个情况
Vue的v-html指令,为什么xss没有生效?
<template>
<div v-html="msg">
</div>
</template>
<script>
export default {
data() {
return {
msg: 'msg'
}
},
mounted() {
this.msg = "插入了一个脚本:<script>console.log(1)<\/script>"; //解释了标签,但是没有打印
var script = document.createElement('script');
script.innerHTML = 'console.log(2)';
this.$el.parentElement.appendChild(script); //打印了 2
}
}
</script>
不生效的原因是在MDN文档上找到的:
尽管这看上去像 cross-site scripting 攻击,结果并不会导致什么。HTML 5 中指定不执行由 innerHTML 插入的
附上链接:
更多推荐
所有评论(0)