通过AWS CloudFront带签名Cookie托管VTT文件遇跨域及403问题

问题描述 #

浏览器控制台报错：

不安全的URL加载尝试：从框架URL https://mylocalmachine.mydomain.com/blaa/contentSetup.. 加载URL https://myprivatecdn.mydomain.com/blaa/media/1488/someVideoCaptions.vtt。域名、协议和端口必须匹配。

使用的初始代码：

<video playsinline="" controls="" preload="auto" width="640" height="264">
  <source src="https://myprivatecdn.mydomain.com/blaa/media/1488/someVideo.mp4" type="video/mp4">
  <track kind="captions" src="https://myprivatecdn.mydomain.com/blaa/media/1488/someVideoCaptions.vtt" default>
</video>

视频可正常播放，但字幕无法显示；本地托管所有文件时一切正常。视频和字幕文件存储在受CloudFront签名Cookie限制访问的S3存储桶中，已配置返回Access-Control-Allow-Origin: *的CORS策略。

添加crossorigin="anonymous"到video标签后，视频和字幕均无法加载，返回403错误：

<?xml version="1.0" encoding="UTF-8"?><Error><Code>MissingKey</Code><Message>Missing Key-Pair-Id query parameter or cookie value</Message></Error>

解决步骤 #

1. 修改video标签的跨域属性 #

将crossorigin="anonymous"改为crossorigin="use-credentials"，让浏览器在跨域请求时携带CloudFront签名Cookie。修改后的代码：

<video playsinline controls preload="auto" width="640" height="264" crossorigin="use-credentials">
  <source src="https://myprivatecdn.mydomain.com/blaa/media/1488/someVideo.mp4" type="video/mp4">
  <track kind="captions" src="https://myprivatecdn.mydomain.com/blaa/media/1488/someVideoCaptions.vtt" default>
</video>

2. 更新S3的CORS策略 #

带凭证的跨域请求不允许使用*作为AllowedOrigin，需指定具体请求域名，同时开启凭证支持。示例配置：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://mylocalmachine.mydomain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <AllowCredentials>true</AllowCredentials>
  </CORSRule>
</CORSConfiguration>

3. 调整CloudFront缓存行为设置 #

• 确保CloudFront的Cookie转发设置为「转发所有关联的Cookie」，或明确指定CloudFront签名Cookie的名称（CloudFront-Key-Pair-Id、CloudFront-Signature、CloudFront-Date），保证这些Cookie能转发到S3完成验证。
• 允许OPTIONS请求通过，跨域请求会先发送预检OPTIONS请求，需在CloudFront行为中配置允许该方法。
• 配置Origin Request Policy，确保必要的请求头和Cookie被包含在转发到S3的请求中。

4. 验证CloudFront响应头 #

确认CloudFront返回的响应中包含Access-Control-Allow-Credentials: true，以及与请求域名匹配的Access-Control-Allow-Origin。

原因说明 #

• 初始无crossorigin属性时，浏览器对<track>资源的跨域加载限制更严格，直接阻止了字幕文件加载；视频文件的加载规则相对宽松，因此能正常播放。
• 使用crossorigin="anonymous"时，浏览器不会携带任何Cookie，导致CloudFront无法验证签名，返回MissingKey错误。

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