将 WMD 编辑器的预览 HTML 与服务器端 HTML 验证保持一致（例如，不嵌入 JavaScript 代码）

Question

有很多 Stack Overflow 问题（例如白名单、防止使用 C# 进行 WMD 控制的 XSS 和 WMD Markdown 和服务器-side）关于如何对WMD编辑器生成的Markdown进行服务器端清理，以确保生成的HTML不包含恶意脚本，如下所示：

<img onload="alert('haha');" 
   src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" />

但我没有找到好的方法也可以堵住客户端的漏洞。当然，客户端验证并不能替代服务器上的清理验证，因为任何人都可以假装是客户端并 POST 你讨厌的 Markdown。如果您在服务器上清理 HTML，攻击者将无法保存错误的 HTML，因此其他人以后将无法看到它，从而导致他们的 cookie 被盗或会话被错误的脚本劫持。因此，有一个有效的案例表明，在 WMD 预览窗格中也可能不值得强制执行无脚本规则。

但想象一下，攻击者找到了一种将恶意 Markdown 获取到服务器上的方法（例如，来自另一个站点的受损源，或者在修复 XSS 错误之前添加的内容）。将 Markdown 翻译为 HTML 时应用的服务器端白名单通常会阻止向用户显示不良 Markdown。但是，如果攻击者可以让某人编辑该页面（例如，通过发布另一个条目，声称该恶意条目的链接已损坏，并要求某人修复它），那么任何编辑该页面的人都会被劫持他们的 cookie。诚然，这是一个极端案例，但仍然值得防范。

另外，允许客户端预览窗口允许与服务器允许的 HTML 不同的 HTML 可能不是一个好主意。

Stack Overflow 团队通过对 WMD 进行更改来堵住这个漏洞。他们是怎么做到的？

[注意：我已经弄清楚了这一点，但它需要一些棘手的 JavaScript 调试，所以我在这里回答我自己的问题，以帮助其他可能想做同样事情的人]。

Answer 1

一种可能的修复方法是在 wmd.js 中的 pushPreviewHtml() 方法中。以下是来自 GitHub 上 WMD 的 Stack Overflow 版本的原始代码：

if (wmd.panels.preview) {
    wmd.panels.preview.innerHTML = text; 
}

您可以将其替换为一些清理代码。以下是 Stack Overflow 使用响应本文的代码的改编版，限制为标签白名单，对于 IMG 和 A 元素，限制为属性白名单（并且也按特定顺序！）。请参阅 Meta Stack Overflow 帖子Stack Overflow、服务器故障和超级用户允许使用哪些 HTML 标签？< /em> 有关白名单的更多信息。

注意：此代码当然可以改进，例如允许按任何顺序将属性列入白名单。它还禁止 mailto: URL，这在 Internet 站点上可能是一件好事，但在您自己的 Intranet 站点上可能不是最好的方法。

if (wmd.panels.preview) {

    // Original WMD code allowed JavaScript injection, like this:
    //    <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" onload="alert('haha');"/>
    // Now, we first ensure elements (and attributes of IMG and A elements) are in a whitelist,
    // and if not in whitelist, replace with blanks in preview to prevent XSS attacks 
    // when editing malicious Markdown.
    var okTags = /^(<\/?(b|blockquote|code|del|dd|dl|dt|em|h1|h2|h3|i|kbd|li|ol|p|pre|s|sup|sub|strong|strike|ul)>|<(br|hr)\s?\/?>)$/i;
    var okLinks = /^(<a\shref="(\#\d+|(https?|ftp):\/\/[-A-Za-z0-9+&@#\/%?=~_|!:,.;\(\)]+)"(\stitle="[^"<>]+")?\s?>|<\/a>)$/i;
    var okImg = /^(<img\ssrc="https?:(\/\/[-A-Za-z0-9+&@#\/%?=~_|!:,.;\(\)]+)"(\swidth="\d{1,3}")?(\sheight="\d{1,3}")?(\salt="[^"<>]*")?(\stitle="[^"<>]*")?\s?\/?>)$/i;
    text = text.replace(/<[^<>]*>?/gi, function (tag) {
        return (tag.match(okTags) || tag.match(okLinks) || tag.match(okImg)) ? tag : ""
    })

    wmd.panels.preview.innerHTML = text;  // Original code 
}

另请注意，此修复不在 GitHub 上的 Stack Overflow 版本的 WMD 中 - 显然，更改是后来制作的，没有检查回 GitHub。

更新：为了避免破坏输入 URL 时自动创建超链接的功能，您还需要对 showdown.js 进行更改，如下所示：

原始代码：

var _DoAutoLinks = function(text) {

    text = text.replace(/<((https?|ftp|dict):[^'">\s]+)>/gi,"<a href=\"$1\">$1</a>");

    // Email addresses: <[email protected]>

    /*
        text = text.replace(/
            <
            (?:mailto:)?
            (
                [-.\w]+
                \@
                [-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+
            )
            >
        /gi, _DoAutoLinks_callback());
    */
    text = text.replace(/<(?:mailto:)?([-.\w]+\@[-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+)>/gi,
        function(wholeMatch,m1) {
            return _EncodeEmailAddress( _UnescapeSpecialChars(m1) );
        }
    );

    return text;
}

固定代码：

var _DoAutoLinks = function(text) {
    // use simplified format for links, to enable whitelisting link attributes
    text = text.replace(/(^|\s)(https?|ftp)(:\/\/[-A-Z0-9+&@#\/%?=~_|\[\]\(\)!:,\.;]*[-A-Z0-9+&@#\/%=~_|\[\]])($|\W)/gi, "$1<$2$3>$4");
    text = text.replace(/<((https?|ftp):[^'">\s]+)>/gi, '<a href="$1">$1</a>');
    return text;
}

Answer 2

只要任何第三方不可能提供脚本，允许本地用户在页面上下文中执行脚本就不是安全问题。
如果没有编辑器这样做，用户总是可以在页面上输入 javascript: url 或使用 Firebug 或类似的东西。