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

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

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

var entityMap = {
    "&": "&",
    "<": "&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
}

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

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

输出:

'<div>Blah blah blah</div>'

我写了一个小函数来做这个。它只转义“，&，<和>(但通常这就是你所需要的)。它比前面提出的解决方案稍微优雅一些，因为它只使用一个.replace()来完成所有的转换。(编辑2:降低代码复杂度，使函数更小更整洁，如果你对原始代码感到好奇，请参阅答案末尾。)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}

这是纯Javascript，没有使用jQuery。

逃避/和“too”

编辑以回应mklement的评论。

上面的函数可以很容易地扩展到包括任何字符。要指定更多要转义的字符，只需将它们插入正则表达式中的字符类(即在/[…]/g中)和chr对象中的一个条目中。(编辑2:用同样的方式缩短了这个函数。)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&'\/<>]/g, function (a) {
        return {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        }[a];
    });
}

Note the above use of &#39; for apostrophe (the symbolic entity &apos; might have been used instead – it is defined in XML, but was originally not included in the HTML spec and might therefore not be supported by all browsers. See: Wikipedia article on HTML character encodings). I also recall reading somewhere that using decimal entities is more widely supported than using hexadecimal, but I can't seem to find the source for that now though. (And there cannot be many browsers out there which does not support the hexadecimal entities.)

注意:将/和'添加到转义字符列表中并不是很有用，因为它们在HTML中没有任何特殊含义，也不需要转义。

原始escapeHtml函数

编辑2:原始函数使用一个变量(chr)来存储.replace()回调所需的对象。这个变量还需要一个额外的匿名函数来限定它的范围，这使得函数(不必要地)变得更大更复杂。

var escapeHtml = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

我还没有测试这两个版本中哪个更快。如果你喜欢，请在这里添加相关信息和链接。

我增强了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()

如果你转义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进行转义。

在mustache.js中也有解决方案

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

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