Referer是HTTP请求头信息中的一个字段，它用于表示当前请求是从哪个URL页面跳转过来的。一般情况下，浏览器会自动发送Referer字段给服务器端，服务器端可以通过该字段来进行一些操作，比如判断当前请求是否合法、实现防盗链等功能。同时，由于历史原因和安全问题，Referer也存在一些限制和漏洞，需要我们在使用时进行注意和规避。

Referrer-policy（可以一定程度上防御CSRF攻击）

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

包含了以下信息：

no-referer：整个referer首部会被移除，访问来源信息不随着请求一起发送。
no-referer-when-downgrade:在没有指定任何策略的情况下用户代理的默认行为。在同安全等级的情况下，发送文件的源为引用地址（HTTPS->HTTPS）；在降级的情况下不会发送此首部(HTTPS->HTTP)
origin：在任何情况下，仅发送文件的源作为引用地址，
orgin-when-cross-origin：对于同源的请求，会发送完整的URL作为引用地址，但是对于非同源请求仅仅发送文件的源
same-orgin：对于同源的请求会发送引用地址，但是对于非的同源请求则不发送引用地址信息。
strict-origin：在同等安全级别的情况下，发送文件的源作为引用地址（HTPPS->HTTPS），但是在降级的情况下不会发送（HTTPS->HTTP)
strict-origin-cross-origin，对于同源的请求，会发送完整的URL作为引用地址；在同安全等级的情况下，发送文件的源为引用地址（HTTPS->HTTPS）；在降级的情况下不会发送此首部(HTTPS->HTTP)
unsafe：无论是同源请求还是非同源请求，都发送完整的URL（移除参数信息后）作为引用地址。（最不安全了）

同源

那些网址符合同源的要求：协议相同、host相同、端口相同

例如：

http://www.baidu.com https://www.baidu.com-<这两个非同源（因为协议不同）

如果嵌入的网页是其他网站的网页，你不了解对方会执行什么操作，因此就存在安全风险。为了限制<iframe>的风险，HTML提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱“

iframe

概念：

iframe标签是HTML中的一个内置标签，它允许我们在一个网页中嵌入另外一个网页。通过使用iframe标签，我们可以将一个页面的某个部分独立出来，形成一个新的窗口，从而实现一些有趣的功能和效果。

具体来说，通过使用iframe标签，我们可以：

1. 在一个网页中嵌入其他网页，实现页面嵌套和组合；
2. 实现异步加载某些内容，比如广告、推荐内容等；
3. 实现一些特殊的展示效果，比如浮动窗口、弹出框等；
4. 实现网页和服务器端的交互，比如提交表单、上传文件等。

不过需要注意的是，由于iframe标签存在一些安全问题，比如跨域攻击等问题，因此在使用时需要进行一些安全措施，保证网站的安全性。

sandbox(沙箱):

sandbox是Web开发中的一个重要安全机制，它允许我们在一个沙盒环境中执行不信任的代码，从而提高应用程序的安全性，它可以通过限制某些权限和行为，增强应用程序的安全性，避免安全漏洞和攻击风险。具体来说，sandbox可以通过以下方式增强Web应用程序的安全性：

1. 限制JavaScript的权限

2. 防止跨站点脚本攻击

3. 防止点击劫持

设置嵌入的网页的权限：

对嵌入网页可以设置的权限：

* allow-forms：允许提交表单。

* allow-modals：允许提示框，即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。

* allow-p

opups：允许嵌入的网页使用window.open()方法弹出窗口。

* allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱的限制。

* allow-orientation-lock：允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏。

* allow-pointer-lock：允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动。

* allow-presentation：允许嵌入的网页使用 Presentation API。

* allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。

* allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）。

* allow-storage-access-by-user-activation：sandbox属性同时设置了这个值和allow-same-origin的情况下，允许<iframe>嵌入的第三方网页通过用户发起document.requestStorageAccess()请求，经由 Storage Access API 访问父窗口的 Cookie。

* allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。

* allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。

* allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。

注意，不要同时设置allow-scripts和allow-same-origin属性，这将使得嵌入的网页可以改变或删除sandbox属性。

如何设置Referrer？

方法一：

例如：

然后在浏览器测试会发现确实没有了referrer：

注意：如果使用链接的方式将该网页显示出来则referrer还是会照常存在的

例：

b网页将a网页通过链接的方式引入

当在浏览器中通过点击链接访问a网页时：

方法二：

也可以使用js中的referrerpolicy策略来设置no-referrer

例：

在浏览器中查看：

盗链

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

盗链的工作原理

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

三种情况下可以引用图片：

本网站
无referer信息的情况下（即服务器认为从浏览器直接访问图片的图片的URL，所以这种情况下可以正常访问）
授权的网址

XMLHTTPRequest

AJAX（Asynchronous JavaScript and XML）

原理：通过JavaScript的异步通信，从服务器获取XML文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX这个词就成为了JavaScript脚本发起HTTP通信的代名词，也就是说，只要用脚本发起通信，就可以叫做AJAX通信

具体来说，AJAX包括以下几个步骤：

创建XMLHttpRequest实例
发出HTTP请求
接收服务器传回的数据
更新网页数据

AJAX最关键的功能：页面无刷新
AJAX通过原生的XMLHTTPRquest对象发出的HTTP请求，得到服务器返回的数据后，再进行处理。现在服务器返回的都是JSON格式的数据，XML格式已经过时了。
XMLHTTPRequest对象是AJAX的主要接口，用于浏览器与服务器之间的通信。
XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例，并且它没有任何的参数。
一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

例如：

var xhr new XMLHttpRequest();

XMLHttpRequest的实例属性

XMLHttpRequest.readyState

这个属性会返回一个整数，表示实例对象的当前状态。该属性为只读

返回值类型：

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

XMLHttpRequest.onreadystatechange

这个属性指向一个监听函数。

XMLHttpRequest.response

这个属性表示服务器返回的数据体（即回应的body部分），它可能是任意的数据类型，具体的类型由XMLHttpRequest.responeType属性决定。该属性为只读

XMLHttpRequest.responeType

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

返回值的类型包括：

""：等同于text，表示服务器返回文本数据
"arratbufferr"：表示服务器返回二进制数组
"blob"：表示服务器返回二进制对象
"document"：表示服务器返回一个文档对象
"json"：JSON对象
"text"：字符串

XMLHttpRequest.responeText

这个属性返回从服务器接受到的字符串，该属性为只读。

XMLHttpRequwst.responeXML

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

XMLHttpRequwst.responeURL

该属性是字符串，表示发送数据的服务器的网址

XMLHttpRequest.status

这个属性返回一个整数，表示服务器回应的HTP状态码。请求发送之前状态码为0，发送成功为200，如果没有返回码默认也为200

常见的返回码：

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，服务器发生错误

XMLHttpRequests.tatusText

这个属性返回一个字符串，表示服务器发送的状态提示。不同status属性，该属性包含整个状态信息，比如"OK"和"Not Found"。该属性为只读

XMLHttpRequest.timeout

这个属性返回一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。

XMLHttpRequestEventTarget.ontimeout

这个属性用于设置一个监听函数，如果发生timeout事件就会执行这个监听函数。

事件监听属性：

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

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

progress事件的监听函数有一个事件对象参数，该对象有三个属性：

load属性返回已经传输的数据量，
total属性返回总的数据量，
legthComputable属性返回一个布尔值，表示加载的进度是否可以计算

所有的这些监听函数中，只有progress事件的监听函数有参数，其他函数都没有参数

XMLHttpRequest.withCredentials

这个属性是一个布尔值，表示跨域请求时，用户信息（比如Cookie和认证的HTTP头信息）是否会包含在其中，默认为false。

XMLHttpRequest.upload

XMLHttpRequest不仅可哟发送请求，还可以发送文件，这就是AJAX文件上传。

XMLHttpRequest的实例方法

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（）方法只有等到收到服务器返回来结果，才会进行洗衣不操作。该参数可选
user：表示用于认证的用户名，默认为空字符串。该参数可选。
password：表示用于认证的密码，默认为空字符串。该参数可选

XMLHttpRequest.send()

这个方法用于实际发送HTTP请求。

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

比如：

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

XMLHttpRequest.setRequestHeader()

这个方法用于设置浏览器发送的HTTP请求的头信息。

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

XMLHttpRequest.overrideMimeType()

这个方法用来指定MIME类型，覆盖服务器返回的真正的MIME类型，从而让浏览器进行不一样的处理。

举例来说，服务器返回的数据类型是text/xml，由于种种原因浏览器解析不成功报错，这时就拿不到数据了。为了拿到原始数据，我们可以把MIME类型改为text/plain，这样浏览器就不会去自动解析，从而我们就可以拿到原始文本了。

例如：

xhr.oberrideMimeType('text/plain')

注意：该方法必须在send（）方法之前调用

XMLHttpRequest.getResponeHeader()

这个方法返回HTTP头信息指定字段的值。这个方法的参数不区分大小写

XMLHttpRequest.getAllResponseHeader

这个方法返回一个字符串，表示是服务器发来的所有HTTP头信息。格式为字符串，每个头信息之间使用CRLF分割（回车加换行）

XMLHttpRequest.abort()

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

XMLHttpRequest的实例事件

readyStateChange事件

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

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

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

load事件

oad 事件表示服务器传来的数据接收完毕

erro事件

error 事件表示请求出错

abort事件

load 事件表示服务器传来的数据接收完毕，error 事件表示请求出错，

loadend事件

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

timeout事件

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

Referer

概念