显然,这比我想象的要难找。它甚至是如此简单……
JavaScript中是否内置了与PHP的htmlspecialchars相同的函数?我知道自己实现它相当容易,但如果可用的话,使用内置函数会更好。
对于那些不熟悉PHP的人,htmlspecialchars将<htmltag/>转换为<htmltag/>
我知道escape()和encodeURI()不是这样工作的。
显然,这比我想象的要难找。它甚至是如此简单……
JavaScript中是否内置了与PHP的htmlspecialchars相同的函数?我知道自己实现它相当容易,但如果可用的话,使用内置函数会更好。
对于那些不熟悉PHP的人,htmlspecialchars将<htmltag/>转换为<htmltag/>
我知道escape()和encodeURI()不是这样工作的。
当前回答
还有一种方法是完全放弃所有的字符映射,而是将所有不需要的字符转换为它们各自的数字字符引用,例如:
function escapeHtml(raw) {
return raw.replace(/[&<>"']/g, function onReplace(match) {
return '&#' + match.charCodeAt(0) + ';';
});
}
注意,指定的RegEx只处理OP想要转义的特定字符,但是,根据转义HTML将要使用的上下文,这些字符可能是不够的。Ryan Grove的文章There's more to HTML转义than &, <, >, and”是关于这个主题的很好的阅读。根据您的上下文,为了避免XSS注入,很可能需要以下RegEx:
var regex = /[&<>"'` !@$%()=+{}[\]]/g
其他回答
这就是HTML编码。没有原生javascript函数可以做到这一点,但你可以谷歌,并做一些漂亮的。
例如,http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/
编辑: 以下是我的测试结果:
var div = document.createElement('div');
var text = document.createTextNode('<htmltag/>');
div.appendChild(text);
console.log(div.innerHTML);
输出:< htmltag / >
function htmlEscape(str){
return str.replace(/[&<>'"]/g,x=>'&#'+x.charCodeAt(0)+';')
}
该解决方案使用字符的数字代码,例如<被<取代。
虽然它的性能略差于使用映射的解决方案,但它具有以下优点:
不依赖于库或DOM 非常容易记住(你不需要记住5个HTML转义字符) 少的代码 相当快(仍然比5个链式替换快)
照章办事
OWASP建议“[e]除字母数字字符外,[您应该]转义所有ASCII值小于256的字符,使用&#xHH;格式(或命名实体,如果可用),以防止切换[一个]属性。
这里有一个函数可以做到这一点,并有一个用法示例:
不安全功能 return键unsafe replace(。 - [u0000 - u002F \ u003A \ u0040 u005B - u0060 \ u007B \ u00FF] / g, c => '&#' + (' 1000 +。’这是c . charCodeAt(+ 0)。切片(四)?” ) 的 querySelector(“div”)的文件。innerHTML = <span class= + escapeHTML(' faeclass ' onclick="alert " ("test") + > +。’” escapeHTML(“<脚本>alert”(“attributes检查员”)\u003C/脚本>' ”< /跨越> < div > < / div >
您应该亲自验证我提供的实体范围,以验证函数的安全性。你也可以使用这个正则表达式,它具有更好的可读性,应该涵盖相同的字符代码,但在我的浏览器中性能下降了10%:
/(?![0-9A-for-z])[\u0000-\u00FF]/g
js提供了一个函数:
_.escape(string)
转义插入HTML中的字符串,替换&、<、>、"和'字符。
http://underscorejs.org/#escape
它不是内置的JavaScript函数,但如果您已经在使用Underscore.js,如果要转换的字符串不是太大,那么它是比编写自己的函数更好的选择。
我希望这能赢得比赛,因为它的性能和最重要的不是使用.replace('&','&').replace('<','<')的链式逻辑…
var mapObj = {
'&': "&",
'<': "<",
'>': ">",
'"': """,
'\'': "'"
};
var re = new RegExp(Object.keys(mapObj).join("|"), "gi");
function escapeHtml(str)
{
return str.replace(re, function(matched)
{
return mapObj[matched.toLowerCase()];
});
}
console.log('<script type="text/javascript">alert('Hello World');</script>');
console.log(escapeHtml('<script type="text/javascript">alert('Hello World');</script>'));