Mixed Content Error when migrating from http to https

[HCStrike]

I recently converted my website over to https via cloudflare and I have experienced an error when trying to load my external html header and footer via w3 school's html include. The error is this

Mixed Content: The page at 'https://multicrew.co.uk/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://multicrew.co.uk/indexheader'. This request has been blocked; the content must be served over HTTPS.

And my html include code is this

<!-- Header -->
    <div w3-include-html="indexheader.html"></div>

With this within the tag

<!-- Header/Footer Import Script -->
<script src="https://www.w3schools.com/lib/w3.js"></script>

Thanks

[jj9987]

Your web server itself is still working in HTTP and is directly accessing the indexheader.html file over HTTP.

You get this error because some of the content is loaded over HTTPS, some over HTTP, which is insecure and browsers therefor block it..

 

This is what happens when you use CloudFlare to do the secure part only.

[kirashi]

38 minutes ago, HCStrike said:

I recently converted my website over to https via cloudflare and I have experienced an error when trying to load my external html header and footer via w3 school's html include. The error is this

Thanks

Clear your browser cache, or try a different computer. Site loads just fine for me, fully SSL secure, with no mixed content warnings.

[HCStrike]

10 hours ago, kirashi said:

Clear your browser cache, or try a different computer. Site loads just fine for me, fully SSL secure, with no mixed content warnings.

There is no header or footer...

[HCStrike]

11 hours ago, jj9987 said:

Your web server itself is still working in HTTP and is directly accessing the indexheader.html file over HTTP.

You get this error because some of the content is loaded over HTTPS, some over HTTP, which is insecure and browsers therefor block it..

 

This is what happens when you use CloudFlare to do the secure part only.

That is literally just telling me everything I already know...

[kirashi]

1 hour ago, HCStrike said:

There is no header or footer...

I see what you mean now, apologies for not reading the entire post. Have you tried to see if you can do it via jQuery instead? Just for shits and giggles.

https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file

https://www.beyondjava.net/blog/html-includes/

[jj9987]

5 hours ago, HCStrike said:

That is literally just telling me everything I already know...

You have two options:

1) Make your web server serve SSL (with or without CloudFlare, up to you). LetsEncrypt provides free certificates for that, if you do not wish to go self-signed route.

2) Reference to the files over full https url.

[HCStrike]

4 hours ago, jj9987 said:

You have two options:

1) Make your web server serve SSL (with or without CloudFlare, up to you). LetsEncrypt provides free certificates for that, if you do not wish to go self-signed route.

2) Reference to the files over full https url.

For the first option how can I do it with cloudflare, and for the second how would I be able to do that with the w3 include html script?

[jj9987]

On 29/08/2017 at 6:38 PM, HCStrike said:

For the first option how can I do it with cloudflare, and for the second how would I be able to do that with the w3 include html script?

You need to configure the web server on the host. That depends on what web server and what operating system you are running on the hosting machine (meaning, would be great to have these details).

 

If you do the first step, then second won't be necessary. Second step would be using https://[domain]/indexheader.html instead of just indexheader.html

[HCStrike]

Thanks, fixed it by putting my SSL certificate on my server and using the Full service from digitalocean