javascript - 执行通过 AJAX 返回的 JavaScript 的正确方法(无 jQuery)

Question

假设我收到了一个混合了 JavaScript 和 HTML 的 AJAX 数据加载请求的响应，例如:

<script>window.alert('Hello World!');</script>
<p>This is a paragraph. Lorem ipsum dolor sit amet...</p>

如果我只是将该响应放入 div 或其他容器中，脚本不会自动执行。我知道这可以通过 eval() 函数来完成(如下例所示)，但是 eval 是邪恶的，那么我该如何正确地做到这一点呢？ 注意:我没有使用 jQuery。

以下是 AJAX 加载器的示例:

function Load(id,url){
    var ajax=new XMLHttpRequest();
    ajax.onreadystatechange=function(){
        if(ajax.readyState!=4)return;
        var obj=document.getElementById(id);
        if(!obj)return;
        obj.innerHTML=ajax.responseText;

        // load any scripts
        var s=obj.getElementsByTagName('script');
        for(var i=0;i<s.length;++i)window.eval(s[i].innerHTML); // <-- bad
    }
    ajax.open("GET",url,true);
    ajax.send(null);
}

Answer 1

请注意，您正在获取用户的输入并在您网站上的脚本上下文中运行它。因此，该脚本可以执行在您的浏览器/域上运行的 JavaScript 能够执行的任何操作(包括 cookie 窃取、XSS、偷渡式恶意软件等)。

要降低风险，您唯一可以实际做的就是不要 eval() 用户提供的内容。我建议考虑以下替代方案:

1. 使用 iframe 作为运行用户脚本的环境: http://dean.edwards.name/weblog/2006/11/sandbox/
2. 使用 Caja。它允许网站安全地嵌入来自第三方的 DHTML 网络应用程序，并在嵌入页面和嵌入的应用程序之间实现丰富的交互。它使用对象能力安全模型来允许范围广泛的灵活安全策略。 http://code.google.com/p/google-caja/