有人知道一个简单的方法来转义HTML从字符串在jQuery?我需要能够传递一个任意字符串,并有它正确转义显示在HTML页面(防止JavaScript/HTML注入攻击)。我确信可以通过扩展jQuery来实现这一点,但目前我对框架的了解还不够,无法实现这一点。


当前回答

我增强了mustache.js示例,将escapeHTML()方法添加到字符串对象中。

var __entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

String.prototype.escapeHTML = function() {
    return String(this).replace(/[&<>"'\/]/g, function (s) {
        return __entityMap[s];
    });
}

这样就很容易使用"Some <text>, more Text&Text".escapeHTML()

其他回答

试着强调。它与jQuery一起工作。

_.str.escapeHTML('<div>Blah blah blah</div>')

输出:

'&lt;div&gt;Blah blah blah&lt;/div&gt;'

如果你将这些信息保存在数据库中,使用客户端脚本转义HTML是错误的,这应该在服务器中完成。否则很容易绕过你的XSS保护。

为了让我的观点更清楚,这里有一个例子,使用其中的一个答案:

假设你正在使用函数escapeHtml来转义博客评论中的Html,然后将其发布到服务器上。

var entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
  };

  function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
      return entityMap[s];
    });
  }

用户可以:

编辑POST请求参数并用javascript代码替换注释。 使用浏览器控制台重写escapeHtml函数。

如果用户将这个代码段粘贴到控制台中,它将绕过XSS验证:

function escapeHtml(string){
   return string
}

如果你转义HTML,只有三个我能想到,这将是真正必要的:

html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

根据您的用例,您可能还需要执行“to "”之类的操作。如果列表足够大,我就使用数组:

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]
for(var item in findReplace)
    escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);

encodeURIComponent()只会对url进行转义,而不会对HTML进行转义。

这是一个很好的安全的例子……

function escapeHtml(str) {
    if (typeof(str) == "string"){
        try{
            var newStr = "";
            var nextCode = 0;
            for (var i = 0;i < str.length;i++){
                nextCode = str.charCodeAt(i);
                if (nextCode > 0 && nextCode < 128){
                    newStr += "&#"+nextCode+";";
                }
                else{
                    newStr += "?";
                }
             }
             return newStr;
        }
        catch(err){
        }
    }
    else{
        return str;
    }
}

因为你使用的是jQuery,你可以设置元素的text属性:

// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// <div class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value: 
// &lt;script&gt;alert('hi!');&lt;/script&gt;