noVueVHtml (HTML)

Language HTML

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noVueVHtml
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-v-html

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueVHtml": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow the use of Vue’s v-html directive.

v-html inserts its value into the page as real HTML. Any tags in the value become part of the page, including tags that run code in the browser. If the value contains text from users or another source you don’t control, an attacker can use it to run their own code on your page. This attack is called cross-site scripting (XSS).

To show a value as text, put it inside double curly braces ({{ }}) instead. Vue then displays any HTML tags in the value as plain text.

If you need to render HTML, first remove any dangerous tags from it with a library such as DOMPurify. Then suppress this rule with a comment that explains why the value is safe.

Examples

Invalid

1
<template>
2
  <div v-html="content"></div>
3
</template>

code-block.vue:2:8 lint/nursery/noVueVHtml ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-html directive inserts its value into the page as HTML.
  
    1 │ <template>
  > 2 │   <div v-html="content"></div>
      │        ^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ If the value contains text from users, an attacker can use it to run their own code on your page. This attack is called cross-site scripting (XSS).
  
  ℹ To show the value as text, use {{ }} instead. If you need to render HTML, remove any dangerous tags from it before using v-html.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<template>
2
  <div>{{ content }}</div>
3
</template>