后端传的“alert”字符串 html页面变成了alert_a_l_e_r_t

Question

后端传的“alert”字符串 html页面变成了alert_a_l_e_r_t

Answer 1

当后端向前端传递HTML内容时,为了防止XSS攻击,通常会对一些字符串进行转义。
比如:<会被转义为< >会被转义为>等。
对于alert()这样的JavaScript代码,会被转义为alert_a_l_e_r_t,以防止不信任的HTML内容执行JavaScript。
那么如何解决这个问题,在前端正确显示alert字符串呢?有两种方式:

1. 在后端传递数据时,不进行HTML转义这种方式存在安全风险,不推荐。
2. 在前端接收数据后,进行HTML反转义在前端,接收到alert_a_l_e_r_t字符串后,使用DOMParser。例如:

let str = 'alert_a_l_e_r_t'
let doc = new DOMParser().parseFromString(str, 'text/html')
let alertStr = doc.body.textContent
// alertStr is 'alert'

DOMParser会自动对HTML内容进行反转义,所以alertStr获取到的结果是'alert'。然后,你可以在页面中直接使用alertStr,它已经是正确的HTML内容了:

<span id="alert">${alertStr}</span>

这样,前端展示的结果就是:alert而不是被转义的alert_a_l_e_r_t。

望采纳！