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

时间：2022-06-01 22:18:38
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;')

相关文章