详解JS同源策略和CSRF

JS同源策略指的是浏览器的一种安全策略，限制了一个源加载的文档或脚本如何与另一个源的资源进行交互。一般来说，源指的是协议+域名+端口号的组合，如果两个资源不属于同一个源，那么它们之间的交互就会受到限制。

常见的一些跨域问题，例如通过 XMLHttpRequest 发起的请求或者使用 iframe 加载的页面，都受到同源策略的限制。在前端开发过程中，我们通常使用 JSONP、CORS、跨文档消息等技术来绕过同源策略限制。

CSRF（Cross Site Request Forgery，跨站请求伪造）攻击则是一种利用网站用户身份的攻击方式，攻击者可以在用户毫不知情的情况下发送请求，触发目标网站中的某些操作。

为了防止 CSRF 攻击，我们可以采取一些措施，例如使用验证码、检验 Referer、使用 Token 等。

下面，我们通过示例介绍在实际开发中如何应对同源策略和 CSRF 攻击。

示例一：JSONP 跨域请求

假设我们的网站需要从另一个域名的服务器上获取一些数据，但受到同源策略的限制。

如果该服务器支持 JSONP，我们就可以通过以下方式来获取数据：

function handleResponse(data) {
  // 处理返回结果
}

const script = document.createElement("script");
script.src = "https://www.example.com/data?callback=handleResponse";
document.head.appendChild(script);

在这段代码中，script 标签的 src 属性指向一个远程服务器上的脚本，执行该脚本会触发 handleResponse 函数，该函数用来处理返回的数据。

由于 script 标签是不受同源策略限制的，因此我们可以通过该方式来实现跨域请求。

示例二：Token 防御 CSRF 攻击

在网站用户登录时，我们可以生成一个 Token，并将其存储在用户的 Cookie 中。在用户发起请求时，我们会将该 Token 加入到请求头中，在服务端进行校验。

如果攻击者试图制造一个请求，但没有携带正确的 Token，那么服务器就会拒绝该请求。

以下是一个示例代码：

const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("POST", "http://www.example.com/api/data");
xhr.setRequestHeader("X-CSRF-Token", "k4u6x5j1d9");
xhr.send("data=hello");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    // 处理返回结果
  }
};

在这段代码中，setRequestHeader 方法用来设置请求头信息，我们将 Token 添加到请求头中。在服务端对请求进行校验时，如果请求头中携带了正确的 Token，那么就可以通过请求。如果 Token 不正确，服务器会拒绝该请求。

通过上述示例，我们可以了解到如何使用 JSONP 跨域请求和 Token 防御 CSRF 攻击。在实际开发中，我们需要根据实际情况选择合适的防御手段，并注意在代码中遵守相关的网络安全规范。