XMLHttpRequest和Referer

news2024/12/27 13:15:40

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/146842.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

承蒙时光不弃，做个好人！

承蒙时光不弃，做个好人！

落幕 2022年博客之星终于要在今晚2023年1月7日24点整落下帷幕&#xff0c;从上个月28号开始&#xff0c;仿佛经历了一场噩梦&#xff0c;本是抱着随便玩玩的心态报了名&#xff0c;没成想&#xff0c;刚开始自投五星之后竟然显示10几名&#xff0c;那是不是我稍加努力就进前十…
阅读更多...
狂揽两千星，速度百倍提升，高性能 Python 编译器 Codon 火了

狂揽两千星，速度百倍提升，高性能 Python 编译器 Codon 火了

前言 众所周知&#xff0c;Python 是一门简单易学、具有强大功能的编程语言&#xff0c;在各种用户使用统计榜单中总是名列前茅。相应地&#xff0c;围绕 Python&#xff0c;研究者开发了各种便捷工具&#xff0c;以更好的服务于这门语言。 编译器充当着高级语言与机器之间的…
阅读更多...
TensorFlow笔记之单神经元完成多分类任务

TensorFlow笔记之单神经元完成多分类任务

文章目录前言一、逻辑回归1.二分类问题2.多分类问题二、数据集调用三、TensorFlow1.x1.定义模型2.训练模型3.结果可视化四、TensorFlow2.x1.定义模型2.训练模型3.结果可视化总结前言 记录分别在TensorFlow1.x与TensorFlow2.x中使用单神经元完成MNIST手写数字识别的过程。 一、…
阅读更多...
Linux出现ping: www.baidu.com: 未知的名称或服务解决方法

Linux出现ping: www.baidu.com: 未知的名称或服务解决方法

文章目录解决对象方法先找到网关在Windows下进行VMnet8的配置ping成功Linux出现ping: www.baidu.com: 未知的名称或服务解决方法 解决对象 本文的方法用于各位大佬已经用过以下方法仍然无法ping成功 Linux防火墙已关闭和Windows防火墙已经关闭已经配置好 vim /etc/sysconfig/…
阅读更多...
手撕C语言理论知识（上）粗略讲解C语言的部分入门知识

手撕C语言理论知识（上）粗略讲解C语言的部分入门知识

目录 C语言的一些基础知识 操作符简介 Scanf的%[ ] 语句&#xff08;分支、循环、goto&#xff09; 函数 C语言的一些基础知识 主函数 - 程序的入口 - main函数有且仅有一个。char - short - int - long - long long - float - double%d - 十进制整型 %u - 无符号整型 %…
阅读更多...
【博学谷学习记录超强总结，用心分享|产品经理基础总结和感悟15】

【博学谷学习记录超强总结，用心分享|产品经理基础总结和感悟15】

互联网产品设计背后的心理学02&#xff1a;你就是会被其他人的行为所影响一、前言二、实验设计及结果分析三、实验原理四、实验方法总结五、产品设计中的应用六、结束语前文回顾&#xff1a;让人们做出决定并不是信息本身&#xff0c;而是这些信息呈现的背景或情景。我们这个信…
阅读更多...
Spring Cloud Alibaba Dubbo（服务远程调用）

Spring Cloud Alibaba Dubbo（服务远程调用）

一、软件环境 &#xff08;1&#xff09;自己部署服务器 所有软件及服务器自己进行管理提供&#xff0c;可以直接在项目中添加Spring Cloud依赖。推荐 <dependencyManagement> <dependencies> <dependency> <groupId>com.a…
阅读更多...
liunx centos9中安装flask并在pycharm中使用图文攻略

liunx centos9中安装flask并在pycharm中使用图文攻略

liunx centos9中安装flask并在pycharm中使用图文攻略1.首先在liunx的终端中输入2.安装好flask之后就在pycharm创建新的项目处添加flask项目3.点击绿色三角箭头开始运行flask项目4. 然后登录ip地址就出现Hllo world就代表flask环境搭建完成需要注意事项1.首先在liunx的终端中输入…
阅读更多...
ngx_thread_pool_init()

ngx_thread_pool_init()

ngx_thread_pool_cycle()函数的主要工作是从待处理的任务队列中获取一个任务&#xff0c;然后调用任务对象的handler()函数处理任务&#xff0c;完成后把任务放置到完成队列中&#xff0c;并通过ngx_notify()通知主线程 手写线程池与性能分析 - 知乎 pthread_cond_wait函数的原…
阅读更多...
【5G RRC】5G系统消息介绍

【5G RRC】5G系统消息介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…
阅读更多...
一键绕过ID锁激活，为什么很多人都会失败？绕ID这一篇就够了

一键绕过ID锁激活，为什么很多人都会失败？绕ID这一篇就够了

最近阳了所以暂时断更&#xff0c;你们也要注意身体&#xff0c;最好不要阳 现在绕ID的方法已经非常完善&#xff0c;一个小白选手只要有设备就可以正常绕过ID&#xff0c;总的来说绕ID分为两个步骤&#xff1a;第一步是手机的越狱&#xff0c;这里只能是用checkra1n越狱&…
阅读更多...
数据在内存中存储☞（超详解）

数据在内存中存储☞（超详解）

目录 一.数据类型大家族 1.了解类型的意义 2.数据类型大家族的分类 二.详解☞数据储存之整形 1.储存方式 &#xff08;1&#xff09;.原码反码补码的概念 &#xff08;2&#xff09;.原码反码补码出现的原因&#xff1a; 计算机中只有加法器没有减法器&#xff0c;所有只…
阅读更多...
SemanticKITTI: A Dataset for Semantic Scene Understanding of LiDAR Sequences

SemanticKITTI: A Dataset for Semantic Scene Understanding of LiDAR Sequences

Paper name SemanticKITTI: A Dataset for Semantic Scene Understanding of LiDAR Sequences Paper Reading Note URL: https://arxiv.org/pdf/1904.01416.pdf TL;DR 2019 ICCV 论文&#xff0c;提出了一个大规模的真实场景 LiDAR 点云标注数据集 SemanticKITTI&#xff…
阅读更多...
数字信号处理第六次试验：数字信号处理在双音多频拨号系统中的应用

数字信号处理第六次试验：数字信号处理在双音多频拨号系统中的应用

数字信号处理第六次试验&#xff1a;数字信号处理在双音多频拨号系统中的应用前言一、实验目的二、实验原理和方法1.关于双音多频拨号系统2.电话中的双音多频&#xff08;DTMF&#xff09;信号的产生与检测3.检测DTMF信号的DFT参数选择4.DTMF信号的产生与识别仿真实验三、实验内…
阅读更多...
菜鼠的保研总结

菜鼠的保研总结

1.个人基本情况 本科学校&#xff1a;山东某双非 本科专业&#xff1a;网络工程 成绩排名&#xff1a;1/46 英语成绩&#xff1a;四级529&#xff0c;六级502 科研竞赛&#xff1a;美国大学生数学建模比赛特等奖提名、全国英语翻译比赛三等奖、山东省蓝桥杯java大学生B组三等奖…
阅读更多...
C++基础：KMP

C++基础：KMP

让我们先看一个问题&#xff1a;给定一个字符串 S&#xff0c;以及一个模式串 P&#xff0c;所有字符串中只包含大小写英文字母以及阿拉伯数字。模式串 P 在字符串 S 中多次作为子串出现。求出模式串 P 在字符串 S 中所有出现的位置的起始下标。输入格式第一行输入整数 N&#…
阅读更多...
【Python】杨辉三角中的排成一列编号的问题

【Python】杨辉三角中的排成一列编号的问题

题目描述 下面的图形是著名的杨辉三角形&#xff1a; 如果我们按从上到下、从左到右的顺序把所有数排成一列&#xff0c;可以得到如下数列&#xff1a; 1,1,1,1,2,1,1,3,3,1,1,4,6,4,1,⋯ 给定一个正整数 N&#xff0c;请你输出数列中第一次出现 N是在第几个数&#xff1f; …
阅读更多...
Go语言设计与实现 -- 内存管理器

Go语言设计与实现 -- 内存管理器

不同的编程语言选择不同的方式管理内存&#xff0c;本节会介绍Go语言内存分配器。 Go内存分配的设计思想是&#xff1a; 内存分配算法采用Google的TCMalloc算法&#xff0c;每个线程都会自行维护一个独立的内存池&#xff0c;进行内存分配时优先从该内存池中分配&#xff0c;…
阅读更多...
第十八章Vue的学习

第十八章Vue的学习

文章目录什么是VueVue.js的官网介绍环境配置基本语法声明式渲染绑定元素属性双向数据绑定条件渲染列表渲染事件驱动侦听属性Vue对象生命周期什么是Vue 对于Java程序来说&#xff0c;我们使用框架就是导入那些封装了**『固定解决方案』的jar包&#xff0c;然后通过『配置文件』…
阅读更多...
CSS3 之选择器

CSS3 之选择器

文章目录1、关系性选择器&#xff1a;EFE~F2、属性选择器3、伪元素选择器4、伪类选择器(被选中的元素的一个种状态)calc1、关系性选择器&#xff1a;EFE~F 2、属性选择器 E[attr~“val”]E[attr|“val”]E[attr^“val”]E[attr$“val”]E[attr*“val”]3、伪元素选择器 E::pl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023