CODEWITHSUNDEEP
sslmixed-content
NaturalBornCamper
NaturalBornCamper

Reputation: 3866

Getting mixed-content errors even though I’m only using https URLs

I'm having the SSL warning messages all over my website after switching to SSL for several assets:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure script 'http://example.com/script.js'. This request has been blocked; the content must be served over HTTPS.

None of these things showed a single http:// request. I'm out of ideas to try and find what is causing this. Any ideas or suggestions?

Upvotes: 2

Views: 4131

Answers (2)

Ivica Pesovski
Ivica Pesovski

Reputation: 847

My 2 cents regarding this issue.

I have a project hosted on one domain that works flawlessly.

I need to make it international so I am cloning the master branch to a new branch, making some necessary text changes and deploying new site (new domain) with code from the new branch.

Everything works fine, except 1 ajax call (api route) that gets blocked due to Mixed content.

First things first, I checked these 3 things:

  1. I check in the Network tab in dev tools and it is actually loaded through https.
  2. I open the file directly in browser and it is https.
  3. I try to open it as http:// and it automatically redirects to https://

This is very strange because the 2 domains are both using Cloudflare and their backend setup is identical, the code is the same (only text changes for the new one) yet for the new setup there is console error for 1 specific api route, an all others (some 20+ ajax requests across the page) work just fine. They are even using the same function to make the Ajax request, so it is definitely not a configuration error.

After doing some investigation I found out the issue:

The call that was 'buggy' was ending in /. For example, all other calls were made to:

https://example.com/api/posts
https://example.com/api/users

And this particular one was making requests to

https://example.com/api/todos/

The slash at the end was making it fail with mixed content issue. I am not sure why this is causing issue and how it isn't an issue on the original site (since there the same ajax call works just fine), but it definitely fixed my issue.

If I figure out what caused the / to fail so miserably, I will post an update.

Upvotes: 1

sideshowbarker
sideshowbarker

Reputation: 87994

When seeing a mixed-content message about a http://example.com/script.js (non-https) URL that doesn’t actually appear anywhere in your sources, the basic strategy to follow is:

  1. Replace the http in the URL with https and put that into the address bar in your browser: https://example.com/script.js
  2. If your browser redirects from that https://example.com/script.js URL back to (non-https) http://example.com/script.js, then you’ve found the cause: example.com/script.js isn’t actually available from an https URL, and ends up getting served from a http URL even though your source is requesting the https URL.

Upvotes: 4

Related Questions