前言

记录某次页面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. C Primer Plus 第6版 第八章 编程练习参考答案

    编译环境VS Code+WSL GCC 源码请到文末下载 . 我给第一题写了Linux shell脚本,感兴趣的同学可以尝试修改并运行一下. /*第1题************************ ...

  2. Mysql连接报错排查解决记录

    Mysql连接报错排查解决记录 背景: 系统:uos server-1060e ​ 运行环境kvm虚拟机 ​ mysql版本:5.7.44, for Linux (x86_64) 问题现象: 宿主机重 ...

  3. 优化永不止步：TinyVue v3.20.0 正式发布，更美观的官网UI，更友好的文档搜索，更强大的主题配置能力~

    你好,我是 Kagol,个人公众号:前端开源星球. 我们非常高兴地宣布,2024年12月4日,TinyVue 发布了 v3.20.0 . 本次 3.20.0 版本主要有以下重大变更: OpenTiny ...

  4. 记一次 contentInsetAdjustmentBehavior 引发的bug

    注:本文同步发布于微信公众号:stringwu的互联网杂谈记一次 contentInsetAdjustmentBehavior 引发的bug 1 背景 项目中使用到了UILable来展示相关的文本内容 ...

  5. 推荐4款基于.NET开源、功能强大的CMS建站系统

    前言 CMS系统作为一种强大的内容管理工具,在数字化时代发挥着越来越重要的作用.无论是个人博客还是大型企业官网,选择一个合适的CMS都能极大地提高效率和用户体验.今天大姚给大家推荐4款基于.NET开源 ...

  6. 使用GTD工作法提升效率

    前言 近年来随着工作.副业的开展,每天要做的事情越来越多,而且还积攒了很多工作,每天大脑被各种事情充斥着,乱糟糟的,不仅效率很低,还很容易导致焦虑. 为此我一直有在寻找合适的项目管理工具,也看了一些相 ...

  7. JVM-总结列表

    第一章 JVM内存结构 1.为什么要了解JVM内存管理机制 JVM自动的管理内存的分配与回收,这会在不知不觉中浪费很多内存,导致JVM花费很多时间去进行垃圾回收(GC) 内存泄露,导致JVM内存最终不 ...

  8. biancheng-Redis教程

    目录http://c.biancheng.net/redis/ 1Redis是什么2Windows下载安装Redis3Ubuntu下载安装Redis4Redis配置文件5Redis数据类型6Redis ...

  9. [rustGUI][iced]基于rust的GUI库iced（0.13）的部件学习（04）：实现窗口主题（颜色）变换（暨menu菜单的使用）

    前言 本文是关于iced库的部件介绍,iced库是基于rust的GUI库,作者自述是受Elm启发. iced目前的版本是0.13.1,相较于此前的0.12版本,有较大改动. 本合集是基于新版本的关于分 ...

  10. python的typing模块

    python的typing模块 参考:3个提高 Python 开发效率的小工具.Python3 Typing模块详解 typeing模块在python中提供类型支持,主要功能有: 类型检查,防止运行时 ...