编辑“︁JavaScript安全最佳实践”︁（章节）

== 常见安全威胁及防御措施 ==

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

XSS攻击是通过注入恶意脚本到网页中，使其在用户浏览器中执行的一种攻击方式。XSS分为三种类型：
* '''存储型XSS'''：恶意脚本存储在服务器上，当用户访问页面时执行。
* '''反射型XSS'''：恶意脚本作为请求的一部分返回给用户。
* '''DOM型XSS'''：通过修改DOM结构触发恶意脚本。

==== 防御措施 ====
* 使用'''内容安全策略（CSP）'''限制脚本来源。
* 对用户输入进行转义或过滤。

<syntaxhighlight lang="javascript">
// 不安全的代码：直接插入用户输入到HTML中
document.getElementById("output").innerHTML = userInput;

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

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

CSRF攻击诱使用户在不知情的情况下提交恶意请求。例如，攻击者可能伪造一个表单提交到银行网站，利用用户的登录状态完成转账。

==== 防御措施 ====
* 使用'''CSRF令牌'''（每次请求生成唯一令牌）。
* 设置'''SameSite Cookie属性'''。

<syntaxhighlight lang="javascript">
// 后端生成CSRF令牌并嵌入表单
<form action="/transfer" method="POST">
  <input type="hidden" name="csrf_token" value="随机生成的令牌">
  <input type="text" name="amount">
  <button type="submit">转账</button>
</form>
</syntaxhighlight>

=== 3. 数据泄露与敏感信息处理 ===

JavaScript代码可能意外暴露敏感信息，如API密钥、数据库凭据等。

==== 防御措施 ====
* 避免在前端代码中硬编码敏感信息。
* 使用环境变量或后端服务代理敏感请求。

<syntaxhighlight lang="javascript">
// 不安全的代码：API密钥硬编码
const apiKey = "12345-abcde";
fetch(`https://api.example.com/data?key=${apiKey}`);

// 安全的代码：通过后端代理请求
fetch("/api/proxy/data"); // 后端处理密钥
</syntaxhighlight>