Mixed content error when using github pages with custom domain

4
votes

I am hosting my git-hub pages website (peps09791.github.io) using a custom domain (https://thebotspeaks.com) with Cloudflare. To enable HTTPS, I have done the following configurations:

  1. In my _config.yaml file I have set the URL key accordingly

    url: "https://peps0791.github.io"

  2. From my cloudFlare dashboard, I have enabled option of HTTPS rewrites to prevent mixed content error.

  3. I have also enabled Flexible SSL from CloudFlare.

I haven't enabled default HTTPS-redirection because the website breaks over HTTPS. On HTTP, it works fine.

Right now, when I try to access my website using HTTPS, I get mixed content error:

Mixed Content: The page at 'https://thebotspeaks.com/' was loaded over HTTPS, but requested an insecure image 'http://thebotspeaks.com/assets/images/bio-photo.jpg'. This content should also be served over HTTPS.

09:54:45.323 (index):1 Mixed Content: The page at 'https://thebotspeaks.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://thebotspeaks.com/assets/css/main.css'. This request has been blocked; the content must be served over HTTPS.

09:54:45.785 (index):1 Mixed Content: The page at 'https://thebotspeaks.com/' was loaded over HTTPS, but requested an insecure script 'http://thebotspeaks.com/assets/js/main.min.js'. This request has been blocked; the content must be served over HTTPS.

From console, I can see this:

<script src="https://peps0791.github.io/assets/js/main.min.js"></script>

<link rel="stylesheet" href="https://peps0791.github.io/assets/css/main.css">

How do I resolve this issue ?

3
sslhttpsgithub-pagescloudflaremixed-content

3 Answers

13
votes

The problem here is that your assets (i.e. your CSS or JavaScript) are redirecting to the HTTP version of your site. This is because your assets are referencing directly to your GitHub site instead of the Cloudflare-enabled domain.

For example; your HTML references your CSS files at https://peps0791.github.io/assets/css/main.css instead of https://thebotspeaks.com/assets/css/main.css

In order to fix this it looks like you'll need to update your _config.yaml file to have the following URL key:

url: "https://thebotspeaks.com"

More general advice on fixing a variety of Mixed Content issues can be found in the following article on the Cloudflare Knowledge Base: How do I fix the SSL Mixed Content Error Message?

2
votes

Apparently for me. The website inside CNAME file in Github repo did NOT had https prefix. So I added https://. and it worked.

Cheers

P.S: Fixed this problem after 1 year, can you believe.

1
votes

Adding this helped me to deal with the Mixed Content error on GitHub pages on a custom domain secured with enabled HTTPS:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">