CSRF 预防者：JavaScript 的妙招，确保网络无虞

跨站请求伪造（CSRF）是一种WEB攻击，攻击者利用受害用户的受信任浏览器发起恶意的Http请求。为了应对这种威胁，javascript扮演着至关重要的角色，提供了一系列防御措施：

同源策略：

同源策略是Web浏览器的内置安全机制，它限制脚本只能访问来自同一来源（即域、协议和端口）的资源。通过强制执行同源策略，可以防止CSRF攻击，因为攻击者的脚本将无法请求受害者的受信任域。

if (document.referrer !== location.origin) {
  alert("跨域请求已阻止");
}

令牌化：

令牌是一种随机生成的字符串，在受害用户的浏览器中存储，并在每个HTTP请求中包含。服务器验证令牌的有效性，以确保请求是由合法用户发起的。

// 创建一个 CSRF 令牌
const token = generateToken();

// 将令牌存储到 cookie 中
document.cookie = "csrftoken=" + token;

// 在每个 ajax 请求中包含令牌
$.ajax({
  url: "/api/endpoint",
  headers: {
    "X-CSRF-Token": token,
  },
});

双重提交令牌：

双重提交令牌是一种通过向提交表单添加隐藏字段来实现的CSRF预防机制。该字段包含一个令牌，服务器在验证表单提交之前进行验证。

<fORM action="/submit" method="post">
  <input type="hidden" name="csrftoken" value="<%= csrfToken %>">
  <input type="submit" value="Submit">
</form>

同源-相同站点策略（SOP）：

SOP是同源策略的扩展，它进一步限制脚本仅能从同一来源加载资源，即使它们来自不同的子域。这有助于防止跨子域的CSRF攻击。

// 允许跨子域加载资源
document.crossOrigin = "use-credentials";

XMLHttpRequest 封装：

XMLHttpRequest对象是JavaScript中用于发起HTTP请求的内置对象。通过封装XMLHttpRequest对象，可以实现CSRF预防措施，例如禁止未经授权的跨域请求。

const xhr = new XMLHttpRequest();
xhr.open("POST", "/api/endpoint");
xhr.withCredentials = true; // 允许跨域请求

服务器端验证：

除了在客户端实施预防措施之外，在服务器端进行验证对于CSRF预防至关重要。服务器应验证请求中的令牌或双重提交令牌，以确保请求的真实性。

// 验证 CSRF 令牌
if (isset($_POST["csrftoken"])) {
  if (!verifyToken($_POST["csrftoken"])) {
    die("CSRF 令牌无效");
  }
}

通过实施这些JavaScript防御措施，Web应用程序可以有效预防CSRF攻击，确保网络安全。这些技术有助于防止未经授权的请求，保护用户数据并维护Web应用程序的完整性。