前端js实现字符转义和反转义

什么是XSS？

XSS攻击又称为跨站脚本，XSS的重点不在于跨站点，而是在于脚本的执行。XSS是一种经常出现在Web应用程序中的计算机安全漏洞，是由于Web应用程序对用户的输入过滤不足而产生的，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

举个栗子： 在数据库中写入一段代码<script>alert(1)</script>，然后前端通过请求等方式获取到这段代码在页面中渲染，访问页面时就会被执行，浏览器就会弹出1的弹窗，这就最简单的XSS攻击。

怎么避免XSS？

前端处理： 使用字符转义，将’<‘、’>'等字符进行转义<、>

后端处理： 也是一样的道理，将相关的字符给转义，就可以避免XSS

字符转义（解决XSS）

直接调用下面的htmlEscape(‘’)方法，就可以过滤掉存在XSS风险的相关字符：

function htmlEscape(str) { //字符转义
	var escapesMap = {
			'<': '&lt;',
			'>': '&gt;',
			'"': '&quot;',
			"'": '&#039;'
		},
		reUnescapedHtml = new RegExp(/[<>"']/g);
	return (str && reUnescapedHtml.test(str)) ? str.replace(reUnescapedHtml, function(chr) {
		return escapesMap[chr];
	}) : (str || "");
}

字符反转义

有时候在写逻辑的时候，可能需要反转义，就用下面的htmlUnEscape方法：

function htmlUnEscape(str) { //反转义
	var unescapes = {
			'&': '&',
			'&lt;': '<',
			'&gt;': '>',
			'&quot;': '"',
			'&#39;': "'"
		},
		reEscapedHtml = new RegExp(/&(?:amp|lt|gt|quot|#39);/g);
	return (str && reEscapedHtml.test(str)) ? str.replace(reEscapedHtml, function(entity) {
		return unescapes[entity];
	}) : (str || '')
}

如果有帮助，可以点赞+收藏+关注，后续有更多知识与您分享！！！

欢迎加入QQ技术群：568984539，加群备注‘地区-名字-技术类型’，以防乱加。

关于本文，如果任何疑问的可以在评论区留言，我看到就会第一时间回复的。