CSRF 守护者：JavaScript 的力量，确保网络安全

JavaScript 允许开发者使用各种方法来防止 CSRF 攻击，包括：

1. 令牌验证

令牌验证是一种简单而有效的方法，它涉及生成一个随机令牌并将其存储在受害者的浏览器中。当用户提交表单或执行其他敏感操作时，令牌将包含在请求中。服务器验证令牌是否与存储的令牌匹配，如果不匹配，则请求被拒绝。

示例代码：

function generateToken() {
  // 生成一个随机令牌
  const token = Math.random().toString(36).substr(2, 9);

  // 使用 localStorage 或 cookie 存储令牌
  localStorage.setItem("csrfToken", token);
}

function submitForm() {
  // 获取存储的令牌
  const token = localStorage.getItem("csrfToken");

  // 将令牌添加到表单数据中
  const formData = new FormData(document.querySelector("form"));
  formData.append("csrfToken", token);

  // 发送请求
  fetch("/submit", {
    method: "POST",
    body: formData,
  });
}

2. 同步请求 (XHR)

同步请求 (XHR) 是 AJAX 请求的一种，它在发送请求并接收响应之前阻止浏览器执行。这使得服务器可以验证请求的来源，从而防止 CSRF 攻击。

示例代码：

function submitFormXHR() {
  // 创建一个新的 XHR 对象
  const xhr = new XMLHttpRequest();

  // 将令牌添加到请求头中
  xhr.setRequestHeader("X-CSRF-Token", localStorage.getItem("csrfToken"));

  // 发送请求
  xhr.open("POST", "/submit", false);
  xhr.send();
}

3. 同源策略 (SOP)

同源策略 (SOP) 是一项浏览器安全机制，它限制不同来源的脚本访问彼此的 DOM。这意味着来自恶意网站的脚本无法访问受信任网站存储的凭证或其他敏感信息。

4. 内容安全策略 (CSP)

内容安全策略 (CSP) 是一种 HTTP 头部，它允许网站所有者指定从哪些来源可以加载脚本、样式和图像。通过将 CSP 头部添加到响应中，网站所有者可以防止恶意网站加载脚本并执行 CSRF 攻击。

示例代码：

// 在服务器响应中添加 CSP 头部
res.setHeader("Content-Security-Policy", "default-class="lazy" data-src "self"");

结论

JavaScript 是确保 Web 应用程序免受 CSRF 攻击的重要工具。通过使用令牌验证、同步请求、同源策略和内容安全策略等技术，开发者可以有效地保护用户的会话和数据。了解这些技术至关重要，以构建安全的 Web 应用程序并维护用户信任。