【Vue】Vue的v-html指令，为什么xss没有生效

Z时代
2024-01-10
分类：技术分享

前后端都没有做转码，后台返回<script>xxx</script>的字符串，前端直接用v-html渲染，然而既没有如v-text一样渲染出文本，又没有执行脚本里面的方法，简单demo如下
【Vue】Vue的v-html指令，为什么xss没有生效

代码如下：

<template>
<div v-html="msg">
</div>
</template>
<script>
export default {
data() {
return {
msg: 'message'
}
},
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>