目录
Referrer-policy(可以一定程度上防御CSRF攻击)
AJAX(Asynchronous JavaScript and XML)
XMLHttpRequest.onreadystatechange
XMLHttpRequestEventTarget.ontimeout
XMLHttpRequest.withCredentials
XMLHttpRequest.setRequestHeader()
XMLHttpRequest.overrideMimeType()
XMLHttpRequest.getResponeHeader()
XMLHttpRequest.getAllResponseHeader
Referer
概念
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属性。
cookie的原理:
如何设置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
属性一节。