vue-i18n/no-v-html

disallow use of localization methods on v-html to prevent XSS attack

  • ⭐️ The "extends": "plugin:vue-i18n/recommended" property in a configuration file enables this rule.

This rule reports all uses of localization methods on v-html directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross-Site Scripting (XSS) attacks.

📖 Rule Details

You can be detected with this rule the following:

  • $t
  • t
  • $tc
  • tc

👎 Examples of incorrect code for this rule:

locale messages:

{
  "term": "<p>I accept xxx <a href=\"\/term\">Terms of Service Agreement</a></p>"
}

localization codes:

<template>
  <div class="app">
    <!-- ✗ BAD -->
    <p v-html="$t('term')"></p>
  </div>
</template>

👍 Examples of correct code for this rule:

locale messages:

{
  "tos": "Term of Service",
  "term": "I accept xxx {0}."
}

localization codes:

<template>
  <div class="app">
    <!-- ✗ GOOD -->
    <i18n path="term" tag="label" for="tos">
      <a :href="url" target="_blank">{{ $t('tos') }}</a>
    </i18n>
  </div>
</template>

🔇 When Not To Use It

If you are certain the content passed to v-html is trusted HTML you can disable this rule.

📚 Further reading