前言

记录某次页面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. SpringCloud Alibaba(四) - Nacos 配置中心

    1.环境搭建 1.1 依赖 <!-- nacos注册中心 注解 @EnableDiscoveryClient --> <dependency> <groupId>c ...

  2. 深入浅出：Agent如何调用工具——从OpenAI Function Call到CrewAI框架

    深入浅出:Agent如何调用工具--从OpenAI Function Call到CrewAI框架 嗨,大家好!作为一个喜欢折腾AI新技术的算法攻城狮,最近又学习了一些Agent工作流调用工具的文章,学 ...

  3. LangChain基础篇 (02)

    LangChain 核心模块学习:Chains 对于简单的大模型应用,单独使用语言模型(LLMs)是可以的. 但更复杂的大模型应用需要将 LLMs 和 Chat Models 链接在一起. 要么彼此链 ...

  4. 一种基于Nginx的热点数据调度处理方法

    本文分享自天翼云开发者社区<一种基于Nginx的热点数据调度处理方法>,作者:康****彬 一.应用场景 基于Nginx的热点数据调度处理,热点节点数据负载均衡处理,减少热点节点压力,提高 ...

  5. galaxy特色胡思乱想

    有没有什么办法,让我不伤害任何人,什么也不破坏,被判死刑.我觉得这样比我紫砂要好的多. 我所可怜的是神不能紫砂.--芥川龙之介<某傻子的一生>

  6. mac 安装ActiveMQ

    1.http://activemq.apache.org/activemq-5154-release.html 选gz 2.cd apache-activemq-5.15.4/bin/macosx 3 ...

  7. 清华大学推出的 DeepSeek 从入门到精通（104页）免费教程！

    前言 最近 DeepSeek 的出现让 AI 在国内掀起了一股浪潮,各大媒体.平台都在讨论和推广 DeepSeek,帮助各行各样使用 AI 不再有困难.今天大姚给大家分享一个由清华大学推出的.免费的: ...

  8. centos 8 mysql 更改数据存储位置

    登录mysql后,先切换到myql数据库下通过show global variables like '%datadir%'; 可以查看数据默认的存储路径(一般在 /var/lib/mysql) 新建数 ...

  9. 【Spring】Spring的@Autowire注入Bean的规则测试

    背景 在项目中使用Spring的Bean,一般都使用默认的Bean的单例,并且结合@Autowire使用. 实在有同一个类型多个实例的情况,也使用@Qualifier或@Resource实现注入. 所 ...

  10. QT5笔记：1.UI文件设计与运行机制

    1.UI文件设计与运行机制 参考视频:https://www.bilibili.com/video/BV1AX4y1w7Nt #include "widget.h" #includ ...