当前位置: 首页 > news >正文

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

什么是XSS?

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

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

怎么避免XSS?

前端处理: 使用字符转义,将’<‘、’>'等字符进行转义&lt;&gt;

后端处理: 也是一样的道理,将相关的字符给转义,就可以避免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 = {
			'&amp;': '&',
			'&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,加群备注‘地区-名字-技术类型’,以防乱加。

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

相关文章:

  • 实时数据库:优势和报价
  • 使用express搭建简单的本地服务器
  • 动手动脑
  • 作为程序员,有哪些神级编程资源呢
  • md5加密
  • 闭包得从底层理解
  • Linux wget auto login and backup database
  • Vue组件里的data为什么是函数,而不是对象
  • webpack的理解和使用
  • Building a RESTful Web Service(转)
  • Uncaught SyntaxError: Unexpected token ‘<‘完美解决
  • oVirt (Open Virtual) 之 VDSM 学习笔记 (二) 流程追踪
  • 完美解决[webpack-cli] Unable to load ‘@webpack-cli/serve‘ command
  • HTTP相关概念
  • 原型与原型链的底层理解
  • Asm.js的简单介绍
  • HTML中设置input等文本框为不可操作
  • JavaScript工作原理(五):深入了解WebSockets,HTTP/2和SSE,以及如何选择
  • Laravel 实践之路: 数据库迁移与数据填充
  • markdown编辑器简评
  • Node项目之评分系统(二)- 数据库设计
  • SpiderData 2019年2月23日 DApp数据排行榜
  • Vue2.x学习三:事件处理生命周期钩子
  • web标准化(下)
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 基于web的全景—— Pannellum小试
  • 简析gRPC client 连接管理
  • 面试总结JavaScript篇
  • 前端代码风格自动化系列(二)之Commitlint
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 用element的upload组件实现多图片上传和压缩
  • Mac 上flink的安装与启动
  • # Pytorch 中可以直接调用的Loss Functions总结:
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • (3)(3.5) 遥测无线电区域条例
  • (51单片机)第五章-A/D和D/A工作原理-A/D
  • (c语言版)滑动窗口 给定一个字符串,只包含字母和数字,按要求找出字符串中的最长(连续)子串的长度
  • (Matlab)遗传算法优化的BP神经网络实现回归预测
  • (转) Android中ViewStub组件使用
  • .net core 控制台应用程序读取配置文件app.config
  • .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?
  • .Net Winform开发笔记(一)
  • .NET 读取 JSON格式的数据
  • .NET 反射的使用
  • .NET是什么
  • @Transactional注解下,循环取序列的值,但得到的值都相同的问题
  • [ vulhub漏洞复现篇 ] Apache APISIX 默认密钥漏洞 CVE-2020-13945
  • [.net]官方水晶报表的使用以演示下载
  • [AAuto]给百宝箱增加娱乐功能
  • [ACTF2020 新生赛]Include
  • [BUUCTF]-Reverse:reverse3解析
  • [bzoj1038][ZJOI2008]瞭望塔
  • [BZOJ4554][TJOI2016HEOI2016]游戏(匈牙利)
  • [C# WPF] 如何给控件添加边框(Border)?
  • [C/C++]数据结构----顺序表的实现(增删查改)