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

含义：
表示请求的目的地，即如何使用获取的数据；
取值范围：

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