XMLHttpRequest和Referer

最新推荐文章于 2023-09-18 15:19:22 发布
最新推荐文章于 2023-09-18 15:19:22 发布
阅读量1.9k 收藏 18
点赞数 20
文章标签： 服务器 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57549548/article/details/128592280
版权

XMLHttpRequest 对象简介

1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。

AJAX简介

AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。

通过AJAX可以在浏览器中向服务器发送异步请求。

最大的优势：无刷新的获取数据。

Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML: 可扩展标记语言，被设计用来传输和存储数据。

与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。

Ajax特点：

优点：

  • 可以无需刷新页面，与服务器进行通信
  • 允许依据用户事件来更新部分页面内容

缺点：

  • 没有浏览历史，不能回退
  • 存在跨域问题（同源）
  • SEO不友好（搜索引擎优化，对爬虫不友好）

HTTP协议：hypertext transport protocol（超文本传输协议），协议详细规定了浏览器和万维网服务器之间互相通信的规则。（一种约定，规则）

1. 请求报文：重点是格式和参数

请求行：请求类型 请求路径+查询字符串 协议版本

2. 响应报文：

响应行：协议版本 响应状态码 响应状态字符串

状态码分类：

 常见响应状态码：

 

XMLHttpRequest 的实例属性

XMLHttpRequest.readyState

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。

  • 0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。

  • 1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。

  • 2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。

  • 3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。

  • 4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

var xhr = new XMLHttpRequest();

if (xhr.readyState === 4) {
  // 请求结束，处理服务器返回的数据
} else {
  // 显示提示“加载中……”
}

上面代码中，xhr.readyState等于4时，表明脚本发出的 HTTP 请求已经完成。其他情况，都表示 HTTP 请求还在进行中。

XMLHttpRequest.onreadystatechange

XMLHttpRequest.onreadystatechange属性指向一个监听函数。readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

另外，如果使用实例的abort()方法，终止 XMLHttpRequest 请求，也会造成readyState属性变化，导致调用XMLHttpRequest.onreadystatechange属性。

下面是一个例子。

var xhr = new XMLHttpRequest();
xhr.open( 'GET', 'http://example.com' , true );
xhr.onreadystatechange = function () {
  if (xhr.readyState !== 4 || xhr.status !== 200) {
    return;
  }
  console.log(xhr.responseText);
};
xhr.send();

 

XMLHttpRequest.response

XMLHttpRequest.response属性表示服务器返回的数据体（即 HTTP 回应的 body 部分）。它可能是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定。该属性只读。

如果本次请求没有成功或者数据不完整，该属性等于null。但是，如果responseType属性等于text或空字符串，在请求没有结束之前（readyState等于3的阶段），response属性包含服务器已经返回的部分数据。

var xhr = new XMLHttpRequest();
​
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    handler(xhr.response);
  }
}

XMLHttpRequest.responseType

XMLHttpRequest.responseType属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉浏览器如何解读返回的数据。如果responseType设为空字符串，就等同于默认值text。

XMLHttpRequest.responseType属性可以等于以下值。

  • ""（空字符串）：等同于text，表示服务器返回文本数据。

  • "arraybuffer"：ArrayBuffer 对象，表示服务器返回二进制数组。

  • "blob"：Blob 对象，表示服务器返回二进制对象。

  • "document"：Document 对象，表示服务器返回一个文档对象。

  • "json"：JSON 对象。

  • "text"：字符串。

上面几种类型之中，text类型适合大多数情况，而且直接处理文本也比较方便。document类型适合返回 HTML / XML 文档的情况，这意味着，对于那些打开 CORS 的网站，可以直接用 Ajax 抓取网页，然后不用解析 HTML 字符串，直接对抓取回来的数据进行 DOM 操作。blob类型适合读取二进制数据，比如图片文件

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';
​
xhr.onload = function(e) {
  if (this.status === 200) {
    var blob = new Blob([xhr.response], {type: 'image/png'});
    // 或者
    var blob = xhr.response;
  }
};
​
xhr.send();

如果将这个属性设为ArrayBuffer，就可以按照数组的方式处理二进制数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
​
xhr.onload = function(e) {
  var uInt8Array = new Uint8Array(this.response);
  for (var i = 0, len = uInt8Array.length; i < len; ++i) {
    // var byte = uInt8Array[i];
  }
};
​
xhr.send();

如果将这个属性设为json，浏览器就会自动对返回数据调用JSON.parse()方法。也就是说，从xhr.response属性（注意，不是xhr.responseText属性）得到的不是文本，而是一个 JSON 对象。

XMLHttpRequest.responseText

XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);
​
xhr.responseType = 'text';
xhr.onload = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
​
xhr.send(null);

XMLHttpRequest.responseXML/JSON

XMLHttpRequest.responseXML属性返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。如果本次请求没有成功，或者收到的数据不能被解析为 XML 或 HTML，该属性等于null。

该属性生效的前提是 HTTP 回应的Content-Type头信息等于text/xml或application/xml。这要求在发送请求前，XMLHttpRequest.responseType属性要设为document。如果 HTTP 回应的Content-Type头信息不等于text/xml和application/xml，但是想从responseXML拿到数据（即把数据按照 DOM 格式解析），那么需要手动调用XMLHttpRequest.overrideMimeType()方法，强制进行 XML 解析。

该属性得到的数据，是直接解析后的文档 DOM 树。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);
​
xhr.responseType = 'document';
xhr.overrideMimeType('text/xml');
​
xhr.onload = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseXML);
  }
};
​
xhr.send(null);

XMLHttpRequest.responseURL

XMLHttpRequest.responseURL属性是字符串，表示发送数据的服务器的网址。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/test', true);
xhr.onload = function () {
  // 返回 http://example.com/test
  console.log(xhr.responseURL);
};
xhr.send(null);

注意，这个属性的值与open()方法指定的请求网址不一定相同。如果服务器端发生跳转，这个属性返回最后实际返回数据的网址。另外，如果原始 URL 包括锚点（fragment），该属性会把锚点剥离。

事件监听属性

XMLHttpRequest 对象可以对以下事件指定监听函数。

  • XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数

  • XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数

  • XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数

  • XMLHttpRequest.onerror：error 事件（请求失败）的监听函数

  • XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数

  • XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数

  • XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

下面是一个例子。

xhr.onload = function() {
 var responseText = xhr.responseText;
 console.log(responseText);
 // process the response.
};
​
xhr.onabort = function () {
  console.log('The request was aborted');
};
​
xhr.onprogress = function (event) {
  console.log(event.loaded);
  console.log(event.total);
};
​
xhr.onerror = function() {
  console.log('There was an error!');
};

progress事件的监听函数有一个事件对象参数，该对象有三个属性：loaded属性返回已经传输的数据量，total属性返回总的数据量，lengthComputable属性返回一个布尔值，表示加载的进度是否可以计算。所有这些监听函数里面，只有progress事件的监听函数有参数，其他函数都没有参数。

注意，如果发生网络错误（比如服务器无法连通），onerror事件无法获取报错信息。也就是说，可能没有错误对象，所以这样只能显示报错的提示。

XMLHttpRequest.upload

XMLHttpRequest 不仅可以发送请求，还可以发送文件，这就是 AJAX 文件上传。发送文件以后，通过XMLHttpRequest.upload属性可以得到一个对象，通过观察这个对象，可以得知上传的进展。主要方法就是监听这个对象的各种事件：loadstart、loadend、load、abort、error、progress、timeout。

假定网页上有一个<progress>元素。

<progress min="0" max="100" value="0">0% complete</progress>

文件上传时，对upload属性指定progress事件的监听函数，即可获得上传的进度。

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function (e) {};
​
  var progressBar = document.querySelector('progress');
  xhr.upload.onprogress = function (e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      // 兼容不支持 <progress> 元素的老式浏览器
      progressBar.textContent = progressBar.value;
    }
  };
​
  xhr.send(blobOrFile);
}
​
upload(new Blob(['hello world'], {type: 'text/plain'}));

XMLHttpRequest 的实例方法

XMLHttpRequest.open()

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。

void open(
   string method,
   string url,
   optional boolean async,
   optional string user,
   optional string password
);

  • method：表示 HTTP 动词方法，比如GET、POST、PUT、DELETE、HEAD等。

  • url: 表示请求发送目标 URL。

  • async: 布尔值，表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。该参数可选。由于同步 AJAX 请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker 里面使用。所以，这个参数轻易不应该设为false。

  • user：表示用于认证的用户名，默认为空字符串。该参数可选。

  • password：表示用于认证的密码，默认为空字符串。该参数可选。

注意，如果对使用过open()方法的 AJAX 请求，再次使用这个方法，等同于调用abort()，即终止请求。

下面发送 POST 请求的例子。

var xhr = new XMLHttpRequest();
xhr.open('POST', encodeURI('someURL'));

XMLHttpRequest.send()

XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

下面是 GET 请求的例子。

var xhr = new XMLHttpRequest();
xhr.open('GET',
  'http://www.example.com/?id=' + encodeURIComponent(id),
  true
);
xhr.send(null);

上面代码中，GET请求的参数，作为查询字符串附加在 URL 后面。

下面是发送 POST 请求的例子。

var xhr = new XMLHttpRequest();
var data = 'email='
  + encodeURIComponent(email)
  + '&password='
  + encodeURIComponent(password);
​
xhr.open('POST', 'http://www.example.com', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);

注意，所有 XMLHttpRequest 的监听事件，都必须在send()方法调用之前设定。

send方法的参数就是发送的数据。多种格式的数据，都可以作为它的参数。

void send();
void send(ArrayBufferView data);
void send(Blob data);
void send(Document data);
void send(String data);
void send(FormData data);

如果send()发送 DOM 对象，在发送之前，数据会先被串行化。如果发送二进制数据，最好是发送ArrayBufferView或Blob对象，这使得通过 Ajax 上传文件成为可能。

下面是发送表单数据的例子。FormData对象可以用于构造表单数据。

var formData = new FormData();
​
formData.append('username', '张三');
formData.append('email', 'zhangsan@example.com');
formData.append('birthDate', 1940);
​
var xhr = new XMLHttpRequest();
xhr.open('POST', '/register');
xhr.send(formData);

上面代码中，FormData对象构造了表单数据，然后使用send()方法发送。它的效果与发送下面的表单数据是一样的。

<form id='registration' name='registration' action='/register'>
  <input type='text' name='username' value='张三'>
  <input type='email' name='email' value='zhangsan@example.com'>
  <input type='number' name='birthDate' value='1940'>
  <input type='submit' onclick='return sendForm(this.form);'>
</form>

下面的例子是使用FormData对象加工表单数据，然后再发送。

function sendForm(form) {
  var formData = new FormData(form);
  formData.append('csrf', 'e69a18d7db1286040586e6da1950128c');
​
  var xhr = new XMLHttpRequest();
  xhr.open('POST', form.action, true);
  xhr.onload = function() {
    // ...
  };
  xhr.send(formData);
​
  return false;
}
​
var form = document.querySelector('#registration');
sendForm(form);

XMLHttpRequest.abort()

XMLHttpRequest.abort()方法用来终止已经发出的 HTTP 请求。调用这个方法以后，readyState属性变为4，status属性变为0。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/page.php', true);
setTimeout(function () {
  if (xhr) {
    xhr.abort();
    xhr = null;
  }
}, 5000);

上面代码在发出5秒之后，终止一个 AJAX 请求。

XMLHttpRequest 实例的事件

readyStateChange 事件

readyState属性的值发生改变，就会触发 readyStateChange 事件。

我们可以通过onReadyStateChange属性，指定这个事件的监听函数，对不同状态进行不同处理。尤其是当状态变为4的时候，表示通信成功，这时回调函数就可以处理服务器传送回来的数据。

progress 事件

上传文件时，XMLHttpRequest 实例对象本身和实例的upload属性，都有一个progress事件，会不断返回上传的进度。

var xhr = new XMLHttpRequest();
​
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
  } else {
    console.log('无法计算进展');
  }
}
​
xhr.addEventListener('progress', updateProgress);
​
xhr.open();

load 事件、error 事件、abort 事件

load 事件表示服务器传来的数据接收完毕，error 事件表示请求出错，abort 事件表示请求被中断（比如用户取消请求）。

var xhr = new XMLHttpRequest();
​
xhr.addEventListener('load', transferComplete);
xhr.addEventListener('error', transferFailed);
xhr.addEventListener('abort', transferCanceled);
​
xhr.open();
​
function transferComplete() {
  console.log('数据接收完毕');
}
​
function transferFailed() {
  console.log('数据接收出错');
}
​
function transferCanceled() {
  console.log('用户取消接收');
}

loadend 事件

abort、load和error这三个事件，会伴随一个loadend事件，表示请求结束，但不知道其是否成功。

xhr.addEventListener('loadend', loadEnd);
​
function loadEnd(e) {
  console.log('请求结束，状态未知');
}

timeout 事件

服务器超过指定时间还没有返回结果，就会触发 timeout 事件，具体的例子参见timeout属性一节。

Referer

Referer请求头包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用Referer（注：正确英语拼写应该是referrer，由于早期HTTP规范的拼写错误，为了保持向后兼容就一直延续下来）请求头识别访问来源，可能会以此统计分析、日志记录以及缓存优化等。

Referrer-policy

Referrer-policy作用就是为了控制请求头中referer的内容

包含以下值：

  • no-referrer : 整个referee首部会被移除，访问来源信息不随着请求一起发送。

  • no-referrer-when-downgrade : 在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下，引用页面的地址会被发送(HTTPS->HTTPS)，但是在降级的情况下不会被发送 (HTTPS->HTTP).

  • origin: 在任何情况下，仅发送文件的源作为引用地址。例如 https://example.com/page.html 会将 Example Domain 作为引用地址。

  • origin-when-cross-origin: 对于同源的请求，会发送完整的URL作为引用地址，但是对于非同源请求仅发送文件的源。

  • same-origin: 对于同源的请求会发送引用地址，但是对于非同源请求则不发送引用地址信息。

  • strict-origin： 在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)。

  • strict-origin-when-cross-origin： 对于同源的请求，会发送完整的URL作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此首部 (HTTPS->HTTP)。

  • unsafe-url： 无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为引用地址。（最不安全了）

盗链

盗链是指在自己的页面上展示一些并不在自己服务器上的一些内容， 获取别人的资源地址，绕过别人的资源展示页面，直接在自己的页面上向最终用户提供此内容。 一般被盗链的都是图片、 可执行文件、 音视频文件、压缩文件等资源。通过盗链的手段可以减轻自己服务器的负担

防盗链的工作原理

通过Referer或者签名，网站可以检测目标网页访问的来源网页，如果是资源文件，则可以追踪到显示它的网页地址 一旦检测到来源不是本站，即进行阻止或者返回指定的页面

绕过图片防盗链

那么现在的很多网站是如何利用referer来进行防图片盗链的呢？ 三种情况下允许引用图片：

  1. 本网站。

  2. 无referer信息的情况。（服务器认为是从浏览器直接访问的图片URL，所以这种情况下能正常访问）

  3. 授权的网址。

我们只能从情况2入手，通过设置referer为空进行绕过防盗链。

利用https网站盗链http资源网站，refer不会发送

先利用openssl生成自签名证书（具体可看https://github.com/zxl925768661/Blog/tree/main/HTTP%E7%9B%B8%E5%85%B3/Demos/referer/demo03） client.js

let https = require("https");
let fs = require("fs");
let url = require("url");
let path = require("path");
​
​
var options = {
  hostname: "localhost",
  port: 8000,
  path: "/",
  method: "GET",
  rejectUnauthorized: false,
  key: fs.readFileSync("./keys/client.key"),
  cert: fs.readFileSync("./keys/client.crt"),
  ca: [fs.readFileSync("../ca/ca.crt")],
};
​
// 创建服务器
https.createServer(options, function (req, res) {
​
  let staticPath = path.join(__dirname, "src");
  let pathObj = url.parse(req.url, true);
​
  if (pathObj.pathname === "/") {
    pathObj.pathname += "index.html";
  }
  //  读取静态目录里面的文件，然后发送出去
  let filePath = path.join(staticPath, pathObj.pathname);
  fs.readFile(filePath, "binary", function (err, content) {
    if (err) {
      res.writeHead(404, "Not Found");
      res.end("<h1>404 Not Found</h1>");
    } else {
      res.writeHead(200, "Not Found");
      res.write(content, "binary");
      res.end();
    }
  });
​
}).listen(8080);

index.html

<div id="container">
    <img src="http://localhost:9999">
</div>

设置meta

<meta name="referrer" content="no-referrer" />

设置referrerpolicy="no-referrer"

以上已验证过，只是存在部分兼容性问题。

https://images.weserv.nl/?url=${你的图片地址}

因为网址是国外的速度有点慢效果还行，目的就是返回一个不受限制的图片，但是 GIF 格式会返回jpg也就是没有了动画效果。

利用iframe伪造请求referer

内容参考 如何绕开referrer防盗链 - 掘金

function showImg(src, wrapper ) {
    let url = new URL(src);
    let frameid = 'frameimg' + Math.random();
    window.img = `<img id="tmpImg" width=400 src="${url}" alt="图片加载失败，请稍后再试"/> `;
​
    // 构造一个iframe
    iframe = document.createElement('iframe')
    iframe.id = frameid
    iframe.src = "javascript:parent.img;" // 通过内联的javascript，设置iframe的src
    // 校正iframe的尺寸，完整展示图片
    iframe.onload = function () {
        var img = iframe.contentDocument.getElementById("tmpImg")
        if (img) {
            iframe.height = img.height + 'px'
            iframe.width = img.width + 'px'
        }
    }
    iframe.width = 10
    iframe.height = 10
    iframe.scrolling = "no"
    iframe.frameBorder = "0"
    wrapper.appendChild(iframe)
}
​
showImg('https://tiebapic.baidu.com/forum/w%3D580%3B/sign=f88eb0f2cf82b9013dadc33b43b6ab77/562c11dfa9ec8a135455cc35b203918fa1ecc09c.jpg', document.querySelector('#container'))

常见防盗链方法

防盗链一般有下面几种方式：

  1. 动态文件名，或者定期修改文件名称或路径

  2. 判定引用地址，一般是判断浏览器请求时HTTP头的Referer字段的值

  3. 使用登录验证，cookie

  4. 图片加水印

  5. ...

利用nginx

ngx_http_referer_module用于阻挡来源非法域名的请求 nginx指令valid_refers，全局变量$invalid_refer 对资源的防盗链nginx配置为

location ~.*\.(gif|jpg|png|bmp|flv|swf|rar|zip)$
{
    valid_referers none blocked test.com *.test.com;   // 加none的目的是确保浏览器可以直接访问资源
    if($invalid_referer)
    {
        #return 403;  // 直接返回403
        rewrite ^/ http://www.test.com/403.jpg; // 返回指定提示图片
    }
}

这种方法是在server或者location段中加入：valid_referers。这个指令在referer头的基础上为 $invalid_referer 变量赋值，其值为0或1。如果valid_referers列表中没有Referer头的值， $invalid_referer将被设置为1。 如果 $invalid_referer等于 1，在if语句中返回一个 403 给用户，这样用户便会看到一个 403 的页面, 如果使用下面的rewrite，那么盗链的图片都会显示 403.jpg。 该指令支持none和blocked:

  • 其中none表示空的来路，也就是直接访问，比如直接在浏览器打开一个文件

  • blocked表示被防火墙标记过的来路，*..com表示所有子域名

但是传统的防盗链也会存在一些问题，因为refer是可以伪造的， 所以可以使用加密签名的方式来解决这个问题。 什么是加密签名？就是当我们请求一个图片的时候，我要给它带一些签名过去，然后返回图片的时候我们判断下签名是否正确，相当于对一个暗号。 更多内容请参考 防盗链的原理以及实现 - 知乎

服务器端判断referer

我们能通过对比req.headers['referer']和req.url中的host来确认资源请求是否是别的站点发来的。 接着，当我们知道了资源请求的来源，我们就能通过一系列手段来决定是否响应请求以及怎样响应。 通常的做法是设置一个白名单，在白名单内的请求我们就响应，否则就不响应。

let http = require("http");
let fs = require("fs");
let url = require("url");
let path = require("path");
// 白名单
const whiteList = ["localhost:8080"];
​
/**
 * 三种情况下允许引用图片：
 * 1. 本网站
 * 2. 无referer信息的情况。（服务器认为是从浏览器直接访问的图片URL，所以这种情况下能正常访问）
 * 3. 授权的网址。(配置白名单)
 */
​
http
  .createServer(function (req, res) {
​
    let refer = req.headers["referer"] || req.headers["refer"];
    console.log('refer----', refer, req.url);
    res.setHeader("Access-Control-Allow-Origin", "*");
    if (refer) {
      let referHostName = url.parse(refer, true).host;
      let currentHostName = url.parse(req.url, true).host;
      console.log(referHostName, currentHostName, '--==')
      // 当referer不为空, 但host未能命中目标网站且不在白名单内时, 返回错误的图
      if (
        referHostName != currentHostName &&
        whiteList.indexOf(referHostName) == -1
      ) {
        res.setHeader("Content-Type", "image/jpeg");
        fs.createReadStream(path.join(__dirname, "/src/img/403.jpg")).pipe(res);
        return;
      }
    }
    // 当referer为空时, 返回正确的图
    res.setHeader("Content-Type", "image/jpeg");
    fs.createReadStream(path.join(__dirname, "/src/img/1.jpg")).pipe(res);
    
  })
  .listen(9999);

利用http启动一个客户端： client.js

let http = require("http");
let fs = require("fs");
let url = require("url");
let path = require("path");
​
// 创建服务器
http.createServer(function (req, res) {
  let staticPath = path.join(__dirname, "src");
  let pathObj = url.parse(req.url, true);
​
  if (pathObj.pathname === "/") {
    pathObj.pathname += "index.html";
  }
  //  读取静态目录里面的文件，然后发送出去
  let filePath = path.join(staticPath, pathObj.pathname);
  fs.readFile(filePath, "binary", function (err, content) {
    if (err) {
      res.writeHead(404, "Not Found");
      res.end("<h1>404 Not Found</h1>");
    } else {
      res.writeHead(200, "Not Found");
      res.write(content, "binary");
      res.end();
    }
  });
}).listen(8080);

index.html

<div id="container">
    <img src="http://localhost:9999">
</div>

王凯-20
关注
  • 20
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于request.getHeader(Referer)的问题探讨
01-08
今天我来分享一下，request.getHeader(“Referer”)获取上次访问的URL链接，在什么情况下他会出现问题！ 我在某些页面中，有某几个按钮，分别用来跳转到action.do?method=m 但是，我是用 warpLoaction（”url”）;这个来链接过去的，结果，我在火狐浏览器中，可以正确的 获取上次访问的页面，在IE6下却获取不到。后来去网上百度了一下，看到了一哥门的评 说， request.getHeader(“Referer”)要走HTTP协议才有值，也就是说要通过 标记，才能获取到值。当然通过表单提交的也可以。而通过locatio
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
10-28
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法，需要的朋友可以参考下。
http请求的referer属性
热门推荐
摩羯座
12-21 3万+
  HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。比如从我主页上链接到一个朋友那里，他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。下列情况是从浏览器的地址栏正常取得Request.ServerVariables(
request:referer，origin，host
zqj1172102457的博客
04-24 1865
referer：根据Referer的定义，它的作用是指示一个请求是从哪里链接过来，那么当一个请求并不是由链接触发产生的，那么自然也就不需要指定这个请求的链接来源。比如在一个http://www.google.com页面里有一个www.baidu.com 的链接，点击这个链接，发出的请求request的head头的reference就是http://www.google.com。 Origin:主要...
javaweb之request获取referer请求头实现防盗链
Survivalist_Boy的博客
03-18 2087
javaweb之request获取referer请求头实现防盗链 package test.request; import java.io.IOException; import javax.servlet.ServletException; import jav...
HttpWebRequest..::.Referer 属性
bingtingabc的专栏
03-06 3908
获取或设置 RefererHTTP 标头的值。 命名空间： System.Net 程序集： System（在 System.dll 中） 语法 Public Property Referer As String Get Set public string Referer { get; set; } public: property Stri
通过修改referer下载文件的方法
09-06
`GetFile`函数则是用户触发下载动作的入口，它根据用户输入的URL和Referer值，调用组件的`GetFile`方法。 总的来说，这个技术涉及到了HTTP协议中的`Referer`头、ActiveX对象的使用、XMLHttpRequest的异步请求处理...
VBS伪造HTTP-REFERER的实现方法
09-05
在提供的代码示例中，可以看到作者首先尝试使用`msxml2.xmlhttp`对象（一个XMLHttpRequest对象的实现）来发送GET请求，并设置Referer头。然而，这种方式在访问设置了Referer检查的页面时，返回的结果是"No Referer...
ng-movies:使用 omdb API 和 AngularJS 的电影和系列浏览器
07-07
他们通过检查“Referer”标头来阻止对其图像的跨域请求。 如果您使用 XMLHttpRequest，引用标头是不可欺骗的。 Angular 的 $http 服务的核心是什么。 API 所做的就是删除引用标头，向图像发出请求并将其作为 base64...
XMLHttpRequest 与 Referrer
qq_53396358的博客
02-01 191
XMLHttpRequest是基于XML的HTTP请求。
request.getHeader("referer")防盗链
05-07
HTTP headers是HTTP请求和相应的核心模块，它承载了关于客户端浏览器、请求页面、服务器等相关信息。Referer是HTTP头中的一个属性，告诉服务器我是从哪个页面链接过来的。
XMLHttpRequest和referer
asl404的博客
01-10 817
无
referer 和 request URL
sdlyjzh的专栏
01-16 4053
request是你请求的url，而referer是指从哪里跳转过来的。 一般是你在页面点击某些操作，由前端代码，请求requestURL
request读取referer请求头防止盗链
dxm809的博客
09-26 460
package com.ithiema.header; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class RefererServle.
HttpServletRequest通过Referer实现简单防盗链
秃头披风侠的博客
02-26 1696
通过Referer实现一个简单的防盗链
使用request之使用Referer请求头完成防盗链
qq_40222981的博客
10-12 1738
使用html网页进行跳转访问,从而用referer得到请求的来源url / doGet使用防盗链 Referer请求头 String referer = request.getHeader("Referer"); System.out.println(referer); if(referer == null ){ response.sendRedirect("http://...
围绕http请求头中Referer展开的一些知识
好好睡觉
01-07 1万+
referer字段含义 防盗链绕过
XMLHttpRequest介绍
最新发布
西凉的悲伤博客
09-18 1825
2.初始化 使用 open 方法进行一些初始化配置，method 和 URL 是必传的，其余的是可选的。参数说明：method —— HTTP 方法。通常是 “GET” 或 “POST”，小写也可。 URL —— 要请求的 URL，通常是一个字符串，也可以是 URL 对象。 async —— 是否同步。如果不传默认为true，如果显式地设置为 false，那么请求将会以同步的方式处理。 user，password —— HTTP 基本身份验证（如果需要的话）的登录名和密码。 使用 send 方法就会建立连
Request.Referer的乱码终极解决方法+获得用户是用什么关键字通过搜索引擎进来的
田林的博客
09-03 2486
当你想获取Url字符串的时候，最好不要直接调用Request.UrlReferrer.ToString()方法，因为这样有可能返回的是一堆乱码。产生的原因是，用户在来你网站之前的那个网站的编码方式（Encoding)也许和你的网站不一样，导致UrlDecode的时候出现了乱码。这里建议使用Request.UrlReferrer.OriginalString，这个属性返回的就是当时构造U
浏览器不允许设置referer,绕开方法说明
07-14
是的，浏览器通常会限制对 Referer 请求头的直接设置，以保护用户隐私和防止某些安全漏洞的利用。但是，有一些方法可以绕过浏览器的限制来设置 Referer 请求头。以下是一些常用的方法： 1. 使用服务器端代理：在你自己的服务器上设置一个代理，然后通过代理服务器发送请求。在代理服务器上，你可以设置自定义的 Referer 请求头，并将请求转发到目标服务器。这样，浏览器只会看到代理服务器的地址作为 Referer，而不是你的真实来源。这种方法需要你有自己的服务器，并且需要编写代理服务器的逻辑。 2. 使用跨域资源共享（CORS）：如果目标服务器允许跨域请求，并且在响应的头部中设置了 `Access-Control-Allow-Origin` 字段允许你的域名进行跨域访问，那么你可以使用 XMLHttpRequest 或 Fetch API 发送跨域请求，并在请求头中设置自定义的 Referer。目标服务器会接受并处理这个请求，将响应发送回给你的前端代码。 需要注意的是，使用这些方法时，你需要确保你的行为符合适用法律和相关隐私政策，并尊重服务器所有者的设置和要求。同时，某些网站可能会采取其他安全措施来限制或阻止设置 Referer 请求头，因此不是所有网站都可以成功绕过浏览器的限制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值