随着 Web 应用程序的普及，用户生成的 HTML 内容成为了 Web 安全领域的一个重要问题。攻击者可能会利用这些内容注入恶意代码，例如 JavaScript，从而获取用户的敏感信息或执行其他危险操作。本文将介绍如何防止在用户生成的 HTML 中注入 JavaScript 攻击。
1. 输入验证
用户输入应该始终进行验证，以确保其不包含任何恶意代码。可以使用以下技术来验证和清理用户输入：
- 使用白名单过滤器：只允许特定的 HTML 元素和属性，从而防止攻击者注入有害代码。
- 编码特殊字符：对于 HTML 标签、属性值和文本中的特殊字符（例如 <、>、&、"、'）进行编码，以防止 XSS（跨站点脚本）攻击。
- 移除 JavaScript：使用正则表达式或其他工具定位和移除任何包含 JavaScript 代码的标记。
下面是一个使用 DOMPurify 库验证和清理用户输入的示例代码：
import DOMPurify from 'dompurify';
const userInput = '<script>alert("XSS attack!");</script><p>Hello, world!</p>';
const sanitizedInput = DOMPurify.sanitize(userInput);
console.log(sanitizedInput); // <p>Hello, world!</p>2. 输出转义
在将用户输入的文本插入到 HTML 页面中时，应该对其进行输出转义。这可以防止攻击者利用已注入的 JavaScript 代码执行 XSS 攻击。
以下是一些常见的输出转义技术：
- 对于文本节点，使用
textContent或innerText属性而不是innerHTML。 - 对于 HTML 元素节点及其属性，使用
createTextNode和setAttribute方法分别创建和设置文本节点和属性，而不是直接将字符串插入到页面中。 - 对于 URL，使用
encodeURI、encodeURIComponent或其他 URL 编码函数来转义特殊字符。
下面是一个使用 createTextNode 和 setAttribute 转义输出的示例代码：
-- -------------------- ---- ------- ----- --------- - ------------------- ---------------------------- ------------ ----- ------------- - ------------------------------ ----- -------- - ----------------------------------- ------------------------------------ ----- ----------- - ---------------------------- -------------------------------- --------------------------------------------------------------- --------------------------------------------------------- ----------------------------------------- ---------------------------------------
3. HTTPS 连接
使用 HTTPS 连接可以确保用户和服务器之间的通信受到加密保护，从而防止中间人攻击。此外，HTTP Strict Transport Security（HSTS）头部指令可以强制浏览器始终使用 HTTPS 连接，以进一步提高安全性。
以下是一个在 Express.js 中启用 HSTS 的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- --------------------- ------- --------- -- -- ------------------ ----- -------- ----- ----
结论
防止在用户生成的 HTML 中注入 JavaScript 攻击是 Web 应用程序开发过程中必须考虑的重要问题。本文介绍了输入验证、输出转义和 HTTPS 连接等技术，以及相关的示例代码。通过使用这些技术，可以有效地保护用户免受 XSS 攻击的威胁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15622