防止 jquery ajax 从脚本或 html 响应中执行 javascript

Question

根据文档：

如果指定了 html，则检索到的任何嵌入的 JavaScript data 在 HTML 作为字符串返回之前执行。相似地， 脚本将执行从 服务器，然后什么也不返回。

如何预防？ 我有 js 将修改通过 ajax 获得的内容。在返回 html 之前执行它没有任何意义，因为它没有可处理的内容（至少在我的情况下）。

我的代码：

function do_ajax(url)
    {
    $.ajax(
        {
        cache: false,
        url : url,
        success: function(response, status, xhr)
            {
            var ct = xhr.getResponseHeader("content-type") || "";
            if (ct.indexOf('script') > -1) {
                try {
                eval(response);
                }
                catch(error) { }
                }
                else
                {
                var edit_dialog = $('<div class="edit_dialog" style="display:hidden"></div>').appendTo('body');
                edit_dialog.html(response);
                edit_dialog.dialog({ modal:true, close: function(event, ui) { $(this).dialog('destroy').remove(); } });
                }

            },
        error:function (xhr, ajaxOptions, thrownError){
                   alert(xhr.status);
                   alert(thrownError);
                }
        });
    }

ajax 接收到的脚本执行两次。首先由我在 eval(response) 中，然后 jquery 再次执行它（如文档中所述）

Answer 1

Lee's answer 已经充分解决了 HTML 响应的情况 - 实际上嵌入其中的脚本不会自动执行，除非您将 HTML 添加到 DOM，这与您引用的错误文档相反。

这留下了在您的问题标题中询问的另一种情况 - 防止 script 响应在收到时自动执行。您可以使用dataType 设置轻松完成此操作。

$.ajax('myscript.js', {
    dataType: 'text',
    success: function (response) {
        // Do something with the response
    }
})

将dataType 设置为'text' 将导致jQuery 忽略从服务器返回的Content-Type 标头并将响应视为纯文本，从而阻止JavaScript 响应的默认行为（即执行它们）。来自（最近更正的）docs：

默认情况下，预处理的类型取决于响应的 Content-Type，但可以使用 dataType 选项显式设置。如果提供了 dataType 选项，则响应的 Content-Type 标头将被忽略。

...

如果指定了text 或html，则不会进行预处理。数据只是简单地传递给成功处理程序，并通过 jqXHR 对象的 responseText 属性提供。

Answer 2

jQuery.ajax 不在请求 HTML 时评估返回的脚本。您在问题中引用的段落实际上是文档中长期存在的错误，fixed as of April 2014。新文档有这样的说法（强调我的）：

"html"：以纯文本形式返回 HTML； 在插入 DOM 时评估包含的脚本标签。

...

如果指定了text 或html，则不会进行预处理。数据只是简单地传递给成功处理程序，并通过 jqXHR 对象的 responseText 属性提供。

在这种情况下，脚本会在您调用时进行评估

edit_dialog.html(response);

如果您不想在将响应插入 DOM 之前评估脚本，您应该能够执行以下操作：

edit_dialog.html($($.parseHTML(response)));

parseHTML 是默认情况下删除脚本标签的关键。但是，请注意 parseHTML 不是 XXS 安全的，如果您的来源未知，这仍然是一个安全问题。

Answer 3

这是关于 jQuery 真正令人讨厌的事情之一，它在响应时执行 javascript。 MooTools 等其他框架会禁用响应中的脚本执行，除非您特别设置希望它们执行，这是一种更好的方法。

我想防止脚本被执行的唯一方法是添加一个自定义 dataFilter 它很简单，但我认为它应该是默认的，如果你想要它应该是一个启用脚本执行的 ajax 选项（我从来没有使用过它，其他框架默认禁用安全等）

例子

$.ajax('uri',{
    dataFilter: function(data, type)
    {
        type = type || 'text';
        if(type=='html'||type=='text'){
            /*return data.replace(/<script.*>.*?<\/script>/gi, '');*/
            return data.replace(/<script.*?>([\w\W\d\D\s\S\0\n\f\r\t\v\b\B]*?)<\/script>/gi, '');
        }
        return data;
    }
    , success: function(data)
    {
        // whatever
    }
});

** 已更新 ** 需要那个疯狂的正则表达式来覆盖更多的脚本标签实例

注意 如果未在选项中设置 dataType ，它将在 dataFilter 中未定义，因此我将其默认为过滤器的文本 - 如果删除该行，则仅在显式设置 dataType 时才有效。

Answer 4

文档指出，任何在检索到的数据中嵌入的 Javascript 都将在 HTML 作为字符串返回之前执行。如果您想更改使用 ajax 调用检索到的任何内容，可以在 succes 属性中执行此操作：

$.ajax({
  url: "example.html",
  type: "GET",
  dataType: "html",
  succes: function(data){
     // Example: alert(data);
     // Do whatever you want with the returned data using JS or jQuery methods
  }
});