Referer与XMLHttpRequest整理

故ོ渊ꦿ℘゜

已于 2023-01-11 21:22:52 修改

阅读量1k

点赞数 1

分类专栏：笔记作业文章标签： apache javascript

于 2023-01-07 02:05:17 首次发布

本文链接：https://blog.csdn.net/weixin_53284312/article/details/128585463

版权

笔记同时被 2 个专栏收录

55 篇文章 2 订阅

订阅专栏

作业

28 篇文章 0 订阅

订阅专栏

一、Apache日志分割

1.原因

1.随着网络的访问量的增加，默认情况下Apache的单个日志文件也会越来越大。
2.日志文件占用磁盘空间很大
3.查看相关信息不方便

2.对日志文件进行分割

1.Apache自带rotatelogs分割工具实现
2.第三方工具cronolog 分割

3.配置日志分割(我用的phpstudy)

ErrorLog "| rotatelogs命令的绝对工具 -| 日志文件路径/网站名-error_%Y%m%d.log 86400"
CustomLog "| rotatelogs命令路径 -| 日志文件路径/网站名-access_%Y%m%d.log 86400" combined

在这里插入图片描述
86400表示日志分割的时间间隔为1天，单位是秒。480是北京时间 +8小时的意思

二、Referer与XMLHttpRequest整理

一、Referer

Referer 是 HTTP 请求header 的一部分，当浏览器（或者模拟浏览器行为）向web 服务器发送请求的时候，头信息里有包含 Referer
例如，在www.csdn.cn 里有一个report.js，那么点击后，它的headers 里就有： Referrer Policy: strict-origin-when-cross-origin 在这里插入图片描述
url是report.js
状态是304，说明是临时缓存
禁用缓存以后

状态变成 200
Referrer Policy:strict-origin-when-cross-origin

referer一定程度上可以防御CSRF

1、防盗链的工作原理

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

2、绕过图片防盗链的方法

1.本网站。
2.无referer信息的情况。（服务器认为是从浏览器直接访问的图片URL，所以这种情况下能正常访问）
3.授权的网址。
1.3不太现实，只能从设置Referer入手

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

在这里插入图片描述
只适用于旧版本的浏览器，https降为http 是一种非常不安全的行为，该操作浏览器会自动禁止。
虽然降级失败但是可以成功访问/src/img/1.jpg.因为referer为空且白名单命中了192.168.174.132:8080 字段
whiteList.indexof(referHostName) == 1 ，返回了正确的图
在这里插入图片描述
实际上能访问正确的图是依靠了白名单，而不是https降级.

2.设置head头

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

3.设置referrerpolicy=“no-referrer”**

<img src = "aaaa" referrerpolicy="no-referrer">

4.用iframe来实现隐藏referer**

在这里插入图片描述

构造了一个<iframe>标签，就相当与
id = frameimg加上一个随机数
src = https://tiebapic.baidu.com/forum/w%3D580%3B/sign=f88eb0f2cf82b9013dadc33b43b6ab77/562c11dfa9ec8a135455cc35b203918fa1ecc09c.jpg

<iframe id=frameimg.qa3w4es5tfg7y8hui src="javascript:parent.img" alt="图片加载失败，请稍后再试"/ >

5.利用XMLHttpRequest**

XMLHttpRequest中[setRequestHeader方法，用于向请求头添加或修改字段.

二、XMLHttpRequest

XMLHttpRequest`对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。

1、JSON和XML的区别

1.JSON是JavaScript Object Notation；XML是可扩展标记语言。
2.JSON是一种表示对象的方式；XML是一种标记语言
3.JSON支持数组；XML不支持数组
4.XML的文件相对难以阅读和解释；与XML相比，JSON的文件非常易于阅读
5.JSON的安全性较低；XML比JSON更安全
6.JSON仅支持UTF-8编码；XML支持各种编码
7.JSON相对于XML来说, 数据的体积小,传递速度更快

JSON的顶层支持三种类型的值:
简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
数组值：数组的值可以是简单值、对象值、数组值；

2、XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。

0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。
4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

3 、XMLHttpRequest.onreadystatechange

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

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

构造一个函数，可以使用new命令生成实例，如果状态为4且浏览器状态返回200，打印响应console.log(xhr.responseText)

4、XMLHttpRequest.responseType

XMLHttpRequest.responseType属性是一个字符串，表示服务器返回数据的类型。

“”（空字符串）：等同于text，表示服务器返回文本数据。
“blob”：Blob 对象，表示服务器返回二进制对象。
“document”：Document 对象，表示服务器返回一个文档对象。
“json”：JSON 对象。
“text”：字符串。

var xhr = new XMLHttpRequest();
xhr.open('GET', './1.jgg', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status === 200) {
    var blob = xhr.response;
    console.info(blob)
  }
};

xhr.send();

在这里插入图片描述

5、XMLHttpRequest.responseURL

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

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.runoob.com/vue2/vuejs-ajax-axios.html
', true);
xhr.onload = function () {
  // 返回 http://example.com/test
  console.log(xhr.responseURL);
};
xhr.send(null);

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

6、XMLHttpRequest.status，XMLHttpRequest.statusText

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

200, OK，访问正常
301, Moved Permanently，永久移动
302, Moved temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误

7、事件监听属性

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

XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

8、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', './form.php', 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'}));

9、XMLHttpRequest 的实例方法

（1）XMLHttpRequest.open()

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

（2）XMLHttpRequest.send()

GET 请求

var xhr = new XMLHttpRequest();
xhr.open('GET',
  'http://www.example.com/?id=' + encodeURIComponent(id),
  true
);
xhr.send(null);
`GET`请求的参数，作为查询字符串附加在 URL 后面。

POST 请求
在这里插入图片描述

（3）XMLHttpRequest.setRequestHeader()

XMLHttpRequest.setRequestHeader()方法用于设置浏览器发送的 HTTP 请求的头信息。该方法必须在open()之后、send()`之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送。

该方法接受两个参数。第一个参数是字符串，表示头信息的字段名，第二个参数是字段值。

（4）XMLHttpRequest.overrideMimeType()

XMLHttpRequest.overrideMimeType()方法用来指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型，从而让浏览器进行不一样的处理。举例来说，服务器返回的数据类型是text/xml，由于种种原因浏览器解析不成功报错，这时就拿不到数据了。为了拿到原始数据，我们可以把 MIME 类型改成text/plain，这样浏览器就不会去自动解析，从而我们就可以拿到原始文本了。
注意，该方法必须在send()方法之前调用。

（5）XMLHttpRequest.getResponseHeader()

XMLHttpRequest.getResponseHeader()方法返回 HTTP 头信息指定字段的值，如果还没有收到服务器回应或者指定字段不存在，返回null。该方法的参数不区分大小写。

10、XMLHttpRequest 实例的事件

（1）readyStateChange 事件

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

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

（2）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();