使用innerHTML处理AJAX数据是否安全？setHTML()能否替代？

场景1：拼接AJAX获取的数据生成表格行 #

这种做法不安全。原因在于data.fullname、data.fixedname属于外部获取的不可信数据，若数据中包含恶意HTML标签或脚本（例如<script>stealUserInfo()</script>），直接通过innerHTML插入时，浏览器会解析并执行这些内容，引发XSS跨站脚本攻击，导致用户数据泄露或页面被篡改。

场景2：设置固定加载提示内容 #

这种做法安全。因为newContent是开发者硬编码的固定内容，不包含任何用户可控或不可信的外部数据，不会引入恶意代码，浏览器解析执行的内容完全在预期范围内。

不安全场景的替代方案 #

针对场景1的风险，推荐以下几种安全方案：

1. 使用原生DOM API创建元素 #

通过createElement、textContent、appendChild等API手动构建DOM元素，所有外部数据都通过textContent设置，确保内容被当作纯文本处理，不会被解析为HTML：

const tr = document.createElement('tr');

// 构造姓名单元格
const fullnameTd = document.createElement('td');
fullnameTd.textContent = data.fullname;
tr.appendChild(fullnameTd);

// 构造固定名称单元格
const fixednameTd = document.createElement('td');
fixednameTd.textContent = data.fixedname;
tr.appendChild(fixednameTd);

// 构造按钮单元格
const btnTd = document.createElement('td');
btnTd.className = 'text-center';

const button = document.createElement('button');
button.id = `id_${a}`;
button.type = 'button';
button.className = 'btn btn-xsmall shadow-none';
button.textContent = 'Button';
btnTd.appendChild(button);
tr.appendChild(btnTd);

document.getElementById('myID').appendChild(tr);

2. 对不可信数据进行HTML转义 #

编写转义函数，将数据中的特殊HTML字符（如<、>、&等）转换为对应的HTML实体，确保插入innerHTML时仅作为纯文本显示：

function escapeHtml(text) {
  return text
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

// 拼接内容时使用转义后的数据
let newContent = '<tr>';
newContent += `<td>${escapeHtml(data.fullname)}</td>`;
newContent += `<td>${escapeHtml(data.fixedname)}</td>`;
newContent += `<td class="text-center"><button id="id_${a}" type="button" class="btn btn-xsmall shadow-none">Button</button></td>`;
newContent += '</tr>';

document.getElementById('myID').innerHTML += newContent;

能否用setHTML()替代innerHTML？ #

可以，但需注意浏览器兼容性（现代主流浏览器如Chrome 90+、Firefox 94+已支持）。

setHTML()是浏览器提供的安全HTML插入API，它内置了内容 sanitizer（过滤器），会自动移除<script>、<iframe>等危险标签和脚本，相比innerHTML更安全。对于场景1，使用setHTML()可以无需手动转义数据，API会自动处理风险内容：

// 直接拼接内容后使用setHTML插入
document.getElementById("myID").setHTML(newContent);

如果需要自定义过滤规则，还可以通过Sanitizer构造函数配置允许的标签、属性等，进一步适配业务需求。

内容的提问来源于stack exchange，提问作者Xelariel