请求协助：在YAML模板中添加CloudFront白名单头部

我之前处理过类似的场景，tainted canvas错误本质是浏览器的跨域资源共享（CORS）策略限制——当你尝试从视频海报图生成或操作canvas时，如果资源没有携带正确的CORS头部，浏览器就会标记canvas为"tainted"并阻止后续操作。要把手动添加头部白名单的操作自动化到CloudFormation YAML模板中，其实就是在CloudFront分发配置里定义对应的头部规则，下面给你两种常用的实现方式：

方式1：自定义缓存策略，允许特定头部传递 #

如果你之前手动操作是把头部加入CloudFront的缓存白名单（让CloudFront保留并转发这些头部给客户端），可以通过创建自定义缓存策略来实现：

Resources:
  # 自定义缓存策略，包含需要白名单的头部
  MediaCachePolicy:
    Type: AWS::CloudFront::CachePolicy
    Properties:
      CachePolicyConfig:
        Name: InternalMediaCachePolicy
        DefaultTTL: 86400
        MaxTTL: 31536000
        MinTTL: 0
        ParametersInCacheKeyAndForwardedToOrigin:
          EnableAcceptEncodingGzip: true
          EnableAcceptEncodingBrotli: true
          HeadersConfig:
            HeaderBehavior: whitelist
            Headers:
              - Access-Control-Allow-Origin
              - Access-Control-Allow-Methods
              - Access-Control-Allow-Headers
              # 这里添加你手动加入白名单的其他头部，比如Content-Type等

  # CloudFront分发配置，引用上面的缓存策略
  MediaCDNDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Enabled: true
        Origins:
          - Id: InternalMediaOrigin
            DomainName: your-media-storage-origin.example.com
            CustomOriginConfig:
              HTTPPort: 80
              HTTPSPort: 443
              OriginProtocolPolicy: https-only
        DefaultCacheBehavior:
          TargetOriginId: InternalMediaOrigin
          CachePolicyId: !Ref MediaCachePolicy
          ViewerProtocolPolicy: redirect-to-https
          AllowedMethods:
            - GET
            - HEAD
            - OPTIONS
          CachedMethods:
            - GET
            - HEAD
            - OPTIONS

这个配置会让CloudFront把你指定的头部纳入缓存键，并从源站获取后转发给客户端，确保浏览器能拿到正确的CORS头部。

方式2：使用响应头部策略，主动添加CORS头部 #

如果你的源站没有返回必要的CORS头部，或者你想让CloudFront直接负责添加这些头部，可以创建一个响应头部策略：

Resources:
  # 自定义CORS响应头部策略
  MediaCORSPolicy:
    Type: AWS::CloudFront::ResponseHeadersPolicy
    Properties:
      ResponseHeadersPolicyConfig:
        Name: InternalMediaCORSPolicy
        CorsConfig:
          AccessControlAllowCredentials: false
          AccessControlAllowHeaders:
            Items:
              - Content-Type
              - Origin
              - X-Requested-With
          AccessControlAllowMethods:
            Items:
              - GET
              - HEAD
              - OPTIONS
          AccessControlAllowOrigins:
            Items:
              - "https://your-internal-ui-domain.com" # 替换成你的UI域名，或者用*允许所有（内部环境可放宽）
          AccessControlMaxAgeSec: 3600
          OriginOverride: true

  # CloudFront分发配置，引用响应头部策略
  MediaCDNDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Enabled: true
        Origins:
          - Id: InternalMediaOrigin
            DomainName: your-media-storage-origin.example.com
            CustomOriginConfig:
              HTTPPort: 80
              HTTPSPort: 443
              OriginProtocolPolicy: https-only
        DefaultCacheBehavior:
          TargetOriginId: InternalMediaOrigin
          ViewerProtocolPolicy: redirect-to-https
          AllowedMethods:
            - GET
            - HEAD
            - OPTIONS
          CachedMethods:
            - GET
            - HEAD
            - OPTIONS
          ResponseHeadersPolicyId: !Ref MediaCORSPolicy

这种方式下，CloudFront会在返回给客户端的响应中主动添加你配置的CORS头部，不需要源站做额外配置，非常适合自动化部署场景。

注意事项 #

• 如果你不确定之前手动添加的是哪些头部，可以登录CloudFront控制台，查看对应分发的缓存行为配置，找到"缓存键和源请求"里的头部白名单，把那些头部复制到YAML模板中即可。
• 针对内部CDN，你可以根据实际需求放宽CORS规则，但建议尽量指定具体的UI域名，避免不必要的安全风险。

内容的提问来源于stack exchange，提问作者Stephen D.