amazon s3 – assets hosted on S3 behind Cloudfront used by several domains, the access-control-allow-origin does not vary

I have the following terraform

# Bucket to put backendphp assets (images/css/js)
#
resource "aws_s3_bucket" "assets" {
  bucket = local.workspace("assets_domain_name")
  acl    = "public-read"

  cors_rule {
    allowed_headers = ("*")
    allowed_methods = ("GET")
    allowed_origins = (
      "https://app.example.com",
      "https://admin.example.com",
      "https://backoffice.example.com"   
    )
    expose_headers  = ("ETag")
    max_age_seconds = 3000
  }

}


# pre-existing policy defined by AWS
data "aws_cloudfront_origin_request_policy" "this" {
  name = "Managed-CORS-S3Origin"
  # not compatible with tags
}

# pre-existing policy defined by AWS
data "aws_cloudfront_cache_policy" "this" {
  name = "Managed-CachingOptimized"
  # not compatible with tags
}

# Cloudfront distribution for "http" to "https" redirections for 'assets' subdomains
resource "aws_cloudfront_distribution" "assets_distribution" {
  origin {
    custom_origin_config {
      http_port              = "80"
      https_port             = "443"
      origin_protocol_policy = "http-only"
      origin_ssl_protocols   = ("TLSv1", "TLSv1.1", "TLSv1.2")
    }

    domain_name = aws_s3_bucket.assets.bucket_regional_domain_name
    origin_id   = aws_s3_bucket.assets.bucket
  }

  enabled             = true
  default_root_object = "index.html"

  default_cache_behavior {
    viewer_protocol_policy = "redirect-to-https"
    allowed_methods        = ("GET", "HEAD")
    cached_methods         = ("GET", "HEAD")
    target_origin_id       = aws_s3_bucket.assets.bucket
    min_ttl                = 0

    origin_request_policy_id = data.aws_cloudfront_origin_request_policy.this.id
    cache_policy_id          = data.aws_cloudfront_cache_policy.this.id
  }


  aliases = (
    aws_s3_bucket.assets.bucket,
  )



  viewer_certificate {
    acm_certificate_arn = aws_acm_certificate.assets_certificate.arn
    ssl_support_method  = "sni-only"
  }

  depends_on = (
    aws_acm_certificate.assets_certificate,
  )
}

the goal is to have the assets stored once , and usable by the different “frontends” of my webapps.

As I use resource integry i.e <link rel="stylesheet" href="https://assets.example.info/build/tailwind.784de744.css" crossorigin="anonymous" integrity="sha384-K5W1t5mSLgPoYODxKuVqxYbaCfZko17QXhZn2cJKeIBgTpmpKoNLRZn+msahlR81"> , it triggers CORS verification

  • if I use the s3 bucket directly, it works the css are loaded on all domains
  • If I use the s3 buckets and i put * as the allowed origins , it works through cloudfront

HOWEVER

  • if i put the list of specific, whitelisted, allowed origin
  • I visit first app.example.com , the css is loaded correctly
  • I vist then admin.example.com the css is not loaded, because cloudfront has cached “allow-origin: https://app.example.com”

it seems it was the error precised by this other question

but that was solved by putting the Origin header as being whitelisted so that cloudfront use it to generate its cache key.

HOWEVER I already do that by using the Managed-CORS-S3Origin

Is there something I’m missing here or is there something that has changed since ?