使用 insertAdjacentHTML 构建 HTML 组件的潜在缺点

本文探讨了使用 insertAdjacentHTML 方法构建 HTML 组件的潜在缺点。虽然 insertAdjacentHTML 在性能上优于 innerHTML，但在安全性方面需要格外注意。本文将详细介绍其安全风险，并提供一些最佳实践，帮助开发者安全有效地使用此方法。

insertAdjacentHTML 的优势

insertAdjacentHTML 允许你将 HTML 字符串解析为 DOM 树，并将其插入到现有元素中的特定位置。它提供了比 innerHTML 更好的性能，因为 innerHTML 会替换整个元素的内容，而 insertAdjacentHTML 只会插入新的 HTML 片段，避免了不必要的重新渲染。

安全风险：跨站脚本攻击 (XSS)

insertAdjacentHTML 的主要缺点是它容易受到跨站脚本攻击 (XSS)。如果 HTML 字符串来自不可信的来源，例如用户输入或外部 API，那么恶意脚本可能会被注入到页面中，从而导致各种安全问题，包括：

• 窃取用户 Cookie
• 重定向用户到恶意网站
• 篡改页面内容

示例：

立即学习“前端免费学习笔记（深入）”；

假设你使用 insertAdjacentHTML 将用户输入的评论添加到页面中：

const comment = document.getElementById('commentInput').value;
const commentList = document.getElementById('commentList');

commentList.insertAdjacentHTML('beforeend', `
${comment}
`);

如果用户输入包含恶意脚本，例如 ，那么这段脚本将被执行，从而导致 XSS 攻击。

如何缓解 XSS 风险

为了避免 XSS 攻击，你需要采取以下措施：

善美购物商城Sunway Shop

系统特点：技术领先：系统基于被广泛使用的Windows平台开发，集百家之所长，技术领先、功能完备； 快速建店：只需简单设置，3分钟即可以建立一个功能完备的网上商城； 操作简便：软件操作界面由专业设计人员设计，采用人性化的布局，界面规范，操作简捷； 安装方便：只需传到您的虚拟空间即可； HTML编辑器：内置优秀的HTML在线编辑器； 可扩展性：软件构架灵活，考虑未来功能扩充之需要，具有较强的可扩展性

下载

1. 对所有用户输入进行转义或清理： 在将用户输入插入到页面之前，使用适当的函数或库对特殊字符进行转义，例如 , &, " 和 '。 许多编程语言和框架都提供了内置的转义函数。

   示例 (JavaScript):

   function escapeHtml(string) {
     return string.replace(/[&<>"']/g, function(m) {
       switch (m) {
         case '&':
           return '&';
         case '<':
           return 'zuojiankuohaophpcn';
         case '>':
           return 'youjiankuohaophpcn';
         case '"':
           return '"';
         case "'":
           return ''';
         default:
           return m;
       }
     });
   }
   
   const comment = document.getElementById('commentInput').value;
   const commentList = document.getElementById('commentList');
   
   commentList.insertAdjacentHTML('beforeend', `
   ${escapeHtml(comment)}
   `);

2. 使用内容安全策略 (CSP): CSP 是一种 HTTP 头部，允许你控制浏览器可以加载哪些资源。通过设置 CSP，你可以限制可以执行的脚本来源，从而降低 XSS 攻击的风险。

3. 避免使用 insertAdjacentHTML 处理来自不可信来源的数据： 如果你无法保证数据的安全性，最好避免使用 insertAdjacentHTML。 可以考虑使用其他方法，例如使用 DOM API 创建元素并设置其属性。

   示例 (使用 DOM API):

   const comment = document.getElementById('commentInput').value;
   const commentList = document.getElementById('commentList');
   
   const li = document.createElement('li');
   li.textContent = comment;
   commentList.appendChild(li);

总结

insertAdjacentHTML 是一个强大的方法，可以用来动态地构建 HTML 组件。然而，它也存在安全风险，特别是 XSS 攻击。为了安全地使用 insertAdjacentHTML，你需要对所有用户输入进行转义或清理，使用内容安全策略，并避免使用 insertAdjacentHTML 处理来自不可信来源的数据。在安全性要求较高的场景下，使用 DOM API 手动创建和操作元素是更安全的选择。