使用jQuery转义HTML

Question

我想出了一个使用jQuery来逃避HTML的黑客攻击,我想知道是否有人发现它有问题.

$('<i></i>').text(TEXT_TO_ESCAPE).html();

该<i>标签仅仅是一个虚拟的jQuery的需要一个容器设置的文本.

有没有更简单的方法来做到这一点？请注意,我需要存储在变量中的文本,而不是用于显示(否则我只能调用elem.text(TEXT_TO_ESCAPE);).

谢谢!

Answer 1

这是一个非常标准的做法,我的版本使用了一个<div>:

return $('<div/>').text(t).html();

这在技术上并非100%安全,尽管Mike Samuel指出,但在实践中它可能非常安全.

当前的Prototype.js执行此操作:

function escapeHTML() {
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

但它曾经使用"在div中放置文本并提取HTML"技巧.

还有_.escape在下划线,这不这样说:

// List of HTML entities for escaping.
var htmlEscapes = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#x27;',
  '/': '&#x2F;'
};

// Regex containing the keys listed immediately above.
var htmlEscaper = /[&<>"'\/]/g;

// Escape a string for HTML interpolation.
_.escape = function(string) {
  return ('' + string).replace(htmlEscaper, function(match) {
    return htmlEscapes[match];
  });
};

这与Prototype的方法几乎相同.我最近做的大多数JavaScript都有Underscore,所以我倾向于使用_.escape这些天.

Answer 2

无法保证html()将完全转义,因此连接后结果可能不安全.

html()基于innerHTML和浏览器可以在不违反很多的期待,实现innerHTML让$("<i></i>").text("1 <").html()就是"1 <",那$("<i></i>").text("b>").html()是"b>".

然后,如果你连接这两个单独安全的结果,你会得到"1 <b>"哪个显然不是两个明文片段的串联的HTML版本.

因此,通过从第一原理中推导出来,这种方法并不安全,并且没有广泛遵循的规范innerHTML(尽管HTML5确实解决了这个问题).

检查它是否符合您要求的最佳方法是测试这样的角落情况.