html攻击代码,解决v-html指令潜在的xss攻击

我们首先来看一个例子

运行之后由于src地址对应的资源找不到，会触发img标签的error事件，最终alert弹框。这便是一个最简单的xss攻击。

html指令的运行原理

v-html指令源码

// /vue/src/platforms/web/compiler/directives/html.js

export default function html (el: ASTElement, dir: ASTDirective){

if (dir.value) {

addProp(el, 'innerHTML', `_s(${dir.value})`)

}

}

复制代码

编译生成的渲染函数是

运行时在created阶段触发invokeCreateHooks函数

进而执行updateDOMProps函数，更新元素的innerHTML内容。

可以看到v-html指令最终调用的是innerHTML方法将指令的value插入到对应的元素里。这就是造成xss攻击的‘漏洞’了。当然vue官网也给出了友好提示

❝