Not allowed to navigate top frame to data URL

原创

彭世瑜 2022-02-28 18:10:26 ©著作权

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

报错

今天尝试从浏览器页面中打开图片，报错

window.location.href = 'data:image/gif;base64,R0lGO...'

Not allowed to navigate top frame to data URL

原因

Chrome 禁止从页面打开 Data URI 网址了，是出于安全考虑

处理

建议从后端获取

参考
chrome浏览器报错Not allowed to navigate top frame to data URL怎么解决?

上一篇：vue-clipboard2实现点击复制

下一篇：Promise对象简单入门

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

apisix使用正则匹配URL

背景需求：需要通过apisix做token认证，然后针对一部分的url不做认证，有的url是/xxx/*/xxx，这样格式的，这里我是通过apisix组件ingress controller设置apisixroute配置的路由，如果直接通过apisix admin的话直接就可以，而通过controller会出现问题，下面是报错信息：The ApisixRoute "e

正则资料文档 ide
Ansible get_url模块

该模块主要用于从http/ftp/https服务器上下载文件(类似于wget)，主要有下面选项:timeout:下载超时时间，默认为10surl:下载的urldest:文件下载的位置checksum：对下载资源进行校验mode:文件权限url_password/url_username :主要用于需要用户名和密码进行验证的情况use_proxy:是使用代理，代理需要事先在

ansibleget_url模块
MySQL使用 LOAD DATA INFILE 语句

LOAD DATA INFILE 是 MySQL 中用于从文本文件高速导入数据到数据库表中的一个命令。以下是关于如何使用 LOAD DATA INFILE 的详细说明：语法LOAD DATA [LOW_PRIORITY | CONCURRENT] [LOCAL] INFILE 'file_name.txt'[REPLACE | IGNORE]INTO TABLE

导入数据字段 MySQL
Data URL

Data URL各字符的含义网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：.title {background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAA

数据 css html
data:url website

http://dataurl.net/#dataurlmaker

data:image/gif base 64
如何理解data URL？

canvas有一个非常常用的方法canvas.toDataURL()，它会将canvas转化为data URL的格式。通常情况下这个data URL的类型为image。现代浏览器将data url视作唯一的不透明来源，而不是负责导航的url。 data URL与传统的url…

Canvas 数据 html 字符串
Data URL和图片

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，

图片 data-url base64 webfont css
jquery获取data-url

# jQuery获取data-url## 1. 简介在WEB开发中，经常需要获取HTML元素上的自定义属性，比如data-url。jQuery是一种常用的JavaScript库，提供了简洁的语法和强大的功能，使得操作HTML和处理事件变得更加容易。本文将介绍如何使用jQuery来获取data-url属性的值，并给出代码示例。## 2. 获取data-url属性的值### 2.1 H

HTML jQuery 字符串
Data URL简介与使用

1. 简介Data URL，是以data:模式为前缀的URL，允许内容的创建者将较小的文件嵌入到文档中。与常规的URL使用场合类似，下面会具体介绍可以将Data URL用在哪些地方。Data URL由data:前缀、MIME类型（表明数据类型）、base64标志位（如果是文本，则可选）以及数据本身四部分组成。语法格式如下：data:[<mediatype>][;base64],data

java
ios 图片url转data

# 如何实现iOS图片URL转Data## 流程图```mermaidstateDiagram 开始 --> 下载图片URL 下载图片URL --> 转换为Data 转换为Data --> 使用Data 使用Data --> 结束```## 步骤| 步骤 | 操作 ||----------------

Data 下载图片数据
CL_FXS_URL_DATA_FETCHER - a good utility to fetch picture binary data according to url

C
Data URL和图片，及Data URI的利弊

Data URL给了我们一种很巧妙的将图片“嵌入”到HTM

操作系统 php Data CSS 字符串
AJAX - $.get( url, [data], [success], [type] )

$.get(url,data,success(response,status,xhr),dataType)url：必需。规定将请求发送的哪个 URL。data：可选。规定连同请求发送到服务器的数据。

ajax get json 数据 javascript
Not allowed to navigate top frame to data URL

报错今天尝试从浏览器页面中打开图片，报错window.location.href = 'data:image/gif;base64,R0lGO...'Not allowed to navigate top frame to data URL原因Chrome 禁止从页面打开 Data URI 网址了，是出于安全考虑处理建议从后端获取参考chrome浏览器报错Not allow...

后端
python 将Data URL scheme转为图片

# Python将Data URL scheme转为图片Data URL scheme是一种用于将小型文件（通常是图像或音频文件）嵌入到文档中的方案。它是一种将文件数据编码为URL字符串的方法，可以直接在网页中展示图片，而无需额外的HTTP请求。在Python中，我们可以使用base64模块来将Data URL scheme转为图片。## Data URL scheme的结构Data

Data 数据 Image
[AJAX系列]$.get(url,[data],[fn],[type])

$.get(url,[data],[fn],[type]) 概述通过远程HTTP GET请求载入信息参数 url:待载入页眉的URL地址 data:待发送key/value参数 callback：载入成功时回调函数 type：返回内容格式xml html script json text _de

Ajax java ajax
[AJAX系列]$.post(url,[data],[fn],[type])

概述：通过远程HTTP POST请求载入信息参数： url:发送请求地址 data:待发送Key/value值 callback：发送成功时回调函数 type:返回内容格式 xml html script json text _default 示例：描述：请求test.php页面忽略返回值

Ajax java ajax
Not allowed to navigate top frame to data URL问题

记下谷歌浏览器下面js生成PDF打开的时候报错的问题 var doc = new jsPDF();doc.autoTable({ html: '#print-table' });window.open(doc.output('datauristring')); 在Chrome打开使用jsPdf生成的pdf报错 Not allowed to navigate top frame to data

python java js url ajax
【转】Data URL和图片，及Data URI的利弊

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载

html css 加载数据字符串
爬虫 DATA/URL 去重

爬虫 DATA/URL 去重舆情业务必须紧盯网站是否有新的内容发布，要求是越快越好，但由于各项软硬件限制，通常会要求在 30 分钟内或者 15 分钟内监听到新内容。要实现对目标网站内容变化的监听，那么我们可以选择的比较好的方式就是轮询。不停地访问网页，并且判断是否有“新内容”出现，如果有的话就执行 ...

redis mongodb mysql 应用程序数据存储
element 表格转圈圈等待数据加载成功

在父组件中使用$set方法导致子组件中的数据更新失败问题一：在父组件中使用$set方法导致子组件中的数据更新失败出现问题的原因：因为我在方法中调用的$set方法，该方法会触发页面全部重新渲染。不懂的该方法可以去官网中查看解释。vue文档列表渲染中有条注意事项然后我给子组件传入了该dataList对象数组中的某个对象的monitorMasters数据然后我只在子组件的的mounted()方法中调

前端 javascript 开发语言数据 set方法
python seaborn 网格

一.学习的内容 1，图表辅助元素（1）设置坐标轴的标签、刻度范围和刻度标签import numpy as np import matplotlib.pyplot as plt plt.rcParams['font.sans-serif']=['SimHei'] plt.rcParams['axes.unicode_minus']=False x=np.linspace(-np.pi,np.pi,

python seaborn 网格 python 数据分析机器学习 ico
unicorn python 模拟so程序

目录1 认识计划2 迈出我们的第一步！下载Python那些基础函数返回值变量开始编写我们的函数3 期待下一次学习！1 认识计划拿起计算器，看着令人眼花缭乱的按键，谁不会心生敬佩呢。today，我们从这个萌萌的计算器入手，学习Python。与其说利用数学学Python，还不如说是利用Python学数学。幽白还只是个即将毕业的小学生，数学部分就不要太计较，也欢迎大家来指出我的错误，让我涨涨知识。我么们

python Python 自定义函数内置函数
vue和python的写法有什么区别

全栈开发django+vue.js实战派背景和目标学习djiango这本书的各种设计与思想content视图和url在基本操作完成之后你可以进行简单的映射访问还可以使用复杂的，例如变化的url参数，但是后端能通过变量接收到解析出来| 还可以通过httprequest来看请求的参数内容，并且控制get和post方式的捕捉 | 还可以通过render渲染到页面文件中 | 还可以写成类方式djang

vue和python的写法有什么区别 python vue.js django 表单
jqueryui后台模板

目的：开发自己的APP——前端篇。已有基础：HTML、CSS、Javascript、jQuery----------------------------我是华丽丽的分割线------------------------- 从这一章起开始介绍JM(jQuery Mobile)框架。我们直接从代码入手，边看边学习。编译器（IDE：Integrated Development Environment）

jqueryui后台模板 jQuery Mobile 移动平台框架 hybrid

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯