前言

记录某次页面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

bug|项目经验|记录某次页面div使用v-html标签渲染图片等内容的过程的更多相关文章

  1. div下的img标签中图片的大小设定

    首先html为: <div class="box1"><img src="images/more-1.jpg"></div> ...

  2. 项目经验记录丨Modbus转EtherNET/IP协议转换应用

    使用电脑通过软件来进行模拟 EtherNET/IP主站连接Mdodbus从站设备的项目记录.使用软件为EIPScan 模拟主站,通过Modbus转EtherNET/IP网关连接Modbus Slave ...

  3. 用html给div加类似a标签的超链接（转）

    今天项目中遇到用html给div加类似a标签的超链接,回想半天,万幸还是想出来了. 分享一下啊: 1.通过window.open函数 <div onclick="window.open ...

  4. Vue项目经验

    Vue项目经验 setInterval路由跳转继续运行并没有及时进行销毁比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后 ...

  5. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  6. 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

      先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面 ...

  7. 【建议收藏】缺少 Vue3 和 Spring Boot 的实战项目经验？我这儿有啊！

    缺少 Vue3 和 Spring Boot 的实战项目经验?缺少学习项目和练手项目?我这儿有啊! 从 2019 年到 2021 年,空闲时间里陆陆续续做了一些开源项目,推荐给大家啊!记得点赞和收藏噢! ...

  8. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架（下篇——多页面VueSSR+热更新Server）

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...

  9. Ionic3项目实践记录

    Ionic3首次项目实践记录 标签(空格分隔): Angular Ionic Ionic3踩坑 1. 路由懒加载(lazy load) 如果设置了懒加载,就必须全部懒加载(包括TabsPage),否则 ...

  10. Atitit.attilax的 case list 项目经验 案例列表

    Atitit.attilax的 case list 项目经验 案例列表 1. Atian inputmethod 输入法3 2. Ati desktop engine桌面引擎3 3. Acc资金账户系 ...

随机推荐

  1. 开源轻量级 IM 框架 MobileIMSDK 的Uniapp客户端库已发布

    一.基本介绍 MobileIMSDK-Uniapp端是一套基于Uniapp跨端框架的即时通讯库: 1)超轻量级.无任何第3方库依赖(开箱即用): 2)纯JS编写.ES6语法.高度提炼,简单易用: 3) ...

  2. 阿里IM技术分享(十)：深度揭密钉钉后端架构的单元化演进之路

    本文由钉钉技术专家啸台.万泓分享,为了获得更好的阅读效果,本文已对内容进行少修订和重新排版. 1.引言 钉钉后端架构的单元化工作从2018年开始到今年,已经是第五个年头了.五年的时间,钉钉单元化迭代了 ...

  3. CDS标准视图：功能位置描述 I_FunctionalLocationText

    视图名称:功能位置描述 I_FunctionalLocationText 视图类型:基本视图 视图代码: 点击查看代码 @EndUserText.label: 'Functional Location ...

  4. c# get all Blackfish match source file path list use API

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. e-prime2.0 安装

    先卸载之前的 卸载 1.点开之前安装的文件.exe 2.选择remove,即卸载 打开注册表 1.开始-运行:输入regedit 2.然后找到并删除注册表中: HKEY_CURRENT_USER\So ...

  6. linux：计划任务

    at 计划执行一次性任务 at  + time 表示方法: atq  -c:查看目前等待执行的任务 atrm  任务编号 :删除at任务  [root账户才能删除,其他用户只能查询] crontab ...

  7. Win10安装MySql步骤

    1.下载 下载地址:https://dev.mysql.com/downloads/mysql/ 文件地址:https://dev.mysql.com/get/Downloads/MySQL-8.3/ ...

  8. Hetao P1307 树的剖分 题解 [ 蓝 ] [ 树形 dp ] [ 贪心 ]

    树的剖分:很厉害的性质题,代码也很好写.运用到了奇偶性拼凑答案的 trick. 观察 首先发现一个很重要的条件:一个点的点权只可能是 \(0,1,2\). 这个条件开始我们可能无法用上,于是先想最后的 ...

  9. P9869 [NOIP2023] 三值逻辑 题解

    NOIP2023 T2 三值逻辑 题解 题面 思路 乍一看好像很并查集,而且不太难,但是, 注意到:按顺序运行这 \(m\) 条语句 事情并没有那么简单. 比如说如下情况: x1:=T x2:=x1 ...

  10. Dev Express WPF GridControl 数据导出到Excel

    Dev Express WPF 给控件提供了公共的导出方法: Export to PDF Export to HTML Export to MHT Export to Text Export to C ...