jQuery安全注入html

因此，我通过json接收来自国外不可信源的html。我希望在div容器中显示html，如下所示：

$('#container').html(dangerousHTMLCode);

我如何才能防止最重要的javascript注入，其次是改变页面的样式。这都是客户端的问题。容器div应该是一个灵活的高度，以匹配内容的高度（可能排除某些iframe解决方案）

---

更新：目标是从html中删除所有javascript和css。这包括dom项属性中存在的js和css（style=“”、onclick=“”等）

好的，我第一次尝试这样做是失败的。我同意Jan Dvorak的评论，即最好的方法可能是在服务器端代理中使用XSS工具，特别是因为您可能无论如何都要通过某种代理，因为您正在进行跨站点请求，如果您使用JSONP，那么一切都已经丢失了

但是，由于问题要求使用jQuery方法来实现这一点

理想情况下，您可以找到一个用javascript编写的HTML解析器，使用它来构建元素树，并删除任何与安全属性白名单不匹配的元素或属性

因为我不知道有这样的解析器，而且您所在的浏览器中确实有解析器，所以我们将尝试使用它。不过，我们必须小心，该解析器连接到javascript引擎和HTTP客户端等

首先，正如我在第一次尝试的反馈中指出的，在创建DOM元素之前，我们必须做一些工作，因为有些事件可以在插入DOM之前运行。我们至少需要确保在创建任何DOM对象之前不会解析onX属性。通常，对预加载进行一些干扰也是一个好主意。为此，让我们进行一些简单的文本转换：

var xmlNameStartChars = "a-zA-Z_\\u00c0-\\u00d6\\u00d8-\\u00f6\\u00f8-\\u02ff\\0370-\\u037d\\u037f-\\u1fff\\u200c\\u200d\\u2070-\\u2218f\\u2c00-\\u2fef\\u3001-\\udbbf\\udc00-\\udfff\\uf900-\\ufdcf\\ufdf0-\\ufffd";
var xmlNsPfx = "[" + xmlNameStartChars + "][-.0-9\\u00b7\\u0300-\\u036f\\u203f-\\u2040" + xmlNameStartChars + "]*:";
var tagStartRE = new RegExp("<\\/?(" + xmlNsPfx + ")?", "g");
var tagStartDeZRE = new RegExp("(<\\/(" + xmlNsPfx + ")?)z", "g");
dangerousHTMLCode = dangerousHTMLCode.replace(/on/gi, "z$&"); // run interference with onX
// run interference with preloading
// But don't interfere with namespaces
dangerousHTMLCode = dangerousHTMLCode.replace(/<\/?(\w*:)?/g, "$&z");

现在，有趣的是，你必须移除危险属性。这一次我被列入黑名单，部分原因是我太懒了，不想把所有我想列入白名单的属性都考虑进去。。。但我在src和href中使用了白名单URL方案，这不仅仅是“javascript:”可能不安全，“vbscript:”和“livescript:”至少在某些浏览器中是危险的。您可能应该将属性列为白名单，例如，我很可能忘记或不知道脚本属性不是以“开”开头的。我还没有找到一种不进行暴力DOM漫游就可以找到“坏”属性的方法，所以让我们这样做：

var badAttrs = /^(.*:)(zon|style|background)/i;
var suspectAttrs = /^(.*:)(src|href)$/i;
var goodSchemes = /^\s*([^:]*$|ftp:|tel:|https?:)/i;
function processAttributes(element) {
    var toRemove = [];
    var attrs = element.attributes;
    for (var i = 0; i < attrs.length; i++) {
        var name = attrs[i].name, val = attrs[i].value;
        if (badAttrs.test(name) || (suspectAttr.test(name) && !goodSchemes.test(val)) {
            toRemove.push(attrs[i].name);
        }
    }
    while (toRemove.length) {
        element.removeAttribute(toRemove.pop());
    }
}

// Start walking from the root of our DOM fragment
var root = dangerousDOM[0];
var elements = [root];

// Walk until we have no more elements, processing their attributes and adding their children
while (elements.length) {
    var elem = elements.pop();
    if (elem.hasAttributes()) {
        processAttributes(elem);
    }

    // Find children of this element and queue them up
    child = elem.firstChild;
    while (child) {
        if (child.nodeType == 1) {
            // It's an element
            elements.push(child);
        }
        child = child.nextSibling;
    }
}

---

非常感谢t.niese的建设性批评。

您可以使用

iframe

并在该iframe中加载不受信任的HTML。您拥有的iframe将使用

sandbox

属性来防止任何注入iframe内部的JavaScript修改iframe外部的环境

<iframe class="untrusted" src="http://unsafe.example.com/" sandbox />

或者，如果不受信任的HTML是JSON，则在服务器上删除JSON

<iframe class="untrusted" src="/Unsafe?url=http://unsafe.example.com/foo.json" sandbox />

你可能想看看这篇文章：这是否适用于你的情况？玩得开心：你是如何从国外网站获得这些数据的？通过jsonp导致跨域？如果是，那么在接收到的数据中查找xss尝试的所有努力都是无用的，因为xss可能在您收到有可用数据的通知之前就已经发生了。t.niese在这里有一个很好的观点：您的数据源是什么？如果是用户，为什么不让他攻击自己，然后在服务器端正确处理数据，在服务器端可以使用任何HTML解析器，而不用担心意外运行任何东西。如果您的数据源是远程网站，我建议使用服务器端代理。这仍然可能很危险。我还没有测试过下面的想法，如果它可以与更多的研究一起工作，但这不是一个荒谬的想法：如果你有这样的

var-dangerousHTMLCode=“alert（'ok'）；”

然后将

映射到

，并且

z

是

html

的名称空间，因此可能仍然会将其解释为

script

，即使上述想法不起作用，创建本机DOM然后执行白名单也不是一个好主意，因为您可能错过了一些xss的可能性。这种攻击方法看起来在HTML中不起作用，但我可以想象它在XHTML中会起作用。。。我可以把它从我的regexp中排除，但它看起来已经有问题了。名称空间前缀也打破了我目前对属性的处理方式，所以现在它尝试处理名称空间前缀。我不知道如何处理前缀中的Unicode补充平面-允许平面1到15，但我以前从未在JS正则表达式中处理过这些平面-您只是匹配代理项对吗？我没有时间找到有效的解决方案（如果存在的话）。但也有一些其他的想法被认为是有效的：例如，

o\uFEFFnclick=\“alert（'test'）；\”

或

o\u00click=\“alert（'test'）；\”

可能绕过了您的方法（可能仍然存在类似的bug）。我只是想说明，在用白名单重建html之前，不应该创建本机DOM。你的正则表达式是某种黑名单。如果您忘记了一些东西，或者浏览器中引入了新功能，从而可以使用其他属性编写脚本，那么这可能会中断。

<iframe class="untrusted" src="http://unsafe.example.com/" sandbox />

<iframe class="untrusted" src="/Unsafe?url=http://unsafe.example.com/foo.json" sandbox />