Trusted Types 下 Vue 动态渲染 HTML 报错怎么解决？

___灏森提问于 2026-03-10 12:57:19 阅读 5

安全

我在项目里启用了 Trusted Types 策略，结果用 v-html 渲染用户内容时报错了：This document requires ‘TrustedHTML’ assignment。之前直接 v-html="userContent" 是能跑的，现在不行了。

试过用 DOMPurify 处理内容，但好像没和 Trusted Types 对接上。有没有在 Vue 里配合 Trusted Types 安全渲染 HTML 的正确姿势？

<template>
  <div v-html="sanitizedContent"></div>
</template>

<script>
export default {
  data() {
    return {
      userContent: '<img src=x onerror=alert(1)>'
    }
  },
  computed: {
    sanitizedContent() {
      return DOMPurify.sanitize(this.userContent);
    }
  }
}
</script>

我来解答赞 3 收藏

反馈

1 条解答

Mr-雨涵 Lv1

Trusted Types确实会打断直接插入HTML的操作，这是安全特性不是bug。Vue的v-html确实会撞上这个限制，得用点技巧绕过。

DOMPurify其实有Trusted Types的集成，只是你没配置对。这么改效率更高：

export default {

  data() {

    return {

      userContent: '<img src=x onerror=alert(1)>'

    }

  },

  computed: {

    sanitizedContent() {

      return DOMPurify.sanitize(this.userContent, {

        RETURN_TRUSTED_TYPE: true

      });

    }

  }

}

关键就是这个RETURN_TRUSTED_TYPE参数，让DOMPurify直接返回TrustedHTML对象而不是字符串，这样就能通过策略检查。

如果还不行，可能是你浏览器策略没配好。确保在meta标签或HTTP头里这么配：

<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types dompurify">

注意这里trusted-types后面要写上dompurify，告诉浏览器允许DOMPurify创建可信类型。

2026-03-10 13:00