Does not work when used through a Vue Mixin

[brian-gonzalez]

Hello!

We have a setup where we share a mixin through multiple Vue components, and were hoping that this plugin would work with said structure.

This is a sample of the configuration:

The mixin:

import DOMPurify from "dompurify";

export default {
  props: {
    description: {
      type: String,
      default: "",
    },
  },
  computed: {
    sanitizedDescription() {
      return DOMPurify.sanitize(this.description);
    },
  },
};

A component (:

<template>
    <div v-html="sanitizedDescription"></div>
</template>

<script>
    import TextMixin from "path/to/text/mixin";

    export default {
        name: "ComponentName",
        mixins: [ TextMixin ],
    }
</script>

Using this approach we get the eslint error: "XSS potentially found: use of v-html"

Of course, adding the computed functions within each component does work as intended, but we wanted to see if it was possible to reduce repeated code.

Thanks!

[axtho]

The same applies to composeables in Vue 3.

Example:

// composeables.ts
import DOMPurify from "dompurify";

function useSanitize(html: string): string {
  return DOMPurify.sanitize(html);
}

// MyOptions.vue
<script setup>
import { useSanitize } from "@/common/wrappers";

const props = ...

</script>
<template>
  <div>
    <span v-html="useSanitize(props.text)"></span>
 </div>
</template>

This setup will cause a lint error (yarn lint). VSCode still displays it as a warning, even when I import DOMPurify and create a local function to sanitize (which removes the lint error/ warning in the console).