css Question posted in
Some basic documentation can be found here.

CSS MIME type error when serving site from S3 via CloudFront

When visiting my website customtimers.net I get the following error:

Refused to apply style from 'https://customtimers.net/styles.css' because its MIME type
('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

However, CSS seems to be working on the site just fine.

I’m using an S3 static website served via CloudFront for HTTPS.

In S3:

  • The file type for the CSS file is text/css.
  • All the files are located at the root directory except for some sound files.

I used Angular to create the front-end so my index.html is pretty much what it generated by default:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Customizable Timers</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

The css file is referenced in app-root (in the body above) which is:

<!DOCTYPE html>
<html lang="en" [attr.data-bs-theme]="theme">

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="A website where you can create customizable online timers." />
        <meta name="author" content="Me!" />
        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
        
        <title>Customizable Timers</title>

        <!-- Font Awesome icons -->
        <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>

        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />

        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="/styles.css" rel="stylesheet" />
    </head>

    <body id="page-top">...more content...</body>
</html>

My angular.json file:

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
    "src/styles.css"
],

The stylesheet is from Bootstrap with some edits, if that matters.

I tried the following:

  • adding the stylesheet to index.html, instead of, and in addition to, app-root.
  • adding type="text/css" to the css link.
  • I made sure the file name is styles.css with an ‘s’.
  • The stylesheet shows no errors in VS Code.

This is my first time deploying a site so I’m not sure where to go from here. Happy to supply more details.

Update:
Here’s more detail about the file and bucket policy.

File permissions:
CSS file detail

I tried this both with and without the utf-8.

Bucket policy, straight from CloudFront:

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::custom-timers-s3/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::<#####>:distribution/<bucket id>"
                }
            }
        }
    ]
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up finding a work around but I'm still not sure why there was a problem to begin with.

    First build the output files:

    ng build --configuration production

    Some build files come out of Angular with random strings between the file name and type:
    name.<random string>.type.

    Angular output files

    These files are referenced appropriately in the output index.html.

    index.html

    The work around is to rename the styles file to styles.css without the random string.

    Edited Angular output files

    Then in the output index.html, rename the references to styles.css.

    Edited index.html

    Then upload the files to S3.


  2. 0

    Updated: I tried to make the request to your site css file and got the error response from Cloudfront in XML format, so that where the error MIME type application/xml comes in. Check your file & bucket policy permission again
    enter image description here

    In AWS S3, click your styles.css file –> Properties tab, then scroll all the way down to the Metadata section
    enter image description here

    Ensure that the Content-Type key of the file is text/css; charset=utf-8

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search