js防止注入实现
今天其他项目组同事过来问过我是否遇到过这种情况？
场景：在项目input框中输入含有script标签包含的脚本，提交后却意外的被执行了。（所有恶意攻击的脚本标签）
问题：HTML没有进行转义的发送，会导致回显或者提交的时候html语义无法解释 < 和 > 符号，认为其是标签。故进行标签模式的渲染。
解决：每次发送前对输入的字符串进行特殊符号的转义，避免html标签符号和特殊符号给解释器造成冲突。从而导致XSS的恶意脚本攻击。
下面附上防止js脚本注入的源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea id="textarea" style="width:300px;height:100px;"></textarea>
<button id="getValue" onclick="getVal()">获取</button>
<button id="setValue" onclick="setVal()">赋值</button>
</body>
<script>
var $ = document.getElementById('textarea');
var _val = '';
function getVal(){
_val = htmlEncode ($.value);
alert(_val);
$.value = '';
}
function setVal(){
$.value = htmlDecode (_val);
}
//转义 元素的innerHTML内容即为转义后的字符
function htmlEncode (str) {
var ele = document.createElement('span');
ele.appendChild( document.createTextNode( str ) );
return ele.innerHTML;
}
//解析
function htmlDecode (str) {
var ele = document.createElement('span');
ele.innerHTML = str;
return ele.textContent;
}
</script>
</html>
使用方式：
1、将XSS攻击的脚本语言输入到textarea文本域中，点击获取会弹出其转义后的字符串。
2、点击赋值会将转移后的字符串赋值给textarea文本域的value。从而html解释器解释特殊字符，并显示出用户想要显示的特殊语义。
有问题欢迎广大代码爱好者交流，互相学习。
