Package | Version |
---|---|
vue-dompurify-html |
lesuisse / vue-dompurify-html Goto Github PK
View Code? Open in Web Editor NEWSafe replacement for the v-html directive
License: MIT License
Safe replacement for the v-html directive
License: MIT License
Package | Version |
---|---|
vue-dompurify-html |
// 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, 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.
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,
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
Please refer to caniuse for more info.
Your library output contains of ??
operator, which is not support in lower version browsers.
Please consider:
??
usages in source code.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.
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.
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)
@LeSuisse why aren't latest changes are not published on NPM?
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?
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)
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 default
property 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!
<template v-dompurify-html="rawHtml"></template>
for better SEO Semantic HTML
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
.github/workflows/CI.yml
actions/checkout v4.1.7@692973e3d937129bcbf40652eb9f2f61becf3332
cachix/install-nix-action v27@ba0dd844c9180cbf77aa72a116d6fbc515d0e87b
codecov/codecov-action v4.5.0@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673
ubuntu 22.04
.github/workflows/Release.yml
actions/checkout v4.1.7@692973e3d937129bcbf40652eb9f2f61becf3332
cachix/install-nix-action v27@ba0dd844c9180cbf77aa72a116d6fbc515d0e87b
ubuntu 22.04
.github/workflows/codeql-analysis.yml
actions/checkout v4.1.7@692973e3d937129bcbf40652eb9f2f61becf3332
github/codeql-action v3.26.7@8214744c546c1e5c8f03dde8fab3a7353211988d
github/codeql-action v3.26.7@8214744c546c1e5c8f03dde8fab3a7353211988d
ubuntu 22.04
examples/nuxt3/package.json
@nuxt/devtools 1.4.2
nuxt 3.13.1
vue 3.5.5
examples/vue3/package.json
vue 3.5.5
@vitejs/plugin-vue 5.1.3
typescript 5.6.2
vite 5.4.5
vue-tsc 2.1.6
package.json
@eslint/js 9.10.0
@types/eslint__js 8.42.3
eslint 9.10.0
eslint-config-prettier 9.1.0
eslint-plugin-prettier 5.2.1
prettier 3.3.3
turbo 2.1.2
typescript 5.6.2
typescript-eslint 8.5.0
pnpm 9.10.0
packages/vue-dompurify-html/package.json
dompurify ^3.0.0
@stryker-mutator/core 8.5.0
@stryker-mutator/typescript-checker 8.5.0
@stryker-mutator/vitest-runner 8.5.0
@types/dompurify 3.0.5
@vitest/coverage-v8 2.1.1
@vue/test-utils 2.4.6
jsdom 25.0.0
typescript 5.6.2
vite 5.4.5
vitest 2.1.1
vue 3.5.5
vue ^3.0.0
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?
<a target="_blank">test</a>
=> <a>test</a>
I want to keep target=" blank"
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
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.
v-html="0"
innerHTML returns "0"
but
DOMPurify.sanitize(0) // ""
so
v-dompurify-html="0"
innerHTML returns ""
this be considered normal behavior?
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
Versions - dompurify
"dependencies": { "dompurify": "^2.0.0" },
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?
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)
https://codesandbox.io/s/vue-dompurify-nuxt-bridge-problem-6pg2j?file=/pages/index.vue
I use last version 5.0.0, I don't know how to config in Nuxt3 defineNuxtPlugin
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.