Executing Javascript dynamically in VueJS: Learn how to run code from a string efficiently

Question

Executing Javascript dynamically in VueJS: Learn how to run code from a string efficiently

Currently, I am developing a website with VueJS that enables selected users to upload scripts for automatic execution upon page load. For instance, here is an example of the type of script a user may input:

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.5/howler.js"></script>
<script>
    var sound = new howler.Howl({
        src: ['./sample.mp3']
    )}.play();
</script>

After fetching this text from the API backend, it is stored in a string. However, I have encountered difficulty in getting it to execute properly. Is there a feature within VueJS that can handle executing JavaScript code within strings automatically?

For your information, below is a snippet of my code:

var temp_arr = utils.preprocess(vm.chapterInfo.Content)
vm.display = temp_arr[0]
vm.control_script = console.log(temp_arr[1])

// Unfortunately, none of the methods below have been successful
eval(vm.control_script)
document.getElementsByTagName("head")[0].appendChild(control_script)

javascript vue.js

Answer 1

Answer №1

The issue at hand is not specific to Vue, but rather a JavaScript one.

I'm assuming you are already aware of the security risks associated with allowing users to run JavaScript; it's generally not recommended. While sites like JSFiddle manage to do it effectively, ensuring safety would require a significant amount of effort and knowledge. Therefore, if you're not completely confident in your abilities, heed the advice of @WaldemarIce and proceed with caution!

With that warning aside, here are the steps you need to follow to make this work:

1) Load the external scripts:

loadScripts() {
    return new Promise(resolve => {

      let scriptEl = document.createElement("script");
      scriptEl.src = "https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.5/howler.js";
      scriptEl.type = "text/javascript";

      // Attach script to head
      document.getElementsByTagName("head")[0].appendChild(scriptEl); 
      // Wait for tag to load before promise is resolved     
      scriptEl.addEventListener('load',() => {
        resolve();
      });
    });
  }

In this snippet, I am simply inserting the external script into the document's header and creating a load event listener that resolves the Promise once the script has loaded.

2) With the external script now loaded, we can execute the remaining script. You'll need to remove any script tags, which can be done like so:

executeScript() {
  // remove script tags from string (this has been declared globally)
  let script = string.replace(/<\/?script>/g,"")
  eval(script)
}

From a Vue standpoint, you can then execute this within the created hook:

created() {
  this.loadScripts().then(() => {
    this.executeScript();
  });
},

I'll let you handle extracting the external scripts you wish to load from user input. For reference, here's a JSFiddle: https://jsfiddle.net/49dq563d/

Answer 2

The issue at hand is not specific to Vue, but rather a JavaScript one.

I'm assuming you are already aware of the security risks associated with allowing users to run JavaScript; it's generally not recommended. While sites like JSFiddle manage to do it effectively, ensuring safety would require a significant amount of effort and knowledge. Therefore, if you're not completely confident in your abilities, heed the advice of @WaldemarIce and proceed with caution!

With that warning aside, here are the steps you need to follow to make this work:

1) Load the external scripts:

loadScripts() {
    return new Promise(resolve => {

      let scriptEl = document.createElement("script");
      scriptEl.src = "https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.5/howler.js";
      scriptEl.type = "text/javascript";

      // Attach script to head
      document.getElementsByTagName("head")[0].appendChild(scriptEl); 
      // Wait for tag to load before promise is resolved     
      scriptEl.addEventListener('load',() => {
        resolve();
      });
    });
  }

In this snippet, I am simply inserting the external script into the document's header and creating a load event listener that resolves the Promise once the script has loaded.

2) With the external script now loaded, we can execute the remaining script. You'll need to remove any script tags, which can be done like so:

executeScript() {
  // remove script tags from string (this has been declared globally)
  let script = string.replace(/<\/?script>/g,"")
  eval(script)
}

From a Vue standpoint, you can then execute this within the created hook:

created() {
  this.loadScripts().then(() => {
    this.executeScript();
  });
},

I'll let you handle extracting the external scripts you wish to load from user input. For reference, here's a JSFiddle: https://jsfiddle.net/49dq563d/

Answer 3

Answer №2

Upon encountering this issue, I found it necessary to build upon the solution provided by @craig_h. The following example demonstrates how full embed code can be transmitted as a string (inclusive of HTML elements, scripts, and inline JS). This implementation leverages DOMParser.

<div ref="htmlDump"></div>

<script>
import Vue from "vue";
export default {
  ...
  methods: {
    cloneAttributes(element, sourceNode) {
      let attr;
      let attributes = Array.prototype.slice.call(sourceNode.attributes);
      while(attr = attributes.pop()) {
        element.setAttribute(attr.nodeName, attr.nodeValue);
      }
    }
  },
  mounted(){
    if(this.embedString && this.embedString.length > 0)
    {
      //Parse the code given from the API into a new DOM so we can easily manipulate it
      var parser = new DOMParser();
      var htmlDoc = parser.parseFromString(this.embedString, 'text/html');
      //Get the contents of the new DOM body and loop through.
      //We want to add all HTML elements to the page and run / load all JS
      var kids = [...htmlDoc.body.children];
      let len = kids.length;
      for (var i = 0; i < len; i++) {
        var item = kids[i];
        if(item.tagName == "SCRIPT")
        {
          //If we have a 'src' attribute then we're loading in a script
          if(item.hasAttribute('src'))
          {
            //Create a new element within the current doc to trigger the script load
            let scriptEl = document.createElement("script");
            //Copy all attributes from the source element to the new one
            this.cloneAttributes(scriptEl, item);
            //Attach script to the DOM to trigger it to load
            this.$refs.htmlDump.appendChild(scriptEl);
          } else {
            //if we don't have a 'src' attribute then we have some code to run
            eval(item.innerText);
          }
        } else{
          this.$refs.htmlDump.appendChild(item);
        }
      }
    }
  }
  ...
}
</script>

Answer 4

Upon encountering this issue, I found it necessary to build upon the solution provided by @craig_h. The following example demonstrates how full embed code can be transmitted as a string (inclusive of HTML elements, scripts, and inline JS). This implementation leverages DOMParser.

<div ref="htmlDump"></div>

<script>
import Vue from "vue";
export default {
  ...
  methods: {
    cloneAttributes(element, sourceNode) {
      let attr;
      let attributes = Array.prototype.slice.call(sourceNode.attributes);
      while(attr = attributes.pop()) {
        element.setAttribute(attr.nodeName, attr.nodeValue);
      }
    }
  },
  mounted(){
    if(this.embedString && this.embedString.length > 0)
    {
      //Parse the code given from the API into a new DOM so we can easily manipulate it
      var parser = new DOMParser();
      var htmlDoc = parser.parseFromString(this.embedString, 'text/html');
      //Get the contents of the new DOM body and loop through.
      //We want to add all HTML elements to the page and run / load all JS
      var kids = [...htmlDoc.body.children];
      let len = kids.length;
      for (var i = 0; i < len; i++) {
        var item = kids[i];
        if(item.tagName == "SCRIPT")
        {
          //If we have a 'src' attribute then we're loading in a script
          if(item.hasAttribute('src'))
          {
            //Create a new element within the current doc to trigger the script load
            let scriptEl = document.createElement("script");
            //Copy all attributes from the source element to the new one
            this.cloneAttributes(scriptEl, item);
            //Attach script to the DOM to trigger it to load
            this.$refs.htmlDump.appendChild(scriptEl);
          } else {
            //if we don't have a 'src' attribute then we have some code to run
            eval(item.innerText);
          }
        } else{
          this.$refs.htmlDump.appendChild(item);
        }
      }
    }
  }
  ...
}
</script>

Executing Javascript dynamically in VueJS: Learn how to run code from a string efficiently

Answer №1

Answer №2

Similar questions

What is the best way to remove current markers on google maps?

What are the methods to alter validation for a Formfield based on the input from other Formfields?

Working with Multidimensional Arrays in VueJS

Struggling with sending data to a modal in AngularJS?

Calculating JS functions before images are loaded

The counter variable does not function properly within a setInterval function

A dynamic AJAX menu showcasing content in a dropdown format, away from the conventional table layout

Insert a division into the table following every row

I am facing an issue where reducing the size of the renderer is causing my click events to be offset. What steps can I

What is the best way to add user login information to the request pipeline in Express.js?

javascript: revealing the identity of a click event handler

Managing Dependencies in Redux: Ensuring Proper Updates for Interconnected Resources

Vue has issued a warning stating that the type check for the "eventKey" prop has failed. The expected type was a String or Number, but an Array was provided instead. Additionally, it is advised to

Maintaining the Readability of Promise Chains

What is the best way to transform data from a single form into a JSON array?

JavaScript example: Defining a variable using bitwise OR operator for encoding purposes

Issue with onClick event not firing when using option tag in React

Managing the Response from an Ajax Call

How can a Vue component be created with a template that solely consists of a property's text?

How can you obtain constructor parameter from JSON directly within the constructor itself?