前言

记录某次页面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. LRU的map+双链表实现(Go描述)

    面云账户时候问了LRU,具体实现的方式是map+双链表.Set和Get的时间复杂度都是O(1).完整写一遍复习一下, 仅作记录 /** * @Author: lzw5399 * @Date: 2021 ...

  2. Linux安装配置Go语言

    Linux安装配置Go语言 官网:https://go.dev/dl/ 从官网下载,选择linux下载压缩包. sudo cp -r go/ /usr/local sudo gedit /etc/pr ...

  3. 变分推断(VI)、随机梯度变分推断(SGVI/SGVB)、变分自编码器(VAE)串讲

    参考资料: VI参考:PRML Chapter 10. SGVI原文:Auto-Encoding Variational Bayes -- Kingma. VAE参考1:Tutorial on Var ...

  4. linux下查看文件行数和列数

    查看行数: wc -l 文件名 查看列数: cat 文件名 | awk '{print NF}' 注意:默认是\t分割 但是可以使用-F参数指定分隔符,例如以 | 进行分割: cat 文件名 | aw ...

  5. .NET 响应式编程 System.Reactive 系列文章（一）：基础概念

    .NET 响应式编程 System.Reactive 系列文章(一):基础概念 引言 在现代软件开发中,处理异步事件和数据流已经成为常见的需求,比如用户输入.网络请求.传感器数据等.这些数据流通常是无 ...

  6. .NET Core 委托原理解析

    .NET Core 委托原理解析 在 .NET Core 中,委托(Delegate)是一种类型安全的函数指针,它允许你将方法作为参数传递给其他方法,或者将方法存储在变量中以便稍后调用.委托在事件处理 ...

  7. React源码解析(1): JSX语法与react项目渲染过程

    好家伙   0.前言 由于工作的需要,我不得不入手了react的全家桶,曾经我的主要技术栈是vue. 从vue转到react,一开始我感到非常不适应,jsx的语法的不了解,react hooks的使用 ...

  8. MySQL安装及基本使用教程

      yanzilove win10下安装配置mysql环境 一.下载从https://dev.mysql.com/downloads/mysql/5.1.html#downloads下载zip包,这里 ...

  9. XReport通过数据控制控件是否打印

    需求场景:医嘱单在患者出院的时候,需要标记一条红线,表示以下没有医嘱了.数据库中此记录的一个字段属性isRed值来标记这一行. 实现:XReport报表的明细区域增加一个line1对象.然后在明细表格 ...

  10. SQL Server与ORACLE数据库存储过程编写的几个不同之处

    一直在使用SQL Server数库的存储过程进行业务数据处理,现在ORACLE上进行存储过程应用,感觉没有MSSQL的方便灵活,总结了以下几点区别: 1.入参数据类型不要书写长度.比如:userNam ...