NuxtN
Nuxt•2y ago•
7 replies
Natetronn

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"

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>

Any suggestions would be appricited, thanks!
Was this page helpful?