[日常开发问题：1] 后端返回数据中因包含＜script＞等标签，导致前端显示报错

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

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

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

从后端返回的数据中。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文件中

 调用该函数，保存即可

 

 最终数据测试展示如下

问题得到解决。