Angular+Cordova iOS端播放本地cdvfile视频遇CSP问题求助

我刚帮几个开发者解决过类似的WKWebView + Angular + Cordova iOS视频播放问题，结合你的配置细节，给你几个关键的修复步骤：

1. 修正Content Security Policy (CSP) 配置 #

你遇到的unsafe:app://localhost/...拦截错误，核心是CSP未明确允许app:这个scheme。需要把它加到所有涉及资源加载的指令里，尤其是media-src：

<meta http-equiv="Content-Security-Policy" content="
  default-src * data: blob: filesystem: about: ws: wss: gap: cdvfile: app: 'unsafe-inline' 'unsafe-eval';
  script-src * filesystem: gap: cdvfile: app: data: blob: 'unsafe-inline' 'unsafe-eval';
  connect-src * filesystem: gap: cdvfile: app: data: blob: 'unsafe-inline';
  img-src * filesystem: gap: cdvfile: app: data: blob: 'unsafe-inline';
  style-src * data: blob: 'unsafe-inline';
  font-src * data: blob: 'unsafe-inline';
  media-src * filesystem: gap: cdvfile: app: data: blob: mediastream: ;
">

WKWebView转换后的路径是app://开头的，这个scheme必须被CSP明确放行。

2. 正确处理WKWebView路径转换 #

cordova-ios 6.x+的WKWebView不直接支持cdvfile://路径，必须用官方提供的转换工具，注意路径获取的正确姿势：

// 获取FileEntry后，用toInternalURL()拿到原始cdvfile路径
const cdvFilePath = entry.toInternalURL();
// 转换为WKWebView可识别的app://格式路径
const wkSafePath = window.WkWebView.convertFilePath(cdvFilePath);

不要用entry.toURL()，它返回的路径格式不兼容转换函数。

3. 绕过Angular的URL安全校验 #

Angular默认会对绑定到DOM的URL做安全校验，app://路径会被标记为不安全，导致video标签无法加载。你需要用DomSanitizer把转换后的路径标记为合法资源：

首先在组件中注入工具类：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  // 你的组件配置
})
export class VideoPlayerComponent {
  videoSrc: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {}

  // 加载视频的方法
  loadLocalVideo(entry: FileEntry) {
    const cdvFilePath = entry.toInternalURL();
    const wkSafePath = window.WkWebView.convertFilePath(cdvFilePath);
    // 标记为安全的资源URL
    this.videoSrc = this.sanitizer.bypassSecurityTrustResourceUrl(wkSafePath);
  }
}

模板中直接使用处理后的路径即可，另外注意你的视频是MOV格式，type要对应改为video/quicktime：

<video *ngIf="videoSrc" width="640" height="360" preload controls>
  <source [src]="videoSrc" type="video/quicktime" />
</video>

4. 确认config.xml的权限配置 #

确保你的config.xml覆盖了app:和cdvfile:的访问权限，同时确认WKWebView引擎插件已安装：

<access origin="cdvfile://*" />
<access origin="app://*" />
<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />
<plugin name="cordova-plugin-wkwebview-engine" spec="^1.2.1" />

最后验证步骤 #

1. 打印转换后的wkSafePath，确认格式为app://localhost/_app_file_/...
2. 检查Xcode控制台的CSP错误是否消失
3. 确认视频保存路径是WKWebView可访问的（你用的Library/NoCloud是合规路径）

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