Angular 17中打开网络共享路径时出现about:blank#blocked问题

问题原因 #

浏览器的跨协议安全策略会阻止HTTP/HTTPS环境下的网页（Angular应用默认运行在此环境）通过脚本触发file://协议跳转，以此防范恶意网站访问本地资源。而手动输入file://xyz/属于用户主动发起的请求，因此不会被拦截。同时Angular的路由机制可能会对<a>标签的跳转进行拦截处理，进一步导致跳转失败。

解决方案 #

1. 原生DOM元素触发跳转（推荐）

绕开Angular的路由拦截，直接通过原生JavaScript创建并触发<a>标签的点击事件，避免Angular对跳转的干预：

组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-share-link',
  templateUrl: './share-link.component.html',
  styleUrls: ['./share-link.component.css']
})
export class ShareLinkComponent {
  openNetworkShare(): void {
    const shareLink = document.createElement('a');
    shareLink.href = 'file://xyz/';
    shareLink.target = '_blank';
    shareLink.rel = 'noopener noreferrer'; // 避免安全警告
    document.body.appendChild(shareLink);
    shareLink.click();
    document.body.removeChild(shareLink);
  }
}

模板代码：

<button (click)="openNetworkShare()">打开网络共享路径</button>

2. 修改浏览器安全设置（仅用于测试或内部环境）

如果是内部使用的应用，可以让用户修改浏览器设置以允许跨协议跳转，但此方法存在安全风险，不建议对外公开的应用使用：

• Chrome：在地址栏输入 chrome://flags/#allow-file-access-from-files，将选项设置为Enabled后重启浏览器。
• Firefox：在地址栏输入 about:config，搜索security.fileuri.strict_origin_policy，将其值改为false。

3. 桌面应用场景：使用系统命令打开

如果你的Angular应用是基于Electron等桌面框架开发的，可以直接调用系统命令打开共享路径，完全绕过浏览器的安全限制：

import { exec } from 'child_process';

openNetworkShare(): void {
  // Windows系统
  exec('start file://xyz/', (error) => {
    if (error) console.error('打开共享路径失败:', error);
  });
  // macOS系统替换为以下命令
  // exec('open file://xyz/', (error) => { ... });
}

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