The execution of dynamically generated Javascript in JSON format, returned through AJAX, is prevented when it is appended

Question

The execution of dynamically generated Javascript in JSON format, returned through AJAX, is prevented when it is appended

Recently, I encountered an issue on my webpage where I made an AJAX request to a PHP script. The PHP script responded with a valid JSON object and set the Content-type header to application/json.

After examining the JSON format using

console.log(JSON.stringify(data))

, I discovered that the content included a script block:

{
    "content": "<script type=\"text/javascript\">console.log(\"test\");</script>"
}

To display this content dynamically, I created a div with the class of "content" based on the AJAX response:

var content = document.createElement("div");
content.setAttribute("class", "content");
content.innerHTML = data.content;

Subsequently, I appended this content div to an existing div on my site.

existingDiv.appendChild(content);

However, upon inspecting the source in Google Chrome's developer tools, I noticed that the script within the content was not executed. Even though it appeared as a DOM node, the script did not run successfully.

I explored options such as eval() but wished to avoid it due to security concerns. Additionally, the content could potentially include other HTML markup along with script blocks.

Seeking advice on how to resolve this issue and execute the dynamically added JavaScript block, I am open to jQuery solutions as well.

javascript jquery ajax

Answer 1

Answer №1

One approach could be to employ the new Function() method like this:

$(document).ready(function(){
   var script = "window.alert('hi')";
   new Function(script)();
});

The reason why your script might not be running, as mentioned by @Pointy (with a workaround), can be demonstrated with the following code snippet:

<script type='text/javascript'>
$(document).ready(function()
{
    $("<script type='text/javascript'>window.alert('hi');<\/script>").appendTo(document.body); // this will work

    var container = document.createElement("div"); // this won't work
    container.innerHTML = "<script type='text/javascript'>window.alert('hi');<\/script>";
    document.body.appendChild(container);

    var script = document.createElement("script"); // this will
    script.innerHTML = "window.alert('hi');";
    document.body.appendChild(script);
});
</script>

UPDATE: included a requested performance test: http://jsperf.com/eithed-hvsa

Answer 2

One approach could be to employ the new Function() method like this:

$(document).ready(function(){
   var script = "window.alert('hi')";
   new Function(script)();
});

The reason why your script might not be running, as mentioned by @Pointy (with a workaround), can be demonstrated with the following code snippet:

<script type='text/javascript'>
$(document).ready(function()
{
    $("<script type='text/javascript'>window.alert('hi');<\/script>").appendTo(document.body); // this will work

    var container = document.createElement("div"); // this won't work
    container.innerHTML = "<script type='text/javascript'>window.alert('hi');<\/script>";
    document.body.appendChild(container);

    var script = document.createElement("script"); // this will
    script.innerHTML = "window.alert('hi');";
    document.body.appendChild(script);
});
</script>

UPDATE: included a requested performance test: http://jsperf.com/eithed-hvsa

Answer 3

Answer №2

One way to load JavaScript code dynamically is by using the $.getScript() method. This method is simple, cacheable, and straightforward :

Check out more information here: http://api.jquery.com/jQuery.getScript/

(Please remember to update your server script that generates the JSON containing the JavaScript code and change headers accordingly)

Answer 4

One way to load JavaScript code dynamically is by using the $.getScript() method. This method is simple, cacheable, and straightforward :

Check out more information here: http://api.jquery.com/jQuery.getScript/

(Please remember to update your server script that generates the JSON containing the JavaScript code and change headers accordingly)

Answer 5

Answer №3

When using the .innerHTML method, keep in mind that any <script> tags will not be evaluated by the browser.

To execute JavaScript code, it's recommended to send it as a string without <script> tags. This way, you can easily use the eval() function.

Edit: If you're working with jQuery and utilize the $(something).html() method to add content directly to the DOM element, instead of just setting innerHTML, jQuery will actively evaluate any <script> tags within the content.

Answer 6

When using the .innerHTML method, keep in mind that any <script> tags will not be evaluated by the browser.

To execute JavaScript code, it's recommended to send it as a string without <script> tags. This way, you can easily use the eval() function.

Edit: If you're working with jQuery and utilize the $(something).html() method to add content directly to the DOM element, instead of just setting innerHTML, jQuery will actively evaluate any <script> tags within the content.

The execution of dynamically generated Javascript in JSON format, returned through AJAX, is prevented when it is appended

Answer №1

Answer №2

Answer №3

Similar questions

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

Issues with utilizing jQuery AJAX for form submissions

Implementation of the WCF POST method

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

Showing the computation outcome on the identical page

The ng-bind directive is functional when used with a textarea element, but it does not work with

The <a href="#divtagid"> link is incapable of triggering the opening of the div tag when called from JavaScript

Chrome's behavior of reducing the width of inline elements when the content is dynamic

Prevent the button from being enabled until the file input is updated

I have my doubts about whether I am implementing the recapcha API correctly in a React application

How to place an element in a specific location within the DOM using JavaScript

React components need to refresh after fetching data from an API

trigger opening a bootstrap modal programmatically

Maintaining hover effects even when elements are not in view

Filtering out specific properties in an array using Angular

end the node.js automated testing process

What is the reason TypeScript does not display an error when assigning a primitive string to an object String?

Troubleshooting: Issue with Jquery background not functioning correctly

Text Parallax Effect

Sustain unbroken websocket connection with Discord using Node.js