编辑“︁JavaScript DOM安全”︁（章节）

= JavaScript DOM安全 =

'''JavaScript DOM安全'''是指在使用JavaScript操作文档对象模型（DOM）时，采取必要的预防措施以避免安全漏洞，如跨站脚本攻击（XSS）、数据泄露或未经授权的DOM操作。DOM安全的核心在于确保用户输入和动态内容不会导致恶意代码执行或破坏网页的正常功能。

== 介绍 ==

DOM（文档对象模型）是HTML和XML文档的编程接口，允许JavaScript动态修改网页内容、结构和样式。然而，不安全的DOM操作可能导致严重的安全问题，尤其是当开发者未对用户输入进行适当过滤或转义时。常见的DOM安全威胁包括：
* '''跨站脚本攻击（XSS）'''：攻击者注入恶意脚本，窃取用户数据或劫持会话。
* '''DOM Clobbering'''：攻击者通过修改DOM属性覆盖合法JavaScript变量或函数。
* '''不安全的事件处理'''：未经验证的事件监听可能导致代码注入。

== 常见DOM安全威胁及防范措施 ==

=== 1. 跨站脚本攻击（XSS） ===
XSS攻击通过注入恶意脚本到网页中执行。DOM型XSS是其中一种类型，攻击者利用客户端脚本动态修改DOM。

'''示例：'''
<syntaxhighlight lang="javascript">
// 不安全的DOM操作
const userInput = document.getElementById('userInput').value;
document.getElementById('output').innerHTML = userInput; // 直接插入未转义的用户输入
</syntaxhighlight>

'''攻击场景：'''
如果用户输入为 `<script>alert('XSS')</script>`，脚本将被执行。

'''防范措施：'''
* 使用 `textContent` 代替 `innerHTML` 避免HTML解析：
  <syntaxhighlight lang="javascript">
  document.getElementById('output').textContent = userInput; // 安全
  </syntaxhighlight>
* 使用DOM API（如 `document.createElement`）动态创建元素。
* 对用户输入进行转义（如使用DOMPurify库）。

=== 2. DOM Clobbering ===
攻击者通过DOM节点覆盖JavaScript变量或函数。

'''示例：'''
<syntaxhighlight lang="html">
<!-- 攻击者注入的HTML -->
<form id="document"></form>
<script>
  console.log(document); // 输出 `<form>` 而非全局document对象
</script>
</syntaxhighlight>

'''防范措施：'''
* 避免使用全局变量存储关键数据。
* 使用 `Object.freeze` 保护关键对象：
  <syntaxhighlight lang="javascript">
  Object.freeze(window.document); // 防止覆盖
  </syntaxhighlight>

=== 3. 不安全的事件处理 ===
动态绑定事件时，未验证事件源可能导致代码注入。

'''示例：'''
<syntaxhighlight lang="javascript">
// 不安全的动态事件绑定
element.setAttribute('onclick', userInput); // 用户输入可能包含恶意代码
</syntaxhighlight>

'''防范措施：'''
* 使用 `addEventListener` 代替内联事件：
  <syntaxhighlight lang="javascript">
  element.addEventListener('click', () => {
    // 安全的事件处理逻辑
  });
  </syntaxhighlight>

== 实际案例 ==

=== 案例1：防止XSS的评论系统 ===
一个允许用户提交评论的网页需要过滤HTML标签。

'''安全实现：'''
<syntaxhighlight lang="javascript">
function sanitizeInput(input) {
  const div = document.createElement('div');
  div.textContent = input; // 自动转义HTML
  return div.innerHTML;
}

const comment = '<script>alert("XSS")</script>';
document.getElementById('commentSection').innerHTML = sanitizeInput(comment);
// 输出：&lt;script&gt;alert("XSS")&lt;/script&gt;
</syntaxhighlight>

=== 案例2：安全的动态内容加载 ===
使用 `fetch` 加载数据并安全插入DOM：

<syntaxhighlight lang="javascript">
fetch('/api/data')
  .then(response => response.text())
  .then(data => {
    const element = document.createElement('div');
    element.textContent = data; // 安全插入
    document.body.appendChild(element);
  });
</syntaxhighlight>

== 最佳实践总结 ==
* 始终对用户输入进行转义或过滤。
* 优先使用 `textContent` 而非 `innerHTML`。
* 使用安全的DOM操作方法（如 `createElement`）。
* 避免使用内联事件处理程序。
* 定期检查第三方库的DOM操作安全性。

<mermaid>
graph TD
  A[用户输入] --> B{是否过滤?}
  B -->|是| C[安全DOM操作]
  B -->|否| D[潜在XSS漏洞]
  C --> E[安全渲染]
  D --> F[恶意代码执行]
</mermaid>

== 数学表达（可选） ==
在验证输入时，可使用正则表达式过滤标签：
<math>
\text{sanitized} = \text{input.replace}(/<[^>]*>/g, '')
</math>

== 参见 ==
* [[跨站脚本攻击]]
* [[前端安全最佳实践]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript DOM]]