Question

在我的应用程序中，我需要以字符串形式发送和接收HTML。我想保持安全，因此我需要检查字符串中的dom元素是否匹配允许的标签以及样式声明是否有效，以及是否没有注入脚本。首先想到的是当然要重新编写字符串，但这很乏味，可能是错误的并且肯定是低效的。第二个想法是使用称为XPath的东西，但即使我在MDN网站上阅读了一些材料，我仍然不知道如何实现这个示例代码：

const XPathResult           = Components.interfaces.nsIDOMXPathResult;

const ALLOWED_TAGS          = ['div', 'span', 'b', 'i', 'u', 'br', 'font', 'img'];
const ALLOWED_STYLES        = ['font-weight', 'font-size', 'font-family', 'text-decoration', 'color', 'background-color'];
const ALLOWED_ATTRIBUTES    = ['style', 'name'];

const XPATH_PART_TAGS = ALLOWED_TAGS.map(function (v) {
    return "name() != '" + v + "' and name() != '" + v.toUpperCase() + "'"; // case insensitive
}).join(' and ');

const XPATH_PART_ATTRS = ALLOWED_ATTRIBUTES.map(function (v) {
    return "name() != '" + v + "' and name() != '" + v.toUpperCase() + "'"; // case insensitive
}).join(' and ');


const XPATH_BAD_TAGS        = "//*[(namespace-uri() != 'http://www.w3.org/1999/xhtml') or (" + XPATH_PART_TAGS + ")]";
const XPATH_BAD_ATTRIBUTES  = "//@*[((namespace-uri() != 'http://www.w3.org/1999/xhtml') and (namespace-uri() != '')) or (" + XPATH_PART_ATTRS+ ")]";
const XPATH_STYLE           = "//@*[name() = 'style']";


/**
 * Checks if inline style definition is considered secure
 *
 * @param {String} styleValue value of style attribute
 * @return bool
 */
function isStyleSecure(styleValue) {
    var styles = styleValue.split(';'),
        style,
        name, value,
        i, l;
    for (i = 0, l = styles.length; i < l; i++) {
        style = styles[i].trim();
        if (style === '') {
            continue;
        }
        style = style.split(':', 2);
        if (style.length !== 2) {
            return false;
        }
        name = style[0].trim().toLowerCase();
        value = style[1].trim();

        if (ALLOWED_STYLES.indexOf(name) === -1) {
            return false;
        }
    }
    return true;
}

/**
 * Singleton that verifies if given XHTML document fragment is considered secure.
 * Uses whitelist-based checks on tag names, attribute names and document namespaces.
 *
 * @class
 * @namespace core.SecurityFilter.MessageSecurityFilter
 */
var MessageSecurityFilter = {
    /**
     * Checks if given document fragment is safe
     *
     * @param {nsIDOMElement} element root element of the XHTML document fragment to analyze
     * @return {bool} true if fragment is safe, false otherwise
     */
    isSecure: function SecurityFilter_isSecure(element) {
        var document = element.ownerDocument,
            result,
            attr;

        result = document.evaluate('//*', element, null, XPathResult.ANY_TYPE, null);

        result = document.evaluate(XPATH_BAD_TAGS, element, null, XPathResult.ANY_TYPE, null);
        if (result.iterateNext()) {
            return false;
        }
        result = document.evaluate(XPATH_BAD_ATTRIBUTES, element, null, XPathResult.ANY_TYPE, null);
        if ((attr = result.iterateNext())) {
            return false;
        }

        result = document.evaluate(XPATH_STYLE, element, null, XPathResult.ANY_TYPE, null);
        while ((attr = result.iterateNext())) {
            if (!isStyleSecure(attr.nodeValue)) {
                return false;
            }
        }

        return true;
    }

};

第一个想法是创建documentFragment，然后使用treeWalker检查它的节点，或者使用.firstChild等跟随dom树。但我想这个解决方案是不安全的，因为它会让我对所有注入的脚本开放。我是对的吗？

还有其他方法吗？

Answer 1

不要滚动自己的消毒剂。使用一个由知道HTML，CSS和JS的黑暗丑陋角落的人编写的。

有关JavaScript清理工具的信息，请参阅http://code.google.com/p/google-caja/wiki/JsHtmlSanitizer。

Answer 2

您需要的安全级别取决于您处理HTML的方式。如果您通过电子邮件发送或在Web服务器上显示它，则需要比仅对文本分析进行更加谨慎。

假设您在Web服务器上显示此内容，这是一个非常棘手的问题，您应该使用HTML自动化程序，例如http://htmlpurifier.org/和订阅安全更新，甚至可能找到一种自动获取更新的方法。为了提高安全性，还使用iframe。如果你以某种方式逃避HTML，也要特别注意。

当然，根据问题的实际情况，正确答案可能完全不同。以上应该处理最常见的情况。

另见RegEx match open tags except XHTML self-contained tags

如何检查HTML字符串是否安全？

2 个答案: