Please refer to caniuse for more info.

Your library output contains of ?? operator, which is not support in lower version browsers.

Please consider:

1. Highlight in your README the min browser version supported if no plan to fix.
2. remove ?? usages in source code.
3. setup babel and browserslist properly to promise the backward compatibility.

<a target="_blank">test</a> => <a>test</a>
I want to keep target=" blank"

Description

There is an issue when using dompurify in Nuxt with the new bridge plugin installed.

When using the v-dompurify-html directive, there is an error:

VueDompurifyHtml version: 2.3.0

TypeError: dompurify_1.sanitize is not a function
    at updateComponent (webpack-internal:///./node_modules/vue-dompurify-html/dist/dompurify-html.js:39:32)

    at callHook$1 (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6893:7)

    at callInsert (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6827:9)

    at wrappedHook (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2441:10)

    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2052:26)

    at Object.invoker [as insert] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2384:9)

    at invokeInsertHook (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6546:28)

    at Vue.patch [as __patch__] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6706:15)

    at Vue._update (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4091:19)

    at Vue.updateComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4213:10)

Dompurify is used as a Nuxt plugin in ~/plugins/dompurify.js :

import Vue from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'

Vue.use(VueDOMPurifyHTML)

Reproduction

https://codesandbox.io/s/vue-dompurify-nuxt-bridge-problem-6pg2j?file=/pages/index.vue

Hello, i've tried to use dompurify in my nuxt ssr project, but when i getting data via api search robot doesn't see innerHTML, tag only. When i replace dompurify with v-html, all works good, There is anyway to solve this?

Hi, when trying to register VueDOMPurifyHTML in shallowMount/mount. I am getting an error saying wrapper is undefined.

TypeError: Cannot read properties of undefined (reading 'unmount')

I also tried to register the directive without registering the plugin.

In this case, the tests are launched. But the component I need - does not render content.

Approximately so looks usage in a component.
<span v-dompurify-html="t('footer.terms', [LANDING_URL, locale])" /> <span v-dompurify-html="t('footer.privacy', [LANDING_URL, locale])" />

I may be making a mistake during the plugin registration process, or this error may not be related to the plugin, but a test utils problem. But if you can suggest something - I will be grateful.

// in vue file

<template>
  <div v-dompurify-html="data"></div>
</template>

// in main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import VueDOMPurifyHTML from 'vue-dompurify-html';
const app = createApp(App, {
  data: () => ({
    rawHtml: '<span style="color: red">This should be red.</span>',
  }),
});
app.use(VueDOMPurifyHTML);
app.use(router);
app.mount('#app');

In this case, the v-dompurify-html cannot take effect

Hello,

thanks for the great plugin!

It seems that when doing static site generation (SSG) on the server-side (I suspect it also applies for the SSR use case), any HTML injected into the dom via dompurify-html will not be present in the pre-rendered HTML.

Sure, the content will be added to the DOM after the initial page visit at hydration time, but that causes multiple layout shifts as content come into the page increasing our CLS performance metric massively, not only offering a worse experience to the users but also affecting our SEO ranking. Another (possible) SEO hit comes more directly because the original HTML is missing crucial content.

FYI I've already seen this closed MR #591

Tested with vue-dompurify-html v2.5.0

Versions - dompurify

"dependencies": { "dompurify": "^2.0.0" },

I just upgrade to version 4.1.4 and got this issue

Module parse failed: Unexpected token (4:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| import { isVue3 as m } from "vue-demi";
| function p(o, i) {
>   const n = o.hooks ?? {};
|   let t;
|   for (t in n) {

I've been looking for a solution but didn't find anything useful.

Not sure if this related, but I'm using nuxt (^2.15.8)

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency eslint to v9
• chore(deps): update pnpm to v9

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Reproducible Demo:
https://codesandbox.io/s/cool-moon-3hdvjh?file=/src/App.vue

When the element is injected with v-dompurify-html, if its both siblings (before && after) are dynamic rendered (eg: v-if), somehow the purified content will be duplicated to its sibling element above.

The html string I passed in is: 0%| | 0/2 [00:00<?, ?it/s]
Loading checkpoint shards: 50%|█████ | 1/2 [00:59<00:59, 59.17s/it]
Loading checkpoint shards: 100%|██████████| 2/2 [01:10<00:00, 31.13s/it]
Loading checkpoint shards: 100%|██████████| 2/2 [01:10<00:00, 35.34s/it],

but all parts after [00:00 in the content are intercepted Lost

I am trying to write tests using vue-test-utils-next for a simple component that uses vue-dompurify-html@vue-next with vue 3.
If I add vue-dompurify-html as a plugin via the global option as described here https://next.vue-test-utils.vuejs.org/migration/#no-more-createlocalvue, I get the following error:

 TypeError: dompurify is not a function
      at Object.buildDirective (dist/js/webpack:/vue-test-utils--dompurify-html/node_modules/vue-dompurify-html/dist/dompurify-html.js:14:1)
      at Object.install (dist/js/webpack:/vue-test-utils--dompurify-html/node_modules/vue-dompurify-html/dist/index.js:7:1)
      at Object.use (dist/js/webpack:/vue-test-utils--dompurify-html/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3110:1)
      at mount (dist/js/webpack:/vue-test-utils--dompurify-html/node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.js:7840:1)
      at shallowMount (dist/js/webpack:/vue-test-utils--dompurify-html/node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.js:7911:1)
      at Context.<anonymous> (dist/js/webpack:/vue-test-utils--dompurify-html/tests/unit/example.spec.js:8:1)

Here is a simple example:

import { expect } from "chai";
import { shallowMount } from "@vue/test-utils";
import VueDOMPurifyHTML from "vue-dompurify-html";
import App from "@/App.vue";

describe("App.vue", () => {
  it("renders html", () => {
    const wrapper = shallowMount(App, {
      global: {
        plugins: [VueDOMPurifyHTML],
      },
    });
    expect(wrapper.text()).to.include("This is a test");
  });
});

And here is a full reproduction example: https://github.com/semiaddict/vue-test-utils--dompurify-html

The App runs just fine with npm run serve, but the test fails with the above error.

I have managed to get a bit closer to the source of the issue, but can't figure out how to fix it:
When run inside the test, the require statement inside node_modules/vue-dompurify-html/dist/dompurify-html.js returns an object with a defaultproperty containing the function instead of returning the function directly.

Any idea of how to solve this ?

Note: I originally submitted an issue in vue-test-utils-next, but was told to check here instead.

Although this might be related to #1174, that issue has no description!

I use last version 5.0.0, I don't know how to config in Nuxt3 defineNuxtPlugin

Hi,

I'm implementing vue-dompurify-html at version 2.5.0 and I've followed the Usage instructions and applied configurations from DomPurify in order to preserve the xlink attributes in the use tags of my svg's.

This is an example of my svg:

<svg aria-hidden="true" class="icon star"><use xlink:href="#sprite-star"/></svg>

These are my vue-dompurify-html configurations in my Vue component:

import Vue from 'vue';
import VueDOMPurifyHTML from 'vue-dompurify-html';

Vue.use(VueDOMPurifyHTML, {
    namedConfigurations: {
        svg: {
            ADD_TAGS: ['svg', 'use'],
            ADD_ATTR: ['xlink', 'xlink:href', 'href']
        }
    },
    hooks: {
        uponSanitizeElement: (node, data) => {
            if (data.tagName === 'use') {
                const link = node.getAttribute('xlink') || '';
                if (!link.startsWith('#sprite-')) {
                    return node.parentNode?.removeChild(node);
                }
            }
        }
    }
});

And this is how my html is purified:

<span v-dompurify-html:svg="productstar"/>

My configuration results in my svg being stripped from the use tag as follows:

<svg class="icon star" aria-hidden="true"></svg>

How can I preserve thie use with xlink attribute in my svg?

Currently I'm adding hooks by adding dompurify as a proper dependency and using DOMPurify.addHook. Would it make sense to more closely integrate hooks in this library somehow?

Ok stupid question.....but how to remove ALL html from an input and just leave the basic text?

For example:

<b>Hello World</b> should be Hello World.

I tried:

Vue.use(VueDOMPurifyHTML, {
 USE_PROFILES: {
   html: false
 }
})

But Still showed the b element in the user input.

When routing to the other pages, the content in <div v-dompurify-html="myContent"></div> is removed (disappeared), is there a way to prevent this behavior? (v-html does not remove the content while routing)

like vuejs/vue#7431 (comment)

<template v-dompurify-html="rawHtml"></template>

for better SEO Semantic HTML

Hello,

I implemented vue-dompurify-html as the guide recommends it. (https://www.npmjs.com/package/vue-dompurify-html)

I notified on my blog that DOMPurify was removing YouTube Embedded videos when sanitizing. I checked on their repo, and someone had already made an issue about this. (visible here)

And so, I have implemented their solution like this:

import Vue from 'vue';
import VueDOMPurifyHTML from 'vue-dompurify-html';

Vue.use(VueDOMPurifyHTML, {
  namedConfigurations: {
    videos: {
      ADD_TAGS: ["iframe"],
      ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling"],
    },
  },
  hooks: {
    uponSanitizeElement: (node, data) => {
      // allows embedded youtube videos
      if (data.tagName === 'iframe') {
        const src = node.getAttribute('src') || ''
        if (!src.startsWith('https://www.youtube.com/embed/')) {
          return node.parentNode?.removeChild(node)
        }
      }
    }
  },
});

and I use the attribute like this :

<div
      v-dompurify-html:videos='article.text'
      class='article-content' />

I imported my custom plugin like this in the nuxt.config.js file :

  plugins: [
    '~/plugins/dompurify',
  ],

And everytime I render my website, I have this error appearing :
(0 , dompurify_1.addHook) is not a function

Any idea how to fix this ?

My vue-dompurify-html version is 2.4.0

Best regards,

Hey,

I just saw that the upcoming v3 of this plugin brings vue3 support (yay!) but drops vue2 support (:cry:).

Would it be possible to keep support for vue2 if vue-demi was used?

More info about it here: https://antfu.me/posts/make-libraries-working-with-vue-2-and-3

@LeSuisse why aren't latest changes are not published on NPM?

Hello, currently I found myself making a project using VUE 2.x, the sources are analyzed by SonarQ Cloud, which told me that using "v-html" was dangerous, so it started using "v-dompurify-html", which I fixed the problem, but now it tells me that using “:href” is also dangerous. Tried with “v-dompurify-html:href” but it doesn't seem to work :(

Is there a method inside “vue-dompurify-html” that allows purifying the “:href”?

Greetings.

https://sfc.vuejs.org/#eNo9T0luwzAM/ArBS1qglno2lAL9By+pKycOogUi7RwM/z1kHEQXcTgLhiv+1uqWOWKPgYc2VQGOMtcfylOqpQms0OIIG4ytJDio9EB5KJkFLpJucDT64/uTcvB7gFoVSEz1dpJoSML/tOgA+myEpTPvkdA+QvBPMvhdFvzbjF+41+jSqborl6xFVxPTi2DCHp4b22k9wxYslXvveRzsvCu70s5eJ9fmLFOKLnLq/lq5c2waTGgRG+UNtweVTF7D

v-html="0" innerHTML returns "0"

but

DOMPurify.sanitize(0) // ""

so

v-dompurify-html="0" innerHTML returns ""

this be considered normal behavior?