Sec-Fetch-*请求头
如果你使用76+版本的chrome浏览器,通过开发者面板查看每个网络请求,会发现都有几个Sec-Fetch开头的请求头,例如访问百度首页https://www.baidu.com/
的请求:
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
这是用来干嘛的呢,简单来说,就是网络请求的元数据描述,服务端根据这些补充数据进行细粒度的控制响应,换句话说,服务端可以精确判断请求的合法性,杜绝非法请求和攻击,提高web服务的安全性。
Fetch Metadata Request Headers
Sec-Fetch开头的请求头都属于Fetch Metadata Request Headers,于2019年发布的新草案,目前处于Editor's Draft阶段,支持度还不是很高,还需要注意的是,这些请求头都是Forbidden header,也就是不能被篡改的,是浏览器自动加上的请求头,这样也保证了数据的准确性,还需要注意的是如果资源是本地缓存加载,那么就不会添加这些请求头了,这也容易理解,就不多说了。
规范的意义
近些年web领域发展迅速,但是安全问题也十分突出,从最初浏览器的同源模型到CSP,再到Fetch Metadata Request Headers,都是对web安全不断的完善和加强,以往很多安全策略侧重于客户端的防护,服务端需要识别非法请求往往比较困难,因为缺乏判断请求的依据,控制比较粗线条,而Fetch Metadata Request Headers的出现就为服务端过滤非法请求提供了元数据,避免csrf,xssi等攻击就很容易了。
接下来探究一下这四个请求头的含义;
Sec-Fetch-Dest
含义:
表示请求的目的地,即如何使用获取的数据;
取值范围:
说明:
Dest是destination的缩写,根据上面的取值范围可很容易理解了,这个请求头指明客户端请求的目的,期望需要什么样的资源;
Sec-Fetch-Mode
含义
该请求头表明了一个请求的模式;
取值范围:
cors
:跨域请求;
no-cors
:限制请求只能使用请求方法(get/post/put)和请求头(accept/accept-language/content-language/content-type);
same-origin
:如果使用此模式向另外一个源发送请求,显而易见,结果会是一个错误。你可以设置该模式以确保请求总是向当前的源发起的;
navigate
:表示这是一个浏览器的页面切换请求(request)。 navigate请求仅在浏览器切换页面时创建,该请求应该返回HTML;
websocket
:建立websocket连接;
说明:
cors表示跨域请求,且要求后端需要设置cors响应头;no-cors并不是代表请求不跨域,而是服务端不设置cors响应头,什么情况下会是这种模式呢,图片/脚本/样式表这些请求是容许跨域且不用设置跨域响应头的,而no-cors也是默认的模式;same-origin表示同源请求,这就限制了不能跨域,前面说的cors和no-cors是容许跨域的,只是要求服务端的设置不同而已,熟悉fetch接口的同学对mode属性应该不陌生,其实跟这里的含义是一样的,只是fetch的mode大家可以手动设置,而Sec-Fetch-Mode不能干预而已;
Sec-Fetch-Site
含义:
表示一个请求发起者的来源与目标资源来源之间的关系;
取值范围:
cross-site
:跨域请求;
same-origin
:发起和目标站点源完全一致;
same-site
:有几种判定情况,详见说明;
none
:如果用户直接触发页面导航,例如在浏览器地址栏中输入地址,点击书签跳转等,就会设置none;
说明:
same-site有几种情况(A->B):
A | B | same site |
---|---|---|
(" https ", " example.com ")
|
(" https ", " sub.example.com ")
|
true |
(" https ", " example.com ")
|
(" https ", " sub.other.example.com ")
|
true |
(" https ", " example.com ")
|
(" http ", " non-secure.example.com ")
|
false |
(" https ", " r.wildlife.museum ")
|
(" https ", " sub.r.wildlife.museum ")
|
true |
(" https ", " r.wildlife.museum ")
|
(" https ", " sub.other.r.wildlife.museum ")
|
true |
(" https ", " r.wildlife.museum ")
|
(" https ", " other.wildlife.museum ")
|
false |
(" https ", " r.wildlife.museum ")
|
(" https ", " wildlife.museum ")
|
false |
(" https ", " wildlife.museum ")
|
(" https ", " wildlife.museum ")
|
true |
在地址有重定向的情况下,Sec-Fetch-Site取值稍微复杂一点,直接参考一下示例:
1.https://example.com/
请求https://example.com/redirect
,此时的Sec-Fetch-Site
是same-origin
;
2.https://example.com/redirect
重定向到https://subdomain.example.com/redirect
,此时的Sec-Fetch-Site
是same-site
(因为是一级请求二级域名);
3.https://subdomain.example.com/redirect
重定向到https://example.net/redirect
,此时的Sec-Fetch-Site
是cross-site
(因为https://example.net/
和https://example.com
&https://subdomain.example.com/
是不同站点);
4.https://example.net/redirect
重定向到https://example.com/
,此时的Sec-Fetch-Site
是cross-site
(因为重定向地址链里包含了https://example.net/
);
Sec-Fetch-User
含义:
取值是一个Boolean类型的值,true(?1)表示导航请求由用户激活触发(鼠标点击/键盘),false(?0)表示导航请求由用户激活以外的原因触发;
取值范围:
?0
?1
说明:
请求头只会在导航请求情况下携带,导航请求包括document
, embed
, frame
, iframe
, or object
;
安全策略
了解了上面是个请求头的含义之后,我们就可以根据项目实际情况来制定安全策略了,例如google I/O提供的一个示例:
# Reject cross-origin requests to protect from CSRF, XSSI & other bugs
def allow_request(req):# Allow requests from browsers which don't send Fetch Metadataif not req['sec-fetch-site']:return True# Allow same-site and browser-initiated requestsif req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):return True# Allow simple top-level navigations from anywhereif req['sec-fetch-mode'] == 'navigate' and req.method == 'GET':return Truereturn False
1.浏览器不支持Sec-Fetch-*请求头,则不做处理;
2.容许sec-fetch-site
为same-origin
, same-site
, none
三种之一的请求;
3.容许sec-fetch-mode
为navigate
且get请求的方法;
4.容许部分跨域请求,可设置白名单进行匹配;
5.禁止其他非导航的跨域请求,确保由用户直接发起;
在使用Fetch Metadata Request Headers时,还需要注意Vary响应头的正确设置,Vary这个响应头是干嘛的呢,其实就是缓存的版本控制,当客户端请求头中的值包含在Vary中时,就会去匹配对应的缓存版本(如果失效就会同步资源),因此针对不同的请求,能提供不同的缓存数据,可以理解为差异化服务,说明白了Vary响应头之后,就明白了Fetch Metadata Request Headers与Vary的影响关系了,因为要确保缓存能正确处理携带Sec-Fetch-*请求头的客户端响应,例如Vary: Accept-Encoding, Sec-Fetch-Site
,因此有没有携带Sec-Fetch-Site将会对应两个缓存版本。
参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/API/Request/mode
https://fetch.spec.whatwg.org/#concept-request-mode
https://web.dev/fetch-metadata/
https://w3c.github.io/webappsec-fetch-metadata/#intro
Sec-Fetch-*请求头相关推荐
- ajax jq 图片上传请求头_全面分析前端的网络请求方式:Ajax ,jQuery ,axios,fetch
链接:https://juejin.im/post/5c9ac607f265da6103588b31 一.前端进行网络请求的关注点 大多数情况下,在前端发起一个网络请求我们只需关注下面几点: 传入基本 ...
- Android Fetch请求问题
前言 作为前端开发人员,网络请求工具对大家来说肯定不陌生.iOS的AFNetworking,Android的okHttp等.但是对于RN来说,我们最常用到的就是js原生的Fetch请求了. React ...
- Request Headers 和Response Headers——请求头和响应头
前沿 作为一个前端开发工程师看不懂每条请求的请求头和响应头,实在是一件很难受的事情.最近花了一些时间整理了一篇文档,一起来看看前后端交互时每个资源的信息. 谷歌浏览器调试工具--查看请求资源的信息数据 ...
- iOS开发之HTTP的请求头和响应头 以及常见的响应状态码
*************请求头************** 请求头:包含了对客户端的环境描述.客户端请求信息等 GET /minion.png HTTP/1.1 //包含了请求方法.请求资源路径 ...
- SpringBoot @RequestHeader注解接收请求头
以下所有用法案例均来源于下面博文整理,详解请参考该博文 25.SpringMVC系列第25篇:@RequestHeader详解 前端 $(function() {fetch('项目路径' + '/re ...
- React fetch请求方式
fetch请求 fetch是一个使用了Promise,封装程度更高的网络请求API Promise 是异步编程的一种解决方案Promise 对象代表一个异步操作,有三种状态:Pending(进行中) ...
- WebSocket请求获取请求头Sec-WebSocket-Protocol,以及正确返回响应
当WebSocket请求获取请求头Sec-WebSocket-Protocol不为空时,需要返回给前端相同的响应,所以就需要处理 解决:在 WebSocketConfig 中新增 modifyHand ...
- Ajax请求,JQuery发送请求,Axios请求,Fetch请求总结
常见的请求方式 1.Ajax请求 定义: 同步与异步的区别: Ajax的工作原理: 实现AJAX的基本步骤: Get请求: Post请求: 2.JQuery发送请求 Get请求: Post请求: 3. ...
- 阿里云OSS上传文件设置请求头
之前写过一篇发送文件消息的,原生input上传文件(聊天发送文件消息),这次的需求就是更改上传地址,使用阿里云OSS上传. 如果想了解阿里云对象存储OSS是如何使用的,请看阿里云存储对象OSS使用讲解 ...
- 请求头没有origin参数_在尝试从REST API获取数据时,请求的资源上没有“Access-Control-Allow-Origin”标头...
在尝试从REST API获取数据时,请求的资源上没有"Access-Control-Allow-Origin"标头 我试图从HP Alm的REST API中获取一些数据. 它用一个 ...
最新文章
- 使用Mybatis Generator自动生成代码
- 记阿里的一次壮烈牺牲
- 处理项目重大质量问题的思路和原则
- 找不到r低版本_R 语言与数据挖掘直播班开始招生,生信分析帮你发高分文章
- mysql 视图 教程_MySQL视图简介及基本操作教程
- 数据又多又散,“孤岛困境”怎样破局?
- Meta标签中的viewport属性及含义
- 【TSP】基于matlab蚁群算法求解旅行商问题【含Matlab源码 1583期】
- aria2c 官方手册中文翻译版
- OPPO Reno ACE的刷机
- Flash CS6 新功能
- T5: Linux查看cpu信息,是否支持avx2指令集
- 计算机中mac地址是什么意思,mac地址在计算机什么上
- 利用user-agent取得浏览器版本号
- 商用密码安全性评估简介
- RxJS 6 —— operators
- 2021洛谷10月月赛3游记
- 树突状细胞(DC细胞)特征及应用进展综述
- Android和蓝牙GPS结合的方法
- velocity 将字符串切割按每隔3位加逗号,map集合遍历,字符串拼接,