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


当前回答

在mustache.js中也有解决方案

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

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

其他回答

转义html特殊(UTF-8)

function htmlEscape(str) {
  return str
      .replace(/&/g, '&amp;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/\//g, '&#x2F;')
      .replace(/=/g,  '&#x3D;')
      .replace(/`/g, '&#x60;');
}

对于unescape html特殊(UTF-8)

function htmlUnescape(str) {
  return str
      .replace(/&amp;/g, '&')
      .replace(/&quot;/g, '"')
      .replace(/&#39;/g, "'")
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>')
      .replace(/&#x2F/g, '/')
      .replace(/&#x3D;/g, '=')
      .replace(/&#x60;/g, '`');
}

如果你将这些信息保存在数据库中,使用客户端脚本转义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
}

经过最后的测试,我可以推荐最快和完全跨浏览器兼容的原生javaScript (DOM)解决方案:

function HTMLescape(html){
    return document.createElement('div')
        .appendChild(document.createTextNode(html))
        .parentNode
        .innerHTML
}

如果你重复多次,你可以用一次准备好的变量来做:

//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
  DOMtext.nodeValue = html;
  return DOMnative.innerHTML
}

看看我最后的性能比较(堆栈问题)。

简单的JavaScript转义示例:

function escapeHtml(text) {
    var div = document.createElement('div');
    div.innerText = text;
    return div.innerHTML;
}

escapeHtml("<script>alert('hi!');</script>")
// "&lt;script&gt;alert('hi!');&lt;/script&gt;"

这个答案提供了jQuery和普通的JS方法,但这是不使用DOM的最短方法:

unescape(escape("It's > 20% less complicated this way."))

转义字符串:它%27s%20%3E%2020%25%20less%20complicated%20this%20way。

如果转义的空格让你感到困扰,试试:

unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))

转义字符串:这样就不那么复杂了。

不幸的是,escape()函数在JavaScript 1.5版中已弃用。encodeURI()或encodeURIComponent()是替代方案,但它们忽略了',所以最后一行代码将变成这样:

decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))

所有主流浏览器仍然支持短代码,考虑到旧网站的数量,我怀疑这种情况很快就会改变。