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，并附带一些额外的代码以确保执行脚本标记。

对于更复杂的情况，构造DOM元素，并在所需元素上设置文本内容。或者在代码中，如果没有单个元素包装您的文本，请使用document.createTextNode创建文本节点并附加它。

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