在html页面显示一个变量，而这个变量中有xss脚本，如何安全的把这个变量原样展示出来
当你想要在HTML页面安全地展示一个可能包含XSS（跨站脚本攻击）脚本的变量原样内容时，可以通过以下几种常见的方式来实现安全展示：
方法一：使用文本节点
在JavaScript中，当你要将变量插入到HTML页面的某个元素中时，可以通过创建文本节点的方式来插入，而不是直接使用 innerHTML 等可能会执行脚本的属性。
例如，假设你有一个变量 xssVariable 可能包含恶意脚本，你想把它展示在一个具有 id 为 targetElement 的HTML元素中：
<!DOCTYPE html>
<html>
<body>
<div id="targetElement"></div>
<script>
// 假设这里是可能包含XSS脚本的变量
var xssVariable = "<script>alert('恶意脚本');</script>";
// 获取目标元素
var target = document.getElementById('targetElement');
// 创建文本节点并添加到目标元素
var textNode = document.createTextNode(xssVariable);
target.appendChild(textNode);
</script>
</body>
</html>
在上述代码中，通过创建文本节点并将变量作为文本内容添加到目标元素，这样变量中的内容就会被当作纯文本展示，而不会执行其中的脚本。
方法二：对特殊字符进行转义（HTML实体编码）
另一种常见的做法是对变量中的特殊字符进行转义，将它们转换为对应的HTML实体编码。这样即使变量中原本有类似脚本的内容，在浏览器渲染时也只会显示这些字符的编码形式，而不会被当作可执行的脚本。
例如，在JavaScript中可以使用函数来实现转义：
<!DOCTYPE html>
<html>
<body>
<div id="targetElement"></div>
<script>
// 假设这里是可能包含XSS脚本的变量
var xssVariable = "<script>alert('恶意脚本');</script>";
// 转义函数
function htmlEncode(str) {
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
}
// 对变量进行转义
var escapedVariable = htmlEncode(xssVariable);
// 获取目标元素
var target = document.getElementById('targetElement');
// 将转义后的变量设置到元素的innerHTML（这里只是示例，实际也可采用其他添加文本的方式）
target.innerHTML = escapedVariable;
</script>
</body>
</html>
在上述示例中，定义了 htmlEncode 函数来对变量中的 &、<、>、"、' 等特殊字符进行转义，转义后再将内容设置到HTML元素中展示，就可以安全地显示变量原本的内容而不会触发XSS攻击。
通过以上这些方法，可以在HTML页面中相对安全地展示可能包含XSS脚本的变量内容。
原文地址：https://blog.csdn.net/xuanyuanjiaqi/article/details/144141643
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！