JavaScript 在线转义是指在 Web 开发中,为了防止用户输入的数据被浏览器解释为 HTML 或 JavaScript 代码,从而引发安全问题(如跨站脚本攻击,XSS),开发者会对用户输入的数据进行转义处理。转义处理会将特殊字符转换为它们的 HTML 实体或 Unicode 编码,这样浏览器就不会将它们当作代码执行。
转义字符:在字符串中,有些字符具有特殊含义,如 <
、>
、&
、"
、'
等。为了在字符串中显示这些字符,需要使用转义字符,例如 <
表示 <
。
HTML 实体:是一种表示特殊字符的方式,如 <
表示 <
,>
表示 >
。
Unicode 编码:是一种字符编码标准,可以用数字来表示任何字符。
<
、>
、&
、"
、'
等字符转换为 HTML 实体。\
、"
、'
、\n
、\r
等字符转换为 Unicode 编码或其他形式。function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
const userInput = '<script>alert("XSS")</script>';
const safeOutput = escapeHtml(userInput);
console.log(safeOutput); // <script>alert("XSS")</script>
function escapeJavaScript(str) {
return str.replace(/\\/g, '\\\\')
.replace(/"/g, '\\"')
.replace(/'/g, "\\'")
.replace(/\n/g, '\\n')
.replace(/\r/g, '\\r');
}
const jsInput = 'console.log("Hello\nWorld");';
const safeJsOutput = escapeJavaScript(jsInput);
console.log(safeJsOutput); // console.log(\"Hello\\nWorld\");
问题:转义后的数据在页面上显示不正确。
原因:可能是转义函数没有正确处理所有特殊字符,或者在显示数据时没有正确解码。
解决方法:
innerHTML
和 textContent
的区别)。// 正确显示转义后的 HTML 内容
document.getElementById('output').textContent = safeOutput;
通过以上方法,可以有效防止 XSS 攻击,并确保数据在不同环境下的正确显示。
Tencent Serverless Hours 第13期
云+社区沙龙online [技术应变力]
腾讯云证券及基金行业数字化实践系列直播
高校公开课
云原生在发声
云+社区技术沙龙[第10期]
云+社区沙龙online [技术应变力]
停课不停学 腾讯教育在行动第二期
双11音视频系列直播
双11音视频
云+社区沙龙online [国产数据库]
领取专属 10元无门槛券
手把手带您无忧上云