js防止注入实现

最新推荐文章于 2024-05-14 14:18:30 发布

乐夫天命兮

最新推荐文章于 2024-05-14 14:18:30 发布

阅读量3.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/85251837

版权

JavaScript 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

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

html转义是将特殊字符或html标签转换为与之对应的字符。如：< 会转义为 <> 或转义为 >像“<script>alert('test');</script>”这段字符会转义为：“<script>alert('test');</script>”再显示时页面会将<解析为<,>解析为>,从而还原了用户的真实输入,最终显示在页面上的还是“<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>

乐夫天命兮

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js防止注入实现

前端给后台传json格式参数，输入字段向后台传参时前端要做防止注入。html转义是将特殊字符或html标签转换为与之对应的字符。如：&lt; 会转义为 &amp;lt;&gt; 或转义为 &amp;gt;像“&lt;script&gt;alert('test');&lt;/script&gt;”这段字符会转义为：“&amp;lt;script&amp;gt;alert('test');&amp;...
复制链接

扫一扫