显然,这比我想象的要难找。它甚至是如此简单……
JavaScript中是否内置了与PHP的htmlspecialchars相同的函数?我知道自己实现它相当容易,但如果可用的话,使用内置函数会更好。
对于那些不熟悉PHP的人,htmlspecialchars将<htmltag/>转换为<htmltag/>
我知道escape()和encodeURI()不是这样工作的。
显然,这比我想象的要难找。它甚至是如此简单……
JavaScript中是否内置了与PHP的htmlspecialchars相同的函数?我知道自己实现它相当容易,但如果可用的话,使用内置函数会更好。
对于那些不熟悉PHP的人,htmlspecialchars将<htmltag/>转换为<htmltag/>
我知道escape()和encodeURI()不是这样工作的。
当前回答
Use:
String.prototype.escapeHTML = function() {
return this.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
示例:
var toto = "test<br>";
alert(toto.escapeHTML());
其他回答
你可能不需要这样的函数。由于您的代码已经在浏览器中*,您可以直接访问DOM,而不是生成和编码HTML,浏览器必须向后解码才能实际使用。
使用innerText属性可以安全地将纯文本插入到DOM中,并且比使用任何现有的转义函数快得多。甚至比将静态预编码字符串赋值给innerHTML还要快。
使用classList编辑类,使用dataset设置数据属性,使用setAttribute设置其他类。
所有这些都能帮你逃脱。更准确地说,不需要转义,也不需要在**下面执行编码,因为您正在处理HTML (DOM的文本表示)。
// use existing element var author = 'John "Superman" Doe <john@example.com>'; var el = document.getElementById('first'); el.dataset.author = author; el.textContent = 'Author: '+author; // or create a new element var a = document.createElement('a'); a.classList.add('important'); a.href = '/search?q=term+"exact"&n=50'; a.textContent = 'Search for "exact" term'; document.body.appendChild(a); // actual HTML code console.log(el.outerHTML); console.log(a.outerHTML); .important { color: red; } <div id="first"></div>
*此答案不适用于服务器端JavaScript用户(Node.js等)
** Unless you explicitly convert it to actual HTML afterwards. E.g. by accessing innerHTML - this is what happens when you run $('<div/>').text(value).html(); suggested in other answers. So if your final goal is to insert some data into the document, by doing it this way you'll be doing the work twice. Also you can see that in the resulting HTML not everything is encoded, only the minimum that is needed for it to be valid. It is done context-dependently, that's why this jQuery method doesn't encode quotes and therefore should not be used as a general purpose escaper. Quotes escaping is needed when you're constructing HTML as a string with untrusted or quote-containing data at the place of an attribute's value. If you use the DOM API, you don't have to care about escaping at all.
对于Node.js用户(或在浏览器中使用Jade运行时的用户),可以使用Jade的转义函数。
require('jade').runtime.escape(...);
如果别人在维护它,你自己写它就没有任何意义了。:)
我希望这能赢得比赛,因为它的性能和最重要的不是使用.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>'));
照章办事
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
还有一种方法是完全放弃所有的字符映射,而是将所有不需要的字符转换为它们各自的数字字符引用,例如:
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