将WMD编辑器的预览HTML与服务器端HTML验证对齐(例如,没有嵌入式JavaScript代码)

概述有很多Stack Overflow问题(例如 Whitelisting, preventing XSS with WMD control in C#和 WMD Markdown and server-side)关于如何对WMD编辑器生成的Markdown进行服务器端清理,以确保生成的HTML不包含恶意脚本,如下所示： <img onload="alert('haha');" src="ht 有很多Stack Overflow问题(例如 Whitelisting,preventing XSS with WMD control in C#和 WMD Markdown and server-side)关于如何对WMD编辑器生成的Markdown进行服务器端清理,以确保生成的HTML不包含恶意脚本,如下所示：

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

但我也找不到在客户端插上漏洞的好方法.当然,客户端验证不能替代服务器上的擦除验证,因为任何人都可以伪装成客户端并发布令人讨厌的Markdown.如果你在服务器上清理HTML,攻击者就无法保存坏的HTML,因此以后没有其他人能够看到它并且他们的cookie被盗或被坏脚本劫持的会话.因此,有一个有效的案例可能不值得在WMD预览窗格中强制执行无脚本规则.

但想象一下,攻击者找到了将恶意Markdown放到服务器上的方法(例如,来自其他站点的受感染的源,或者在修复XSS错误之前添加的内容).将markdown转换为HTML时应用的服务器端白名单通常可以防止向用户显示错误的Markdown.但是,如果攻击者可以让某人编辑该页面(例如,通过发布另一个条目,说恶意条目有一个断开的链接并要求某人修复它),那么编辑该页面的任何人都会被劫持.这无疑是一个极端的案例,但它仍然值得防范.

此外,允许客户端预览窗口允许不同于服务器允许的HTML,这可能是一个坏主意.

Stack Overflow团队通过更改WMD来堵塞这个漏洞.他们是如何做到的呢？

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

解决方法 一个可能的解决方法是在pushPrevIEwHTML()方法中的wmd.Js中.这是 Stack Overflow version of WMD on GitHub的原始代码：

if (wmd.panels.prevIEw) {    wmd.panels.prevIEw.INNERHTML = text; }

您可以使用一些清理代码替换它.这是对Stack Overflow使用的代码的修改in response to this post,其限制为标签的白名单,对于img和A元素,限制为属性的白名单(并且也按特定顺序！).有关白名单的更多信息,请参阅What HTML tags are allowed on Stack Overflow,Server Fault,and Super User?的Meta Stack Overflow.

注意：这个代码肯定可以改进,例如以任何顺序允许列入白名单的属性.它也不允许使用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 }

另请注意,此修复程序不在Stack Overflow version of WMD on GitHub中 – 显然更改是在稍后进行的,而不是检查回GitHub.

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

原始代码：

var _Doautolinks = function(text) {    text = text.replace(/<((https?|ftp|dict):[^'">\s]+)>/gi,"<a href=\"\"></a>");    // Email addresses: <address@domain.foo>    /*        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,"<>");    text = text.replace(/<((https?|ftp):[^'">\s]+)>/gi,'<a href=""></a>');    return text;}

总结

以上是内存溢出为你收集整理的将WMD编辑器的预览HTML与服务器端HTML验证对齐(例如,没有嵌入式JavaScript代码)全部内容，希望文章能够帮你解决将WMD编辑器的预览HTML与服务器端HTML验证对齐(例如,没有嵌入式JavaScript代码)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。