前言

记录某次页面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. KMS for Office 2024

    I. 镜像下载 官方镜像下载地址: Office 2024 专业增强版: https://officecdn.microsoft.com/db/492350f6-3a01-4f97-b9c0-c7c6 ...

  2. 百度高效研发实战训练营-Step3

    .# 百度高效研发实战训练营-Step3 3.1 质量意识 关于本部分,将从以下几点进行介绍: 3.1.1 质量的基本概念 意识的树立,源于认识的提高. 首先介绍质量的基本概念,主要包括以下内容: 1 ...

  3. 分布式文件系统KFS基础知识介绍

    Kosmos distributed file system,简称KFS,是一个类GFS的分布式文件系统,被设计用于分布式的结构化存储.下面将对KFS的体系结构进行简单介绍,最后给出一个使用KFS C ...

  4. H5调用手机拨打电话的功能

    里面加上: 我没有写也是可以的 <meta name="format-detection" content="telephone=yes"/> 该标 ...

  5. CDN与前端技术

    本文分享自天翼云开发者社区<CDN与前端技术>,作者:张****亮 CDN(Content Delivery Network)是一种广泛应用于网络加速和内容分发的技术.它通过在全球各地部署 ...

  6. 5分钟搞定！用比扬云SD-WAN远程访问飞牛NAS全攻略

    作为一个NAS重度用户,我最近遇到了一个头疼的问题:如何在外部安全地访问家里的飞牛NAS?经过一番摸索,我发现比扬云SD-WAN是个不错的解决方案,今天就来分享我的实战经验. 一.为什么选择比扬云SD ...

  7. DispatcherPriority 枚举

    DispatcherPriority 枚举 ApplicationIdle 2 枚举值为 2. 在应用程序空闲时处理操作. Background 4 枚举值为 4. 在完成所有其他非空闲操作后处理操作 ...

  8. 腾讯ima接入deepseek-r1，借用别人脑子用用成真了~

    大家好,我是汤师爷! 最近,腾讯发布了一款ima产品,主打用AI来帮你搜索信息.管理知识库. 说实话,一开始用混元大模型,感觉不咋地,很鸡肋的. 不过最近腾讯把DeepSeek R1接进来了,一下子解 ...

  9. [CF1981E] Turtle and Intersected Segments 题解

    好题好题. 难点在建图,因为图的边数将会决定最小生成树的时间复杂度.我们肯定希望能够只建 \(O(n)\) 级别的边,这样时间复杂度就可以做到 \(O(n\log n)\). 观察到当 \(i,j,k ...

  10. PD还是QC？快充协议全解析

    什么是快充协议 快充协议是一种通过提高充电效率来缩短设备充电时间的电池充电技术.它是通过在充电器和设备之间建立一种沟通机制,充电器能够根据设备的需求和状态,调整输出的电压和电流.这种沟通机制由快充协议 ...