前言

记录某次页面div使用v-html标签渲染图片等内容的过程

一、结论：

get请求但被设置Sec-Fetch-*请求头的图片无法展示。

二、原因：

1.本项目中的img标签发起get请求，目标链接在浏览器中发起get请求，

2.但本项目img标签的get请求->默认sec-fetch-dest为image，如下所示：

sec-fetch-dest: image
sec-fetch-mode: no-cors
sec-fetch-site: cross-site

3.浏览器输入的目标链接的get请求的sec-fetch-*等字段（网络请求的元数据描述），如下所示：

Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1

4.解释：

https://pics1.baidu.com/ 的服务器端根据根据这些补充数据进行细粒度的控制相应，即服务器可以精准判断请求是否合法，到底是用户真的请求的还是取用的链接，从而杜绝非法请求和攻击，提升web服务器的安全性。

5.结论：原文中的get请求但被设置Sec-Fetch-*请求头的图片无法展示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		function downLoad() {
		
		　　var url =  'https://pics1.baidu.com/feed/9213b07eca806538ce9d9019899d264fad348214.jpeg@f_auto?token=eb7c1aed39d2aadb2e799209e986320b'  //接口请求的完整地址
		        if(window.XMLHttpRequest){
		            var xhr = new XMLHttpRequest();
		        }else{
		            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
		        };  
		        xhr.open('GET', url, true);        // 也可以使用POST方式，根据接口
		        // xhr.setRequestHeader('AuthToken', '需要传的token')
		        // xhr.setRequestHeader('Content-Type', 'application/json')
				xhr.setRequestHeader('accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9')
		        // xhr.setRequestHeader('pragma', 'no-cache')
		        // xhr.setRequestHeader('sec-fetch-dest', 'document')
		        // xhr.setRequestHeader('sec-fetch-mode', 'navigate')
		        // xhr.setRequestHeader('sec-fetch-site', 'none')
		        // xhr.setRequestHeader('sec-fetch-user', '?1')
		        xhr.setRequestHeader('upgrade-insecure-requests', '1')
		        xhr.responseType = "blob";    // 返回类型blob
		        xhr.send(null)
		        // da.comp.loadding.show();
		        // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
		        xhr.onload = function () {
		            // 请求完成
		            var name = xhr.getResponseHeader('Content-disposition').split('=');
		            if (this.status === 200) {
		                // 返回200
		                // da.comp.loadding.hide();
		                var blob = this.response;
		                var reader = new FileReader();
		                reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
		                reader.onload = function (e) {
		                    // 转换完成，创建一个a标签用于下载
		                    var a = document.createElement('a');
		                    a.download = decodeURI(name[name.length-1]);// name[name.length-1];
		                    a.href = e.target.result;
		                    $("body").append(a);    // 修复firefox中无法触发click
		                    a.click();
		                    $(a).remove();
		                }
		            }
		        };
		}
		download()
	</script>
</html>

6.截图





三、参考链接：

Sec-Fetch-*請求頭，瞭解下?
前段使用get获取文件流，实现下载

1 注：

sec-fetch-*等字段是http请求的headers字段，即Fetch Metadata Request Headers

2 引用上述文章的部分内容：

Fetch Metadata Request Headers
Sec-Fetch開頭的請求頭都屬於Fetch Metadata Request Headers，於2019年發佈的新草案，目前處於Editor's Draft階段，支持度還不是很高，還須要注意的是，這些請求頭都是Forbidden header，也就是不能被篡改的，是瀏覽器自動加上的請求頭，這樣也保證了數據的準確性，還須要注意的是若是資源是本地緩存加載，那麼就不會添加這些請求頭了，這也容易理解，就很少說了。web

規範的意義
近些年web領域發展迅速，可是安全問題也十分突出，從最初瀏覽器的同源模型到CSP，再到Fetch Metadata Request Headers，都是對web安全不斷的完善和增強，以往不少安全策略側重於客戶端的防禦，服務端須要識別非法請求每每比較困難，由於缺少判斷請求的依據，控制比較粗線條，而Fetch Metadata Request Headers的出現就爲服務端過濾非法請求提供了元數據，避免csrf,xssi等攻擊就很容易了。chrome