XMLHttpRequest 与 Referrer 对 Web 安全的影响

2023-07-05 15:05:27

XMLHttpRequest 和 Referrer 的安全隐患

XMLHttpRequest 的跨域攻击

XMLHttpRequest（XHR）是一个在 JavaScript 中用来发送 HTTP 请求的内置对象。虽然它带来了便利，却也带来了一些安全隐患。由于 XHR 不受同源策略的限制，恶意脚本可以利用它跨域访问敏感数据，甚至执行有害操作，比如窃取密码或劫持会话。

CSRF 攻击和 Referrer 头

Referrer 头包含了当前页面的 URL，通常用来追踪用户在网站上的活动。但是，恶意网站可以利用 Referrer 头发起跨站请求伪造（CSRF）攻击。CSRF 利用受害者的信任，诱骗他们向目标网站发起伪造的请求，从而执行未经授权的操作。

缓解措施

遵循同源策略

为了防止跨域攻击，务必遵循同源策略。在使用 XHR 时，只访问来自与当前页面相同域的资源。

使用 CORS

如果需要访问跨域资源，可以使用跨域资源共享（CORS）机制。CORS 是一种安全机制，允许不同域之间的脚本安全地交换数据。

禁止 Referrer 头

为了防止 CSRF 攻击，可以禁止服务器端的 Referrer 头。这将阻止恶意网站利用 Referrer 头来伪造请求。

使用 CSRF 令牌

CSRF 令牌是一个随机生成的字符串，存储在用户会话中。每次请求中，CSRF 令牌都会被发送到服务器端进行验证。如果令牌不正确，则拒绝请求。

代码示例

XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/v1/users');
xhr.onload = function() {
  const users = JSON.parse(this.responseText);
};
xhr.send();

CORS

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/v1/users', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.onload = function() {
  const users = JSON.parse(this.responseText);
};
xhr.send();

CSRF 令牌

const token = generateCSRFToken();

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/v1/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('CSRF-Token', token);
xhr.onload = function() {
  const users = JSON.parse(this.responseText);
};
xhr.send(JSON.stringify({ username: 'example' }));