Nuxt•7mo ago

Sanitize HTML on SSR

Hello, im trying to create a directive which sanitze the html code as a replacement for v-html. This is working fine on client side but not on server side. Is it possible to archive this on SSR to prevent layout shifts?

import DOMPurify from 'isomorphic-dompurify';

import type { DirectiveBinding } from 'vue';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.directive(
    'dompurify-html',
    (el: HTMLElement, binding: DirectiveBinding<string>) => {
      el.innerHTML = DOMPurify.sanitize(binding.value, {
        USE_PROFILES: { html: true },
      });
    }
  );
});

import DOMPurify from 'isomorphic-dompurify';

import type { DirectiveBinding } from 'vue';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.directive(
    'dompurify-html',
    (el: HTMLElement, binding: DirectiveBinding<string>) => {
      el.innerHTML = DOMPurify.sanitize(binding.value, {
        USE_PROFILES: { html: true },
      });
    }
  );
});

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Sanitize HTML on SSR