js防止注入实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangxinxin1992816/article/details/85251837

前端给后台传json格式参数,输入字段向后台传参时前端要做防止注入。

html转义是将特殊字符或html标签转换为与之对应的字符。如:< 会转义为 &lt;> 或转义为 &gt;像“<script>alert('test');</script>”这段字符会转义为:“&lt;script&gt;alert('test');&lt;/script&gt;”再显示时页面会将&lt;解析为<,&gt;解析为>,从而还原了用户的真实输入,最终显示在页面上 的还是“<script>alert('test');</script>”,即避免了js注入攻击又真实的显示了用户输入。

demo如下

<!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>

猜你喜欢

转载自blog.csdn.net/wangxinxin1992816/article/details/85251837