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

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

web-applications javascript

Web applications 使用Javascript将用户生成的文本按原样添加到DOM中，而不使用白名单或黑名单,web-applications,xss,javascript,Web Applications,Xss,Javascript,目前，我的代码（使用jQuery）看起来像这样，完全易受XSS攻击： $.get('/api-endpoint', (data) => { $('body').html(`Body text: ${data['text']}`) } 我不想安装黑名单、白名单或外部库。理想的解决方案是一个简单的单行程序，它告诉Javascript只需添加数据['text']，而无需解释其中的任何内容编辑：第二种情况，稍微复杂一些： $.get('/api-endpoint', (data) =&g

目前，我的代码（使用jQuery）看起来像这样，完全易受XSS攻击：

$.get('/api-endpoint', (data) => {
  $('body').html(`Body text: ${data['text']}`)
}

我不想安装黑名单、白名单或外部库。理想的解决方案是一个简单的单行程序，它告诉Javascript只需添加

数据['text']

，而无需解释其中的任何内容

编辑：第二种情况，稍微复杂一些：

$.get('/api-endpoint', (data) => {
  $('body').html(`<h1>Body text:</h1><br>${data['text']}`)
}

$.get（'/api端点'，（数据）=>{
$（'body'）.html（'body text:
${data['text']}`）
}

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

$（“正文”）
.empty（）
.附加(
$（“正文：”），
$（“
”），
document.createTextNode（数据['text']）
)

简单。不要将其视为HTML，而应将其视为文本