How to force Cloudfront to make all requests from origin forced to be HTTPS?

Question

I am having some odd behavior with my Cloudfront distribution for my website https://phillhocking.com

This Cloudfront distribution is managed by Terraform, and here is the code I am using to instantiate it:

resource "aws_cloudfront_distribution" "ghost-lightsail" {
  price_class = "PriceClass_100"

  origin {
    domain_name = var.cloudfront_glue
    origin_id   = "${var.name}-origin"

    custom_origin_config {
      http_port              = 80
      https_port             = 443
      origin_protocol_policy = "http-only"
      origin_ssl_protocols   = ["TLSv1.2"]
    }
  }

  enabled             = true
  is_ipv6_enabled     = true
  default_root_object = "/"

  #  lifecycle {
  #    prevent_destroy = true
  #  }

  aliases = [var.domain_name]

  default_cache_behavior {
    allowed_methods  = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "${var.name}-origin"
    compress         = true

    forwarded_values {
      query_string = true
      headers      = ["*"]

      cookies {
        forward = "all"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }

  ordered_cache_behavior {
    path_pattern     = "assets/*"
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "${var.name}-origin"
    compress         = true

    forwarded_values {
      query_string = true
      headers      = ["*"]

      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }

  ordered_cache_behavior {
    path_pattern     = "content/*"
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "${var.name}-origin"
    compress         = true

    forwarded_values {
      query_string = true
      headers      = ["*"]
      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }

  ordered_cache_behavior {
    path_pattern     = "public/*"
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "${var.name}-origin"
    compress         = true

    forwarded_values {
      query_string = true
      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }

  ordered_cache_behavior {
    path_pattern     = "img_responsive/*"
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "${var.name}-origin"
    compress         = true

    forwarded_values {
      query_string = true
      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }

  tags = {
    Environment = "${var.name}-dev"
  }

  restrictions {
    geo_restriction {
      restriction_type = "none"
    }
  }

  viewer_certificate {
    acm_certificate_arn      = var.cloudfront_ssl_acm_arn
    ssl_support_method       = "sni-only"
    minimum_protocol_version = "TLSv1.1_2016"
  }
}

The entire project is located here: https://github.com/phillhocking/aws-ghost/tree/dev

You will note that redirect-to-https is true for all of the content types, however, it still tries to load content via http for any images on the Lightsail instance that are new posts and I am not sure how to diagnose/troubleshoot this any further. My goal is to not have to do any systems administration tasks on the Lightsail instance and fix this via the Cloudfront distribution.

This only happens with a particular post: https://phillhocking.com/new-linkedin-feature-request/

Note the content from the CDN distribution is requesting an http:// image

When you click on these links in the Developer pane, it goes to the image without any issue. Why would the Cloudfront distribution not automatically manage this behavior from the origin?

Answer 1

The redirection works correctly. You can't fetch your images with http, only https. But this will only take effect when you will actually try get the images.

I think that chrome just checks the source code of your page, and sees http for images or some of the links, and stops. It does not try to actually fetch the images and follow redirection from http to https.