目前,我的代码(使用 jQuery)看起来像这样,并且完全容易受到 XSS 的攻击:
$.get('/api-endpoint', (data) => {
$('body').html(`Body text: ${data['text']}`)
}
我不想安装黑名单、白名单或外部库。理想的解决方案是一个简单的单行代码,它告诉 Javascript 只需添加 data['text']
而不解释其中的任何内容。
编辑:第二种情况,稍微复杂一点:
$.get('/api-endpoint', (data) => {
$('body').html(`<h1>Body text:</h1><br>${data['text']}`)
}
最佳答案
简单。不要将其视为 HTML,而应将其视为文本。
将字符串视为文本的底层 DOM API 是 textContent
,这与将字符串视为 HTML 的 innerHTML
不同。在 jQuery 中,.text
方法包装了此 API。
$('body').text(`Body text: ${data['text']}`)
不要使用.html
方法。它包装了 innerHTML
API,并带有一些额外的代码来确保执行脚本标记。
对于更复杂的情况,构建 DOM 元素,并在所需元素上设置文本内容。或者就像在您的代码中一样,如果没有单个元素包装您的文本,请使用 document.createTextNode
创建一个文本节点并将其附加。
$('body')
.empty()
.append(
$('<h1>Body text:</h1>'),
$('<br>'),
document.createTextNode(data['text'])
)
关于web-applications - 使用 Javascript 将用户生成的文本按原样添加到 DOM,而不使用白名单或黑名单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42180150/