首页 前端知识 [日常开发问题:1] 后端返回数据中因包含<script>等标签,导致前端显示报错

[日常开发问题:1] 后端返回数据中因包含<script>等标签,导致前端显示报错

2024-02-08 15:02:55 前端知识 前端哥 779 846 我要收藏

日常开发过程中,发现已经上线的某系统中的题库出现答题异常,在答题过程中当遇到某题目是会直接无法提交,也无法点击上下翻页的操作。通过检查页面,发现在控制台中有明显的报错,报错信息如下

根据页面报错信息提示,进行的搜索,根据前辈的文章了解,起初以为是数据中包含了有中文字符的标签导致,但是通过页面调试发现,并未出现该情况。因此该问题排除。

接下来博主重新在控制台寻找该数据源时发现了一个问题。

从后端返回的数据中。des...信息描述这个内容下,发现返回的数据中有包含了<script></script>的标签,页面显示中这部分没有了,因此断定是这段数据导致的原因。

作为一个刚刚接手该项的开发者来看,一下子不知如何下手,在前端代码中寻找这部分的代码,发现前端是直接调用接口获取信息,然后拿到信息直接渲染在页面上,这个流程也确实未定位到任何错误的方式。后端的数据也没有任何问题,通过对数据库表的查询定位该题目的des..信息,也未发生问题。再次陷入僵局。可能对于经常开发题库、考试等前端人员较为常见。但是博主第一次遇见无从下手。

新的尝试-----继续寻找老前辈的经验论坛、博客,最终发现了问题的所在之处。

在这里引出了一个概念《什么是XSS》?作为初级前端来说了解即可。

XSS攻击全称跨站脚本攻击,是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS,XSS是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

举个栗子: 在数据库中题干位置后面写上一段<script>代码,然后前端通过请求等方式获取到这段代码在页面中渲染,访问页面时就会被执行,浏览器就会做出反应,这就最简单的XSS攻击。

问题的关键所在:如何解决这种情况。

转义字符:

转义字符(Escape Sequence)也称字符实体(Character Entity)。在HTML中,定义转义字符串的原因有两个:第一个原因是像“<”和“>”这类符号已经用来表示HTML标签,因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号,就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时,要严格遵守字母大小写的规则。第二个原因是,有些字符在ASCII字符集中没有定义,因此需要使用转义字符串来表示。

前端处理:使用转义字符对< > 等进行替换。参考符号如下

那么具体如何书写,以及如何调用。。。

前辈经验:可直接调用该函数

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 || "");
}

将该程序写入题目渲染对应的js文件中

 调用该函数,保存即可

 

 最终数据测试展示如下

问题得到解决。

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1564.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!