web-applications - 使用 Javascript 将用户生成的文本按原样添加到 DOM，而不使用白名单或黑名单

Question

目前，我的代码(使用 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']}`)
}

Answer 1

简单。不要将其视为 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'])
    )

Working Example