HTML5视频track标签加载GCS签名URL字幕报安全错误咨询

为什么<track>标签跨域限制更严格 #

• 字幕资源属于可被页面JS直接读取内容的跨域资源，和<video>/<img>这类仅允许嵌入展示、禁止JS读取原始内容的资源不同：WebVTT字幕支持绑定cue事件、允许JS直接获取全量字幕文本，如果默认放开跨域限制，恶意站点可以通过嵌入跨域字幕、探测加载状态/读取内容窃取用户隐私（比如判断用户是否访问过特定视频站点、窃取用户专属的字幕内容），因此W3C规范对<track>默认启用同源策略限制，跨域加载必须严格满足CORS校验规则。
• 你遇到的报错和GCS权限配置无关：关闭“阻止公共访问”是存储侧的访问控制逻辑，和浏览器侧的CORS安全校验完全独立，哪怕资源完全公开，不满足CORS要求照样会被浏览器拦截。

为什么配了CORS还是加载失败 #

你有两个配置遗漏：

1. 未给<track>及父级<video>标签添加crossorigin属性：<track>默认使用same-origin请求模式，不会在请求中携带Origin头，也不会处理服务端返回的CORS响应头，哪怕GCS侧配了CORS规则，浏览器也会直接拦截跨域响应。
2. GCS的CORS配置不完整：仅允许GET方法、仅放行Content-Type响应头，缺少跨域预检需要的OPTIONS方法支持，也未放行CORS校验必需的相关响应头，会导致预检请求直接失败。

不需要搭建后端代理，按以下步骤调整即可：

1. 修改页面标签配置
   给<video>和<track>标签都加上crossorigin="anonymous"属性，告知浏览器使用CORS模式发起跨域请求，不需要携带身份凭证。修正后的track标签示例：

   <track label="my_subtitle_file" src="my_signed_url" srclang="en" kind="subtitles" crossorigin="anonymous">
   

   注意：如果video标签不加该属性，部分浏览器会出现媒体资源与字幕资源跨域策略不匹配的问题，仍然会拦截字幕加载。

2. 修正GCS存储桶CORS配置
   补充OPTIONS方法支持，补全必要的放行响应头，参考配置如下：

   [
     {
       "origin": ["https://my-domain.com"],
       "responseHeader": ["Content-Type", "Content-Length", "ETag", "Access-Control-Allow-Origin"],
       "method": ["GET", "HEAD", "OPTIONS"],
       "maxAgeSeconds": 3600
     }
   ]
   

   配置修改后等待1-2分钟生效，同时清空浏览器缓存（之前失败的CORS预检请求会被缓存1小时，直接硬刷新可能不生效）。

3. 备选前端兜底方案
   如果暂时无法调整CORS配置，可以在前端通过fetch主动拉取字幕内容，转成本地Blob URL再赋值给track标签，绕过标签默认的同域请求逻辑，示例代码：

   async function loadSubtitle(signedSubtitleUrl) {
     const resp = await fetch(signedSubtitleUrl);
     const subtitleContent = await resp.text();
     const subtitleBlob = new Blob([subtitleContent], { type: 'text/vtt' });
     const localUrl = URL.createObjectURL(subtitleBlob);
     document.querySelector('video track').src = localUrl;
   }
   

   这个方案只需要保证fetch请求能正常跨域拿到字幕内容即可，不需要修改标签的crossorigin属性。

补充说明：视频资源能正常跨域播放是因为<video>默认的跨域加载模式是“仅允许嵌入展示、禁止JS读取内容”，浏览器不会对这类资源做严格CORS拦截，和字幕的安全等级不一样，所以不会出现报错。

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