客户端浏览器安全：文件URL与页面URL的差异及跳转异常问题

请问指向文件的URL（例如https://domain.com/path/to/invoice.pdf）与指向页面的URL（例如https://domain.com/path）之间是否存在跳转差异？

问题详情：
在Firefox中一切正常，但Chrome会阻止跳转并报错ERR_BLOCKED_BY_CLIENT，Safari则打开空白页。我尝试过以下两种代码实现：
1.

window.open(linkToOpen, "_blank");

const a = document.createElement("a");
a.style.display = "none";
a.href = linkToOpen;
a.download = "file.pdf";
a.target = "_blank";
document.body.appendChild(a);
a.click();
a.remove();

Chrome未安装任何插件，且已尝试隐身模式，问题依旧。页面链接可正常跳转，但文件链接无法正常工作。

核心差异与问题根源 #

文件URL和页面URL的跳转逻辑在浏览器中存在明确差异：

• 页面URL：浏览器会直接加载对应HTML资源，这类跳转属于常规导航，浏览器安全拦截机制限制较松。
• 文件URL：浏览器需要先判断是在页面内预览文件还是触发下载流程，这个过程更容易触发安全拦截，尤其是非用户主动交互发起的跳转。

你遇到的问题分两种情况：

1. Chrome的ERR_BLOCKED_BY_CLIENT：即便没有第三方插件，Chrome的内置安全策略会拦截非用户直接触发的文件跳转。比如代码在异步回调、定时器或非直接点击事件中执行时，会被判定为潜在的非预期跳转并拦截。
2. Safari空白页：Safari对动态创建的<a>标签有更严格的DOM就绪要求，设置display: none会导致节点未被正确识别，加上download属性的安全限制，就会出现空白页问题。

针对性解决方案 #

1. 绑定跳转逻辑到用户主动交互 #

所有文件跳转代码必须放在用户直接触发的事件处理函数中（如click、submit），禁止在异步逻辑或非交互回调中直接执行：

// 正确示例：绑定到按钮点击事件
document.getElementById('openFileBtn').addEventListener('click', function() {
  const fileUrl = 'https://domain.com/path/to/invoice.pdf';
  const link = document.createElement('a');
  link.href = fileUrl;
  link.target = '_blank';
  // 如需强制下载保留download，如需浏览器预览则移除
  link.download = 'invoice.pdf';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

2. 异步场景下的Chrome适配 #

如果必须在异步请求完成后触发文件跳转，需通过用户二次确认的方式触发：

// 异步获取文件URL后生成确认按钮
fetch('/api/get-file-url')
  .then(res => res.text())
  .then(fileUrl => {
    const confirmBtn = document.createElement('button');
    confirmBtn.textContent = '点击打开文件';
    confirmBtn.addEventListener('click', () => {
      window.open(fileUrl, '_blank');
      confirmBtn.remove();
    });
    document.body.appendChild(confirmBtn);
  });

3. Safari兼容性调整 #

移除display: none，改用绝对定位将<a>标签移出视口，同时添加短暂延迟确保DOM节点就绪：

const fileUrl = 'https://domain.com/path/to/invoice.pdf';
const link = document.createElement('a');
link.href = fileUrl;
link.target = '_blank';
link.download = 'file.pdf';
// 用绝对定位替代display:none，确保节点被浏览器识别
link.style.position = 'absolute';
link.style.left = '-9999px';
document.body.appendChild(link);
// 延迟触发点击，适配Safari的DOM加载机制
setTimeout(() => {
  link.click();
  document.body.removeChild(link);
}, 100);

内容的提问来源于stack exchange，提问作者sepia__plot