问题

有个朋友问了个问题：

为啥vue中的v-html不会执行<script>中的js代码？

比如，给v-html赋予下面这个值，虽然看到DOM中有值，但却不会弹窗。

<script>alert(/xss/)</script>

解释

可能他还不知道，这个不是vue的限制，而是html5中的规定。

html5中为了安全起见，不会执行innerHTML中插入的<script>的代码。

所以，如果想给v-html赋值<script>的代码，虽然能看到在dom中成功展示，但却不会执行<script>中的js代码的。

那v-html能否防御xss攻击？

既然v-html都不会执行<script>的js代码，那能否防御xss攻击呢？

很明显是不行的。

因为虽然不执行<script>的代码，但xss攻击无孔不入。

比如注入的内容是：

<img src='xxx' onerror="alert(/xss/)" />

那肯定会弹窗，也就是存在xss攻击。

如下截图所示：

那我还是想在v-html中的标签里面执行js代码呢？

这当然是可以的。

大概是先写段代码，创建script标签，然后append到指定标签即可。

// html
<h2 ref="testxss" v-html="testxss1"></h2>
<br/>
<input id="input"></input>
<button @click="clickBt">testinput</button>

// js
clickBt() {
  const script = document.createElement('script')
  script.innerHTML = document.getElementById('input').value
  this.$refs.testxss.append(script)
}

如下截图所示：

还是不用v-html吧

可以用v-text来渲染数据到dom中。

因为v-text本质上是通过textContext来渲染的，它不会把内容解析为html，而是文本的方式插入到指定位置。

如果一定要用v-html，那就过滤下插入的内容吧。

最后

如果觉得文章还可以，请点赞或在看，谢谢。

转载于：为什么vue v-html不执行script代码？