innerHTML是否自动转义HTML字符串的一部分?

时间:2019-04-29 20:40:56

标签: javascript html dom escaping

我必须使用innerHTML将包含嵌入式事件处理程序的html代码字符串注入到元素中。像这样:

document.getElementById('some-div')
  .innerHTML = '<button onclick="alert(\'&lt;html&gt;\');">&lt;html&gt;</button>';

我希望得到以下结果:

<button onclick="alert('&lt;html&gt;');">&lt;html&gt;</button>';

但是实际的DOM看起来像这样:

<button onclick="alert('<html>');">&lt;html&gt;</button>';

为什么内联事件处理程序部分会被浏览器自动取消转义?如果没有两次转义,是否可以防止这种情况发生?

1 个答案:

答案 0 :(得分:1)

通过设置Element.innerHTML将HTML数据传递给浏览器时,浏览器必须解释/解析HTML才能呈现它。即使它没有专门呈现onclick属性,它仍必须解析编码。正如克里斯·巴尔(Chris Barr)所说,您必须重新编码字符串,以便浏览器解析该字符串时,它将解析为正确的版本。

使用简单的HTML编码器(如https://opinionatedgeek.com/codecs/htmlencoder),您可以重新编码该字符串,并且该字符串应返回“&lt; html&gt;”。