Chrome打开PDF报错:Not allowed to navigate top frame to data URL

var pdf = "data:application/pdf;base64," + data;
window.open(pdf);

在Chrome使用window.open()打开pdf报错:

Not allowed to navigate top frame to data URL: data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1....

原因分析

Chrome 60 开始禁止页面使用data:url的方式跳转导航,禁止data:url导航的使用包括:

  • <a href="data:xxxxx"> 点击跳转
  • window.open(“data:xxx”)
  • window.location="data:xxx"

对于使用data:url直接来加载数据的场景不会禁止,如

  • <img src="data:xxx" />直接加载图片
  • <iframe src="data:xxx" 

之所以禁止页面使用dta:url的方式跳转导航,是由于data:xxx协议存在安全问题,编码的url可能会被包含了一些攻击代码,被用来做网络钓鱼攻击。

解决方案

Chrome并没有禁止直接使用data:url的方式加载数据,如iframe,所以可以把数据放到iframe的属性src里。

var win = window.open();
var pdf = "data:application/pdf;base64," + data;
win.document.write('&lt;iframe src="' + pdf + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen&gt;&lt;/iframe&gt;')

版权声明:著作权归作者所有。

相关推荐

Javascript检测开发者工具Devtools是否打开(Chrome/Firefox/IE)

首先要确定一点:是没有统一标准的方法来检测各个浏览器的devtools是否打开。所以只能针对不同的浏览器使用不同的方案,当然随着浏览器能的升级,有可能目前的方案也是会不适用的。这里列出目前各个浏览器可用的方案。方案一console.log隐式调用元素的idfunction isDevToolsOpened() {  var opened = fal

Angular4 监听路由URL的变化

Angular 4检测路由变化,可以使用router.events来监听:支持的事件类型:NavigationStart:导航开始NavigationEnd:导航结束NavigationCancel:取消导航NavigationError:导航出错RoutesRecoginzed:路由已认证在判断事件类型需要导入对应的事件类型,如:import { Router,&n