使用 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，而 innerHTML 将其视为 HTML。在 jQuery 中，.text 方法包装了这个 API.

$('body').text(`Body text: ${data['text']}`)

不要使用.html方法。它用一些额外的代码包装 innerHTML API，以确保执行脚本标签。

对于 more-complex 案例，构造您的 DOM 元素，并在您想要的元素上设置文本内容。或者在您的代码中，如果没有单个元素包裹您的文本，请使用 document.createTextNode 创建一个文本节点并附加它。

$('body')
    .empty()
    .append(
        $('<h1>Body text:</h1>'),
        $('<br>'),
        document.createTextNode(data['text'])
    )

Use Javascript to add user-generated text to DOM as-is without using whitelist or blacklist