后端传的“alert”字符串 html页面变成了alert_a_l_e_r_t
当后端向前端传递HTML内容时,为了防止XSS攻击,通常会对一些字符串进行转义。
比如:<会被转义为< >会被转义为>等。
对于alert()这样的JavaScript代码,会被转义为alert_a_l_e_r_t,以防止不信任的HTML内容执行JavaScript。
那么如何解决这个问题,在前端正确显示alert字符串呢?有两种方式:
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。
望采纳！
代码
不知道你这个问题是否已经解决, 如果还没有解决的话:该问题是因为在HTML页面中，alert字符串被解释为警告框的函数名，所以会出现分割的情况。解决方案是对alert字符串进行编码，可以使用Javascript的encodeURIComponent()函数对字符串进行编码，在传递给HTML页面时再进行解码。具体步骤如下：
1.后端将alert字符串进行编码，例如使用Java的URLEncoder.encode()函数进行编码：
String encodedAlert = URLEncoder.encode("alert('Hello, world!')", "UTF-8");
2.将编码后的字符串传递给HTML页面，并在页面中使用Javascript的decodeURIComponent()函数进行解码：
<script>
var encodedAlert = "${encodedAlert}"; // 从后端获取编码后的字符串
var decodedAlert = decodeURIComponent(encodedAlert); // 解码
eval(decodedAlert); // 执行alert函数
</script>
注意，eval()函数会直接执行传入的Javascript代码，存在一定的安全风险，应该避免传递恶意代码。
另外，对于该问题的另一个解决方案是使用其他的弹框组件，例如ElementUI中的Dialog组件，该组件支持设置宽度属性，可以解决该问题。代码示例：
<template>
<el-dialog title="Hello, world!" :visible.sync="dialogVisible" :width="600">
<p>This is a dialog.</p>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
}
};
</script>
以上是两种可能的解决方案，选择哪种方案可以根据实际需求和场景进行选择。