How can I use DOMPurify with Vue.js?

How can I use DOMPurify with Vue.js?

You can use DOMPurify in Vue.js by installing it via npm and then importing it into your component.

Can you show me a code example?

Sure! First, install DOMPurify with npm install dompurify. Then, in your component, import it and use it like this:

import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      rawHtml: '<div><script>alert("XSS")</script><p>Hello World</p></div>'
    };
  },
  computed: {
    sanitizedHtml() {
      return DOMPurify.sanitize(this.rawHtml);
    }
  }
};

This will sanitize the rawHtml before rendering it.

What if I want to allow some HTML tags?

You can specify allowed tags in the sanitize method like this:

const cleanHtml = DOMPurify.sanitize(this.rawHtml, { ALLOWED_TAGS: ['b', 'i', 'em', 'strong'] });

This will allow only the specified tags.

Is DOMPurify safe to use?

Yes, DOMPurify is widely used and considered safe for sanitizing HTML to prevent XSS attacks.