Vue: v-html安全性问题

本文主要是介绍Vue: v-html安全性问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、问题描述

在这里插入图片描述

可能都知道使用v-html插入富文本，存在安全隐患，比如 cross-site scripting attack（xss）。但具体什么情况下v-html会引发安全问题呢？是否内容中含有<scrpit>标签就会触发执行脚本呢？

二、问题探究

写个简单的代码来看看：

<template><div v-html="content" />
</template>
<script setup lang="ts">
const content = `<script>alert('XSS Attack')<\/script>`
</script>

在这里插入图片描述

可以看到script节点成功的插入文档，但页面并没有出现相应的弹框。通过文档可以看到v-html是通过修改innerHtml来实现的，当然也可以从源码里看到：

在这里插入图片描述

那么换成innerHTML的方式动态插入试试：

在chrome DevTools中的元素面板下选中目标节点，在控制台中输入：

const name = "<script>alert('XSS Attack')</script>";
$0.innerHTML = name;

可以发现依然没有任何作用，那是因为在HTML标准中规定使用innerHtml插入script标签时不会执行里面的任何代码：

Although this may look like a cross-site scripting attack, the result is harmless. HTML specifies that a <script> tag inserted with innerHTML should not execute.

但这并不代表这种动态插入的方式没有安全问题：

<template><div v-html="content" />
</template>
<script setup lang="ts">
const content = `<img src=x οnerrοr="alert('XSS Attack')">`
</script>

可以看到终于出现了：
在这里插入图片描述

三、解决方案

为了避免v-html潜在的安全隐患，可以使用dompurify（先安装dompurify）:

DOMPurify sanitizes HTML and prevents XSS attacks. You can feed DOMPurify with string full of dirty HTML and it will return a string (unless configured otherwise) with clean HTML. DOMPurify will strip out everything that contains dangerous HTML and thereby prevent XSS attacks and other nastiness. It’s also damn bloody fast. We use the technologies the browser provides and turn them into an XSS filter. The faster your browser, the faster DOMPurify will be.

使用方法：

<template><div v-html="content" />
</template>
<script setup lang="ts">
import DOMPurify from 'dompurify';
const content = DOMPurify.sanitize(`<img src=x οnerrοr="alert('XSS Attack')">`)
</script>