前言

一直都没有注意过这个点,平时主要比较注重防御sql注入,js反而被忽略了。虽然js注入能造成的破坏没有sql那么大,但是,有时候还是比较影响体验的

实现

挺简单的,只需要将用户的输入编码为html再保存即可

此处我们可以借用一个html元素,把要转义的东西塞进去,再以html的形式拿出来即可

let element = document.createElement("span");
element.appendChild(document.createTextNode(document.getElementById("user_input").value));
element.innerHTML;//转义后的值

此时保存内容就是转义的值
ss1

当然,也可以反向转义
同样借用一个html元素进行

let element = document.createElement("span");
element.innerHTML = input;
element.textContent; //反向转义后的值

使用注意:

  • 如果想要在网页上显示内容,转义后的值是可以直接被浏览器读取执行的,浏览器会自动转义回来并显示给用户
  • 如果反向转义后再交给浏览器,造成的结果则是防御了个寂寞

可以比较一下转义前后浏览器显示的网页源码中的效果
转义前(转义+反向转义)
ss2

转义后
ss3

可以看到,浏览器已经识别了转义后代码,并没有出现数据库中显示的那种转义后字符
要想区分是否转义,大概只能靠代码是否高亮了🤣

顺便吐槽一句chrome,这破东西的缓存真的很影响调试体验,我调试网页普遍用edge