Vue - style user input in confirm message (allow specific html tags)

Question

Using Vue, I want to show a confirmation modal that says something like "Are you sure you want to delete '{{itemName}}'?".

That's easy enough with a Javascript string being bound to a variable which is embedded in the template.

However, if I want to put the itemName in italics to emphasis it, the only way I can find is to use v-html, which of course would open it up to XSS.

Is there any way to style part of the string?

Answer 1

You can try to use a package like sanitize-html. Here is how I would do it:

Install:

npm install sanitize-html

main.js:

import sanitizeHTML from 'sanitize-html';
Vue.prototype.$sanitize = sanitizeHTML;

YourComponent.vue:

<div v-html="$sanitize(itemName)" />

Have a look at the README for more information about default options for allowed tags and attributes.

EDIT resp. Alternatives:

sanitize-html has a drawback of a 327 KB weight. But there are smaller packages available:

• DOMPurify (15 KB)
• js-xss (28 KB)

---

EDIT 2:

There is a package vue-dompuritfy-html which we are using in our projects now. After installing you can simply use

<div v-dompurify-html="itemName" />

Bonus: with the use of this package you cover the recommended eslint rule vue/no-v-html