I am having a problem with mixed content on the website after enabling SSL. The strange thing about it is, only main page is affected (though the same assets are used through the whole website). The main page is made with Elementor.

What I did:

  1. Changed all to HTTPS in WP settings
  2. Changed all necessary things in wp_config.php to HTTPS
  3. Replaced all occurrences of http://example.com with https://example.com in database
  4. Checked no http:// in css files in wp-content/uploads/elementor/css
  5. Added to .htaccess rule to overwrite all non-HTTPS requests to HTTPS (this alone should be enough?)
  6. Disabled all plugins that do not affect the web functionality.
  7. Replaced the main page with another copy, now the previous main page works well and the problem is on the copy (that is set as default main page).

At first I thought after doing all this stuff, it has to be the browser-related problem (thin VS thick client). But then I checked more browsers (all latest versions to the date except IE):

Chrome: no problems. Except my friend's chrome was the same, today it showed the mixed content messages too. the insecure content main page only

Firefox: insecure content main page only

Opera: insecure content main page only

Internet Explorer: no problems.

Obviously, I did reload the webpages and cleared the cache.

Any idea would be much appreciated.

UPDATE: The chrome was not showing errors due to restored caches from google account sync - the cache was not cleared fully when I was signed in.

  • look with the Network Monitor of your browser, there is 2 images with HTTP. If you use Firefox, you can show it with Ctrl + Shift + E developer.mozilla.org/en-US/docs/Tools/Network_Monitor
    – Kaperto
    Nov 30 '19 at 14:28
  • yes, i know about those two images. Funnily enough, those two images were only ones showing in chrome before (when i was in the "what i did" stage), so I went to the elementor and re-assigned them. Now only firefox has the problem, those two are ok in chrome, opera and IE. Thats why I am asking here, because it's just so strange.
    – Jiří
    Nov 30 '19 at 15:16
  • well I doublechecked now and it doesn't show them anymore. But, when I load the copy of the main page that was shifted to another url -oscio.cz/scio-testy-pruvodce-pripravou/… - other than the main, it works flawlessly.
    – Jiří
    Nov 30 '19 at 15:29

You appear to be lazy-loading responsive images, so whether the insecure images load (or rather "blocked") is dependent on screen size. You have many data-srcset attributes that reference http:// - these also appear to reference your non-canonical "domain apex" (ie. example.com), as opposed to the canonical hostname with a www subdomain (ie. www.example.com), so these will also get an undesirable redirect to www if used.

If I resize the browser window in Google Chrome, with the "console" open, you can see the the number of blocked "insecure" images increasing.

You also have an http:// link in your banner which gets redirected, but it gets redirected twice since it is also missing the trailing slash (present on your other URLs).

Added to .htaccess rule to overwrite all non-HTTPS requests to HTTPS (this alone should be enough?)

The HTTP to HTTPS redirect only occurs after the client has already made the insecure (http) connection to your server, so this does nothing to alleviate the "mixed content" problem.

  • Thanks for the tips. But lazy-load was already disabled (point 6.) and I can't see any insecure images in Chrome (except one image caused by the Facebook window). I can see the popping images in other browsers though. But when I create (almost an exact) copy of the very same page and place it on different URL, it works on all the browsers (oscio.cz/scio-testy-pruvodce-pripravou/…).
    – Jiří
    Nov 30 '19 at 17:04
  • Ah, the chrome not showing errors was due to my cached data on the account, so even when I cleared the cache it was retrieved from google account, once I stopped the sync it showed it, at last. But still, the problem is only on the main page, the same content elsewhere works...
    – Jiří
    Nov 30 '19 at 17:35
  • 1
    It seems working now, thank you again for the guidelines. I got really annoyed and deleted the disabled plugins. Seems that lazyload and some other plugins still modified the contents even when disabled. Deletion removed all their metadata - I didn't think it could solve it because I was already trying to fix this for several weeks, at first I thought these plugins things will eventually adjust.
    – Jiří
    Nov 30 '19 at 18:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.