Nuxt•3mo ago

Nuxt i18n module v-html xss warning

"@nuxtjs/i18n": "^8.3.1",
"nuxt": "^3.11.2",
"vue": "^3.4.21",
"vue-router": "^4.3.0"

"@nuxtjs/i18n": "^8.3.1",
"nuxt": "^3.11.2",
"vue": "^3.4.21",
"vue-router": "^4.3.0"

Hello, I'm trying to understand the XSS warning I get when using v-html directive for html with i18n. I'm sure it's simple, but I think I'm just missing something. I have content coming from a Headless CMS and some of it is HTML.
If I use <div v-html="$t('rawHtml')"></div> it renders fine, but I get the xss warning:

WARN [intlify] Detected HTML in '<p>This is the content </p>' message. Recommend not using HTML messages to avoid XSS.

The vue i18n docs suggested here in Html Message Syntax to use Component Interpolation instead. If I use the following, I just get the the html rendered as a string and I see the tags:

  <i18n-t keypath="rawHtml" tag="div">
    <template>
      <span></span>
    </template>
  </i18n-t>

  <i18n-t keypath="rawHtml" tag="div">
    <template>
      <span></span>
    </template>
  </i18n-t>

Any suggestions would be appricited, thanks!

6 Replies

Kérunix•3mo ago

The XSS warning is here just as, well, a warning. It signals you that you are injecting raw HTML into your page, which can lead to an XSS attack if the content comes from an untrusted source (ie. user generated content). If you are the one generating the content (from a CMS or even by storing raw html strings in a DB), this should not be an issue. As stated in the docs, "Only use HTML interpolation on trusted content and never on user-provided content." and "If the message contains HTML, Vue I18n outputs a warning to console when development mode" so this warning won't be logged in production.

Natetronn•3mo ago

Thanks @Kérunix! I did read all that. I guess I was probably over thinking it lol.

Natetronn•3mo ago

Natetronn•3mo ago

The part where "We recommend using Component Interpolation" made me think there was an alternative and I went off from there.

Kérunix•3mo ago

Well technically there is an alternative but that is only useful if you want to interpolate some html content in a string that lives in your translations files. The example they give in the docs with an anchor tag inserted in some text is exactly the kind of use case for that feature. If your content is only html then v-html with trusted content is the way to go

Natetronn•3mo ago

Yeah, something wasn't quite adding up (the recommendation), since I wasn't doing any interpolation between two messages and that's why I was confused. Anyway, makes sense now. I appreciate your help, thanks again!

Gaming

Programming

Nuxt i18n module v-html xss warning