Alternative to v-html in Vue.js: Using DOM manipulation as a

Question

Alternative to v-html in Vue.js: Using DOM manipulation as a

Coming from my background in React with JSX, I am used to setting HTML using code like

var test = <div>i am a div</div>

It is common practice for me. Although I know that the same result can be achieved using v-html in Vue, I was curious about whether it is the best and safest approach when looking at the following code:

This is a Vue component

<template src="./templates/General.html"></template>

<script>
  export default {
      name: 'guide-general',
      data: function() {
          return {
              guides: [
                  {
                      title: "first",
                      description: "First description"
                  },
                  {
                      title: "second",
                      description: "Second description"
                  },
                  {
                      title: "third",
                      description: `<ul>
                        <li>
                            test
                        </li>
                      </ul>`
                  }
              ]
          }
      },
      methods: {

      }
  }
</script>

<style scoped>
</style>

And here is the HTML template

<article>
    <div v-for="guide in guides">
        <h4>{{ guide.title }}</h4>
        <div v-html="guide.description">
        </div>
    </div>
</article>

javascript vue.js vuejs2

Answer 1

Answer №1

When incorporating HTML rendering from a vue property, it is necessary to utilize the v-html directive. In cases where users can alter the source of the HTML, precautions must be taken to address potential XSS vulnerabilities by sanitizing inputs before sending data back to the server (consider using a trusted external library for this purpose). However, if user modifications are not a factor, then there should be no significant security risks associated with employing v-html.

Allowing users to edit data exposes your application to security threats, so it's crucial to anticipate and mitigate these risks accordingly.

Latest Update: June 2021

To clarify, when static HTML rendering suffices and only conditional display of predetermined templates is needed, you can implement conditional rendering within your Vue template as shown below:

<script>
    export default {
      name: 'guide-general',
      data: function() {
          return {
              guides: [
                  {
                      title: "first",
                      description: "First description",
                      as_list: false
                  },
                  {
                      title: "second",
                      description: "second description",
                      as_list: false
                  },
                  {
                      title: "third",
                      description: "test",
                      as_list: true
                  }
              ]
          }
      },
      methods: {

      }
  }
</script>

<article>
    <div v-for="guide in guides">
        <h4>{{ guide.title }}</h4>
        <div v-if="guide.as_list">
            <ul>
                <li>{{guide.description}}</li>
            </ul>
        </div>
        <div v-else>{{guide.description}}</div>
    </div>
</article>

In essence, if dynamic HTML rendering is unnecessary and only conditional HTML display is required, leverage v-if along with appropriately structured data to facilitate correct conditional rendering. Alternatively, consider structuring JSON data to dynamically generate predefined components using

<component :is="component.name">

(note that this approach is intricate and not fully covered in this response).

Answer 2

When incorporating HTML rendering from a vue property, it is necessary to utilize the v-html directive. In cases where users can alter the source of the HTML, precautions must be taken to address potential XSS vulnerabilities by sanitizing inputs before sending data back to the server (consider using a trusted external library for this purpose). However, if user modifications are not a factor, then there should be no significant security risks associated with employing v-html.

Allowing users to edit data exposes your application to security threats, so it's crucial to anticipate and mitigate these risks accordingly.

Latest Update: June 2021

To clarify, when static HTML rendering suffices and only conditional display of predetermined templates is needed, you can implement conditional rendering within your Vue template as shown below:

<script>
    export default {
      name: 'guide-general',
      data: function() {
          return {
              guides: [
                  {
                      title: "first",
                      description: "First description",
                      as_list: false
                  },
                  {
                      title: "second",
                      description: "second description",
                      as_list: false
                  },
                  {
                      title: "third",
                      description: "test",
                      as_list: true
                  }
              ]
          }
      },
      methods: {

      }
  }
</script>

<article>
    <div v-for="guide in guides">
        <h4>{{ guide.title }}</h4>
        <div v-if="guide.as_list">
            <ul>
                <li>{{guide.description}}</li>
            </ul>
        </div>
        <div v-else>{{guide.description}}</div>
    </div>
</article>

In essence, if dynamic HTML rendering is unnecessary and only conditional HTML display is required, leverage v-if along with appropriately structured data to facilitate correct conditional rendering. Alternatively, consider structuring JSON data to dynamically generate predefined components using

<component :is="component.name">

(note that this approach is intricate and not fully covered in this response).

Answer 3

Answer №2

For those seeking a method to display HTML content restricted to specific tags, one approach is to parse the HTML string and utilize render functions to dynamically construct the template. By adopting this method, you can develop your own secure HTML renderer and eliminate the need for using v-html and external libraries. Below is a brief example illustrating how such an HTML view component could be structured:

HtmlView.vue

<script>

import { h } from "vue";

export default {
  props: {
    html: {
      type: String,
      required: true,
    },
    tags: {
      /** @type {import("vue").PropType<String[]>} */
      type: Array,
      default: () => ["b"]
    },
  },
  setup(props) {
    const html = parseHTML(props.html);

    // return the render function
    return () => {
      const output = [];
      html.childNodes.forEach(childNode => {
        output.push(renderNode(childNode, props.tags));
      });
      if (output.length == 1) {
        return output[0];
      } else if (output.length == 0) {
        return "";
      }
      return output;
    };
  }
};

const parseHTML = (html) => {
  var template = document.createElement("template");
  template.innerHTML = html;
  return template.content;
};

/**
 *
 * @param {Node} node
 * @param {String[]} tags
 */
const renderNode = (node, tags) => {
  const nodeType = node.nodeType;
  if (nodeType == 1) {
    const nodeName = node.nodeName.toLocaleLowerCase();
    if (tags.includes(nodeName)) {
      const children = [];
      node.childNodes.forEach(childNode => {
        children.push(renderNode(childNode, tags));
      });
      return h(nodeName, children);
    }
  }
  return node.textContent;
};

</script>

The tags property of the component restricts the supported tags. In this example, only the <b> tag is supported by default.

It's worth noting that the provided sample will exclusively render DOM Nodes of type 1 (ELEMENT_NODE) and will exclude any attributes of the node. However, it can be easily expanded to include attributes if necessary.

I have included a functional demo here.

Answer 4

For those seeking a method to display HTML content restricted to specific tags, one approach is to parse the HTML string and utilize render functions to dynamically construct the template. By adopting this method, you can develop your own secure HTML renderer and eliminate the need for using v-html and external libraries. Below is a brief example illustrating how such an HTML view component could be structured:

HtmlView.vue

<script>

import { h } from "vue";

export default {
  props: {
    html: {
      type: String,
      required: true,
    },
    tags: {
      /** @type {import("vue").PropType<String[]>} */
      type: Array,
      default: () => ["b"]
    },
  },
  setup(props) {
    const html = parseHTML(props.html);

    // return the render function
    return () => {
      const output = [];
      html.childNodes.forEach(childNode => {
        output.push(renderNode(childNode, props.tags));
      });
      if (output.length == 1) {
        return output[0];
      } else if (output.length == 0) {
        return "";
      }
      return output;
    };
  }
};

const parseHTML = (html) => {
  var template = document.createElement("template");
  template.innerHTML = html;
  return template.content;
};

/**
 *
 * @param {Node} node
 * @param {String[]} tags
 */
const renderNode = (node, tags) => {
  const nodeType = node.nodeType;
  if (nodeType == 1) {
    const nodeName = node.nodeName.toLocaleLowerCase();
    if (tags.includes(nodeName)) {
      const children = [];
      node.childNodes.forEach(childNode => {
        children.push(renderNode(childNode, tags));
      });
      return h(nodeName, children);
    }
  }
  return node.textContent;
};

</script>

The tags property of the component restricts the supported tags. In this example, only the <b> tag is supported by default.

It's worth noting that the provided sample will exclusively render DOM Nodes of type 1 (ELEMENT_NODE) and will exclude any attributes of the node. However, it can be easily expanded to include attributes if necessary.

I have included a functional demo here.

Alternative to v-html in Vue.js: Using DOM manipulation as a

Answer №1

Answer №2

Similar questions

Having trouble running nodemon on my Windows 10 machine

Codeigniter dropdown sending incorrect value to controller

JavaScript Promise Synchronization

How can I pass function arguments dynamically to a nested function in Node.js?

Leveraging jQuery for validating a value by comparing it to another input value

Swapping out the entire vue.js container

The event listener function is not functioning properly on images generated by JavaScript

Exploring the parent of an HTML element / Finding a child element with unique content

Tips for preventing Django template from showing up prior to VueJS rendering

Automated Form Submission using Selenium

Unable to bring in the Firebase Firestore Colletion

I struggled to connect my Vuex actions with a component

Obtaining NodeJS from a mysterious subdirectory

What is the best approach to modify the model value when a controller function is triggered?

Insert multiple text box values as a new entry in an SQL database

What is the best way to eliminate an iframe from inside itself using javascript?

When using the JavaScript .push method, existing array values are overwritten as the new values are duplicated

Designing Angular web elements within Angular

Turning off the AngularJS dropdown multiselect functionality

How can we ensure that React state remains unaltered when modifying an array set to state?