编辑“︁JavaScript输出编码”︁（章节）

= JavaScript输出编码 =

'''JavaScript输出编码'''是Web开发中防止[[跨站脚本攻击]]（XSS）的关键安全措施。它确保用户提供的数据在输出到HTML、URL或JavaScript代码时被正确转义，从而避免恶意脚本的执行。本文将详细介绍输出编码的原理、方法及实际应用。

== 概述 ==
输出编码是一种将特殊字符转换为安全表示形式的技术，以防止浏览器将其误解为可执行代码。例如，字符<code><</code>会被编码为<code>&lt;</code>，使其在HTML中显示为文本而非标签。

=== 为什么需要输出编码？ ===
当用户输入的数据未经处理直接输出到页面时，攻击者可能注入恶意脚本：
<syntaxhighlight lang="html">
<!-- 危险示例：未编码的输出 -->
<div>{{userInput}}</div>
</syntaxhighlight>
若<code>userInput</code>为<code><script>alert('XSS')</script></code>，脚本将被执行。

== 编码方法 ==

=== 1. HTML实体编码 ===
将特殊字符转换为对应的HTML实体：
<syntaxhighlight lang="javascript">
function encodeHTML(str) {
  return str.replace(/[&<>'"]/g, 
    tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      "'": '&#39;',
      '"': '&quot;'
    }[tag]));
}

// 示例
console.log(encodeHTML('<script>alert(1)</script>'));
// 输出: &lt;script&gt;alert(1)&lt;/script&gt;
</syntaxhighlight>

=== 2. URL编码 ===
使用<code>encodeURIComponent()</code>处理URL参数：
<syntaxhighlight lang="javascript">
const userInput = "search?q=<script>";
const safeURL = `https://example.com/${encodeURIComponent(userInput)}`;
console.log(safeURL); 
// 输出: https://example.com/search%3Fq%3D%3Cscript%3E
</syntaxhighlight>

=== 3. JavaScript字符串编码 ===
使用JSON序列化动态插入的JS数据：
<syntaxhighlight lang="javascript">
const userData = { name: "</script><script>alert(1)" };
const safeData = JSON.stringify(userData.name);
console.log(safeData); 
// 输出: "\u003C/script\u003E\u003Cscript\u003Ealert(1)"
</syntaxhighlight>

== 实际案例 ==

=== 案例1：用户评论系统 ===
未编码的输出可能导致XSS：
<syntaxhighlight lang="html">
<!-- 漏洞代码 -->
<div class="comment">
  {{userComment}}
</div>
</syntaxhighlight>

安全解决方案：
<syntaxhighlight lang="javascript">
document.querySelector('.comment').textContent = userComment;
// 或使用现代框架的自动编码：
// React: <div>{userComment}</div>
// Vue: <div v-html="userComment"></div>（仍不推荐）
</syntaxhighlight>

=== 案例2：动态生成HTML ===
使用DOM API替代字符串拼接：
<syntaxhighlight lang="javascript">
// 不安全
element.innerHTML = `<div>${userInput}</div>`;

// 安全
const div = document.createElement('div');
div.textContent = userInput;
element.appendChild(div);
</syntaxhighlight>

== 编码上下文对比 ==
不同场景需要不同的编码方式：

<mermaid>
flowchart TD
    A[输出目标] --> B{HTML内容}
    A --> C{HTML属性}
    A --> D{URL参数}
    A --> E{JavaScript代码}
    B -->|使用textContent或HTML实体| F[安全]
    C -->|属性引号包裹+编码| G[安全]
    D -->|encodeURIComponent| H[安全]
    E -->|JSON.stringify| I[安全]
</mermaid>

== 数学表达 ==
编码函数可视为映射函数：
<math>
f : S \rightarrow S' \quad \text{其中} \quad \forall c \in S, f(c) \text{为安全表示}
</math>

== 最佳实践 ==
* 优先使用现代框架（React/Vue/Angular）的内置编码机制
* 避免使用<code>innerHTML</code>，改用<code>textContent</code>
* 对第三方库（如<code>DOMPurify</code>）进行内容消毒
* 实施[[内容安全策略]]（CSP）作为额外防护层

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

[[Category:JavaScript安全]]
[[Category:Web开发]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript安全]]