前言
一直都没有注意过这个点,平时主要比较注重防御sql注入,js反而被忽略了。虽然js注入能造成的破坏没有sql那么大,但是,有时候还是比较影响体验的
实现
挺简单的,只需要将用户的输入编码为html再保存即可
此处我们可以借用一个html元素,把要转义的东西塞进去,再以html的形式拿出来即可
let element = document.createElement("span");
element.appendChild(document.createTextNode(document.getElementById("user_input").value));
element.innerHTML;//转义后的值
当然,也可以反向转义
同样借用一个html元素进行
let element = document.createElement("span");
element.innerHTML = input;
element.textContent; //反向转义后的值
使用注意:
- 如果想要在网页上显示内容,转义后的值是可以直接被浏览器读取执行的,浏览器会自动转义回来并显示给用户
- 如果反向转义后再交给浏览器,造成的结果则是防御了个寂寞
可以比较一下转义前后浏览器显示的网页源码中的效果
转义前(转义+反向转义)
可以看到,浏览器已经识别了转义后代码,并没有出现数据库中显示的那种转义后字符
要想区分是否转义,大概只能靠代码是否高亮了🤣
顺便吐槽一句chrome,这破东西的缓存真的很影响调试体验,我调试网页普遍用edge