如何在不使用eval（）的情况下从服务器动态加载和执行Javascript？

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

我正在编写一个PHP框架,它允许PHP开发人员使用PHP类创建带有表单,网格,tabpanel和菜单的ExtJS接口。

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.

例如,为了创建TabPanel,PHP类实例化了一个URL数组,当用户单击选项卡标题时,这些URL会动态加载。

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.

为了做到这一点,我使用以下Javascript函数,它通过AJAX调用加载PHP页面并执行其中的任何脚本。

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.

我经常在这个问题的答案中读到,通常不需要使用eval(),因为你需要用eval()来完成其他方式。我也理解在通过AJAX加载的PHP页面中执行脚本会带来安全风险,需要以其他方式锁定,因此我想找到另一种更安全的方法来实现这一点。

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, i.e. TabPanels which load and execute Javascript from the server only when the tab headers are clicked?

什么是在没有eval()的情况下从服务器动态加载和执行javascript的替代方法,这样我就可以使用与上面的脚本相同的功能,即TabPanels只在选项卡上加载和执行来自服务器的Javascript点击标题?

3 个解决方案

#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:

您可以随时通过脚本注入加载其他Javascript。如果您创建一个新的SCRIPT元素并将其放在DOM中,浏览器将下载该脚本并执行它。作为简化示例,您可以使用此:

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".

如果您想要更安全的方法,我建议研究“JSONP”。

#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:

您可以在服务器响应中返回脚本的文件URL(甚至是临时文件)。使用此URL,您可以动态地将这些脚本添加到您的头脑中。如果这很复杂,您还可以返回文本并通过以下方式包含此内容:

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.

我希望这有帮助。

#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.

eval的替代方法,即使它不是更安全的是将代码包装在函数体中并调用该函数。

var body = "you source here";

var f = Function(body);

f();

This can be used to load reusable code segments.

这可用于加载可重用的代码段。

#1