How can I dynamically load and execute Javascript from the server without using eval()?

Question

I'm writing a PHP framework which allows PHP developers to create ExtJS interfaces with forms, grids, tabpanels and menus using PHP classes only.

In order to create a TabPanel, for example, a PHP class is instantiated with an array of URLs which get loaded dynamically when the user clicks on a tab header.

In order to do this, I use the following Javascript function which loads a PHP page via AJAX call and executes any scripts inside it.

function loadViewViaAjax(url) {
    Ext.Ajax.request({
        url: url,
        success: function(objServerResponse) {
            var responseText = objServerResponse.responseText;
            var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
            while(scripts=scriptsFinder.exec(responseText)) {
                eval(scripts[1]);
            }
        }
    });
}

I often read as in the answers to this question that there is usually no need to use eval() since what you need to do with eval() can be usually be achieved in others ways . I also understand that executing scripts within a PHP page loaded via AJAX presents a security risk that would need to be locked down in other ways, so I would like to find another, safer way to do this if possible.

What would be an alternative way to dynamically load and execute javascript from the server without eval(), so that I have the same functionality as I do now with the above script, ie TabPanels which load and execute Javascript from the server only when the tab headers are clicked?

Answer 1

You could always load your additional Javascript via script injection. If you create a new SCRIPT element and place it in the DOM, the browser will download the script and execute it. As a simplified example you could use this:

var newScript = document.createElement('script'); 
newScript.setAttribute('src', 'http://www.example.com/url/of/your/script.php'); 
document.body.appendChild(newScript); 

If you'd like a more secure approach, i'd recommend to research "JSONP".

Answer 2

You could return a file URL of the scripts in your server response (even temporary files). With this URL you could dynamically add these scripts to your head. If this is to complicated you could also return text and include this via:

var head = document.getElementsByTagName('head').item(0);
var script = document.createElement('script');
    script.language = "javascript";
    script.type = "text/javascript";
    script.id = "script-id";
    script.defer = true;
    script.text = source;

    head.appendChild(script);

I hope this helps.

Answer 3

An alternative to eval, even though it is not any safer is to wrap the code in a function body and call the function.

var body = "you source here";

var f = Function(body);

f();

This can be used to load reusable code segments.