PocketBase视频播放Safari兼容性问题解决方案

在PocketBase项目中处理媒体文件时，开发者可能会遇到Safari浏览器无法播放视频的问题。这个问题主要源于Safari/WebKit对内容安全策略(CSP)的特殊要求，特别是在较旧版本的Safari中表现更为明显。

问题现象

当用户尝试在以下设备上播放视频时会出现问题：

• MacBook Pro 2019（Safari无法播放，Chrome正常）
• iPhone 11/12（Safari和Chrome均无法播放）

错误信息中通常会显示"Blocked script"提示，这表明问题与内容安全策略限制有关。

根本原因分析

Safari/WebKit浏览器对视频预览有特殊的安全要求，需要允许脚本执行("allow-scripts")。而PocketBase出于安全考虑，默认配置会禁止JS执行，因为允许JS执行可能会带来安全风险。

解决方案

可以通过以下两种方式修改默认的CSP配置：

1. Go语言解决方案

在应用初始化代码中添加文件下载请求的钩子：

app.OnFileDownloadRequest().BindFunc(func(e *core.FileDownloadRequestEvent) error {
    e.Request.Header.Set("Content-Security-Policy", 
        "default-src 'none'; media-src 'self'; style-src 'unsafe-inline'; sandbox allow-scripts")
    return e.Next()
})

2. JavaScript解决方案

在pb_hooks/main.pb.js文件中添加处理逻辑：

onFileDownloadRequest((e) => {
    e.request.header.set("Content-Security-Policy", 
        "default-src 'none'; media-src 'self'; style-src 'unsafe-inline'; sandbox allow-scripts")
    e.next()
})

安全注意事项

虽然修改CSP可以解决Safari的兼容性问题，但开发者需要注意：

1. 允许脚本执行可能会带来XSS等安全风险
2. 建议仅对确实需要视频播放的场景应用此修改
3. 尽可能限制修改的范围，只针对特定类型的文件

浏览器兼容性建议

1. 建议用户升级到最新版Safari，因为较新版本可能已经修复了相关CSP问题
2. 对于必须支持旧版Safari的场景，可以采用上述解决方案
3. 考虑在应用中添加浏览器检测逻辑，针对不同浏览器提供不同的处理方式

通过合理配置内容安全策略，可以在保证安全性的前提下解决Safari浏览器的视频播放兼容性问题。