v-html有什么问题

亮学长2024-02-24 13:38

使用 v-html 指令可以将一个字符串作为 HTML 动态渲染到 Vue 模板中的某个元素上。虽然 v-html 提供了将动态 HTML 插入到模板的便利性，但过度使用 v-html 可能导致一些问题：

安全性问题 ：使用 v-html 可能存在安全风险，特别是当插入的 HTML 内容来自用户输入或未经可靠验证的来源时。恶意用户可能会注入恶意代码或引发跨站脚本攻击（XSS）等攻击，从而危害到用户的浏览器和数据安全。因此，应该避免直接将不受信任的内容通过 v-html 渲染到模板中。
可读性降低 ：使用 v-html 会导致模板的可读性下降，因为模板中的逻辑和结构被部分放在了字符串中，难以直观地理解和维护。特别是当 HTML 内容比较复杂或包含大量动态代码时，代码的可读性将进一步降低。
性能问题 ：由于 v-html 会动态生成 HTML 内容，浏览器需要对该内容进行解析和渲染，这可能会导致性能问题。相比于直接使用 Vue 的模板语法和组件来渲染内容，使用 v-html 可能会引起不必要的重渲染、布局回流等性能损耗。

综上所述，尽管 v-html 提供了方便的功能，但在使用时需要注意安全性和潜在的性能问题。应该尽量减少使用 v-html，并避免将不受信任的内容直接渲染到模板中，以确保代码的安全和可维护性。

可能会导致 xss 攻击

v-html 会替换掉标签内部的子元素

javascript 复制代码

let template = require('vue-template-compiler'); 
let r = template.compile(`<div v-html="'<span>hello</span>'"></div>`) 

// with(this){return _c('div',{domProps: {"innerHTML":_s('<span>hello</span>')}})} 
console.log(r.render);

// _c 定义在core/instance/render.js 
// _s 定义在core/instance/render-helpers/index,js
if (key === 'textContent' || key === 'innerHTML') { 
    if (vnode.children) vnode.children.length = 0 
    if (cur === oldProps[key]) continue // #6601 work around Chrome version <= 55 bug where single textNode // replaced by innerHTML/textContent retains its parentNode property 
    if (elm.childNodes.length === 1) { 
        elm.removeChild(elm.childNodes[0]) 
    } 
}