javascript如何实现html字符转实体(2)-木庄网络博客

当前第2页返回上一页

//仅限于包含`&、<、>、'`的文本转换
function stringToEntity(str){
  var div=document.createElement('div');
  div.innerText=str;
  div.textContent=str;
  var res=div.innerHTML;
  console.log(str,'->',res);
  return res;
}

其实除了innerText，还可以通过创建文本节点的方式来完成转义，即使用document.createTextNode()。这种方法大部分的应用场景是对用户输入进行转义。例如业务需要，我们需要把用户的输入写到网页上，不做转义直接将用户输入写到网页上往往是行不通的，因为容易出现XSS漏洞。不过我们可以通过document.createTextNode()方法将用户输入作为文本节点，然后再插入到文档中。该方法会对出现的特殊标记进行转义。例如如下代码：

var str="<img src='a valid url' οnlοad='alert(1)'></img>";
var text=document.createTextNode(str);
$("container").appendChild(text);

上述代码中如果不加转义直接使用$("container").innerHTML=str;就会使得图片加载完运行onload里面的代码，如果代码是恶意的，就会为我们网站的用户造成损害。而将小于号、大于号转义后就不会出现这个问题了。

【推荐学习：javascript高级教程】

以上就是javascript如何实现html字符转实体的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » javascript如何实现html字符转实体

javascript如何实现html字符转实体

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论