Not allowed to navigate top frame to data URL问题
时间:2022-07-22
本文章向大家介绍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 URL: data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iag...
# 原因
由于data:xxx协议存在安全问题,编码的url可能会被包含了一些攻击代码,被用来做网络钓鱼攻击,所以Chrome 60 开始禁止页面使用data:url的方式跳转导航,包括以下几种情况
-
<a href="data:xxxxx">
点击跳转 window.open(“data:xxx”)
window.location="data:xxx"
# 解决方法
- iframe
var string = doc.output('datauristring')
var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
var x = window.open()
x.document.open()
x.document.write(iframe)
x.document.close()
- JSPDF输出二进制文件
var pdfUrl = doc.output('datauri').substring(doc.output('datauri').indexOf(',') + 1);
var binary = atob(pdfUrl.replace(/s/g, ''));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
view[i] = binary.charCodeAt(i);
}
var blob = new Blob([view], { type: "application/pdf" });
window.open(doc.output('blob'), '_blank');
# 参考资料
- go sync.Mutex 设计思想与演化过程 --转
- hadoop开发必读:认识Context类的作用
- Logback+ELK+SpringMVC搭建日志收集服务器
- 【译】Spring 官方教程:创建批处理服务
- Oracle12c R2版本Application Containers特性(三)
- Shell系列-编写及执行脚本
- Spring Security 入门(五):在 Spring-Boot中的应用
- Go语言Goroutine与Channel内存模型
- Tarjan--LCA算法的个人理解即模板
- spark sql编程之实现合并Parquet格式的DataFrame的schema
- Oracle压缩黑科技(一)—基础表压缩
- 12 条用于 Linux 的 MySQL/MariaDB 安全最佳实践
- hdu----(4545)魔法串(LCS)
- Oracle压缩黑科技(二)—压缩数据的修改
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 面试时被问到单例模式,怎么回答才能让面试官眼前一亮?
- 老司机手把手教你编写自己的springboot starter
- 实战|如何消除又臭又长的if...else判断更优雅的编程?
- 硬核 | 使用spring cache让我的接口性能瞬间提升了100倍
- 11张图让你彻底明白jdk1.7 hashmap的死循环是如何产生的
- 基于qiankun落地部署微前端爬”坑“记
- springboot面试杀手锏-自动配置原理
- 树酱的前端知识体系构建(上)
- 这8种保证线程安全的技术你都知道吗?
- 并发编程中cas的这三大问题你知道吗?
- 再也不用怕面试问二叉树了
- Redux快速上手
- CSP
- Saltstack_使用指南07_远程执行-执行模块
- 学习从拥有一支好笔开始