如果你使用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
含义:
表示请求的目的地,即如何使用获取的数据;
取值范围:
Destination | Features |
---|---|
report | CSP, NEL reports. |
document | HTML’s navigate algorithm (top-level only). |
frame | HTML’s |
iframe | HTML’s |
- | navigator.sendBeacon() , EventSource , HTML’s and , fetch(), XMLHttpRequest , WebSocket , Cache API,H |