/ “innerHTML”在某些情况下是一个有用的功能，但如果滥用，它可能会让其他人渗透到您的网络应用程序中。在本文中，我将解释为什么这是一个问题，并提出替代方法。

首先，让我们看看为什么这可能很糟糕，这是一个示例代码。在此代码中，我们有一个简单的输入和一个按钮。如果我们单击该按钮，它将在 div 输出上显示输出。

HTML 代码：

<input id="our-input-field" type="text" />
<button onclick="clickFunction()">Go</button>

<div id="output-div"></div>

JS代码：

function clickFunction() {
  console.log('asdfasdf')
  let val = document.getElementById('our-input-field').value;
  document.getElementById('output-div').innerHTML = val;
}

这个效果很好，很好。但如果没有额外的代码来检查该值，这可能会导致问题。如果它只是一个简单的文本，这是一个简单的代码。

但是如果我们添加一些可以运行这样的脚本的东西会怎样<img src="" onerror="alert('asdfa')" />：运行这将运行警报，因为它找不到 img 源，因此触发了 onerror 属性。

那么替代方案是什么？

另一种方法是使用该setHtml函数。

function clickFunction() {
  console.log('asdfasdf')
  let val = document.getElementById('our-input-field').value;
  // document.getElementById('output-div').innerHTML = val;
  
  // alternative
  document.getElementById('output-div').setHTML(val);
  
}

Element 接口的“setHTML()”方法用于将经过处理的 HTML 字符串作为元素的子树安全地插入到 DOM 中。将不受信任的 HTML 字符串插入元素时，这是使用“Element.innerHTML”的安全替代方案。

该功能唯一的缺点是，它仍处于实验状态，其他浏览器尚未支持，但一旦功能实验完成，该功能将可用。浏览器兼容性：