vue核心面试题:vue中v-html会导致哪些问题
一、理解:1.可能会导致 xss 攻击。比如用v-html一定要保证你的内容是可以依赖的,例:<input type="text" v-model="msg"/><div v-html="msg"></div>// 因为用户输入的信息不可信,这样输入什么就会放入什么,v-html就相当于一个innerHTML2.v-html 会替换掉标签内部的子元素二、原理le
·
一、理解:
1.可能会导致 xss 攻击。比如用v-html一定要保证你的内容是可以依赖的,例:
<input type="text" v-model="msg"/>
<div v-html="msg"></div>
// 因为用户输入的信息不可信,这样输入什么就会放入什么,v-html就相当于一个innerHTML
2.v-html 会替换掉标签内部的子元素
二、原理
let template = require('vue-template-compiler');
let r = template.compile(`<div v-html="'<span>hello</span>'"></div>`)
// 编译后,domProps就是一个innerHTML
with(this){
return _c('div',{domProps: {"innerHTML":_s('<span>hello</span>')}})
}
// _c 定义在core/instance/render.js
// _s 定义在core/instance/render-helpers/index,js
三、源码
文件位置:src/platforms/web/runtiem/models/dom-props.js
function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {
for (key in props) {
cur = props[key]
// 如果key是textContent或者innerHTML是会将vnode的子节点都变成空
if (key === 'textContent' || key === 'innerHTML') {
if (vnode.children) vnode.children.length = 0
if (cur === oldProps[key]) continue
if (elm.childNodes.length === 1) {
elm.removeChild(elm.childNodes[0])
}
}
if (key === 'value' && elm.tagName !== 'PROGRESS') {
} else if (key === 'innerHTML' && isSVG(elm.tagName) && isUndef(elm.innerHTML)) {
} else if (
cur !== oldProps[key]
) {
try {
elm[key] = cur // 最终elm的key会被这个值覆盖
} catch (e) {}
}
}
}
更多推荐
已为社区贡献13条内容
所有评论(0)