1
<div v-html="this.getNormalMessage()"></div>

We are using "vue": "^2.5.17". While running a sonarqube report we got these hotspots "Make sure bypassing Vue built-in sanitization is safe here." for the above code snippet. Using v-html is causing this hotspot in sonarqube report. getNormalMessage is function which returns htmlContent.

we tried the solutions like

<div>{{ getNormalMessage }}</div>

but these solutions are converting content into a plain text. In our case we needed it to be rendered as html. Do we have better solutions ?

kissu
  • 40,416
  • 14
  • 65
  • 133
Thalariventhan K R
  • 33
  • 5
  • Don't use `this` keyword and remove the parentheses. We're not able to help anymore because the question lacks of minimum information. Edit your question and add where `getNormalMessage` comes from. – Amini Nov 10 '22 at 05:53
  • Thanks for highlighting that, i have made changes in the question posted. Hope this conveys better information. – Thalariventhan K R Nov 10 '22 at 08:02
  • Can you also put the inner content of `getNormalMessage`? – Amini Nov 10 '22 at 08:14
  • Give a yr to that one: https://stackoverflow.com/a/69074884/8816585 – kissu Nov 10 '22 at 09:11
  • I faced this error while using vue-dompurify-html. ```ERROR Failed to compile with 1 error error in ./node_modules/vue-dompurify-html/dist/vue-dompurify-html.mjs Can't import the named export 'isVue3' from non EcmaScript module (only default export is available) ``` I also found vue-html-secure package. this works fine without any issues. https://www.npmjs.com/package/vue-html-secure – Thalariventhan K R Nov 10 '22 at 09:45
  • Install that version of the package (compatible with Vue2): https://github.com/LeSuisse/vue-dompurify-html/releases/tag/v2.5.2 It does have more downloads and is more well-known. – kissu Nov 10 '22 at 09:50

1 Answers1

1

As mentioned here, you can use vue-dompurify-html.
Be careful, only the v2.5.2 has still Vue2 support, then it's dropped.

kissu
  • 40,416
  • 14
  • 65
  • 133