Even though an SSL certificate is installed, a website may appear as insecure if it contains mixed content. This occurs when content such as images or scripts is loaded via HTTP instead of HTTPS. To fix the issue, all HTTP links in the source code should be changed to HTTPS. Tools like the browser web console or online services can help identify mixed content. For platforms like WordPress and Typo3, there are specific solutions to facilitate the transition. More information is available on dedicated websites.
Even though the SSL certificate is installed, the website appears as insecure?
When content such as images, iFrames, CSS, and JavaScript files are embedded via http (unencrypted) instead of https (encrypted), this is called mixed content. It means that mixed content (http/https) exists as code blocks on the website.
Examples of such error messages
Identifying mixed content data
Examples for fixing mixed content
Additional information
Examples of such error messages
Despite an active SSL certificate, the certificate is not displayed correctly on our test domain:
| Browser | Mixed Content Example | Correct Display |
|---|---|---|
| Google Chrome | ||
| Safari | ||
| Firefox |
Since the index.html file is loaded when the domain is accessed, we check this:
In the source code, it is visible that the image futsite.gif is embedded using http:// and not https://:
<a href="https://www.metanet.ch" target="_blank"><img src="http://support.metanet.ch/futsite.gif" width=437 height=124 border=0></a><p>
In this case, the image should be downloaded and uploaded to your own system. This ensures that the embedded file can also be accessed via https. Alternatively, the source code can be searched for http:// and replaced with https://.
Once this is done, the browser will recognize the certificate without mixed content, and the website will load correctly.
Identifying Mixed Content Data
To identify the embedded files, you have two options, which we will briefly explain here.
a) Identifying mixed content data via the browser web console
If the Firefox web console is opened, a mixed content warning appears on the console. The mixed content resource loaded via HTML is shown in red, along with the text "mixed content", which is a link to this page.
b) Identifying mixed content via online tools
Various online tools are available to extract the affected data. After entering the affected domain, a list is generated:
Examples for Fixing Mixed Content
Initial situation:
The website was created without a certificate. During this time, posts, pages, and images were added. All of these were saved in the database with the URL http://.
WordPress
Solution using a WordPress plugin
WordPress offers several SSL switch plugins directly in the admin area. Installing such a plugin can be useful:
https://de.wordpress.org/plugins/ssl-insecure-content-fixer/
Cleaning up entries in the database
It is also possible to export the entire database via PLESK. Then you can search and replace http with https. The import is also done directly in PLESK via PhpMyAdmin:
Plesk: MySQL Database Import/Export
Typo3
Solution via backend
In the backend, you should be able to set the following conditions ("Conditions") in your template mode using TypoScript:
[globalString = ENV:HTTPS=on]
config.baseURL = https://example.org
If you are familiar with the INSTALL TOOL, this adjustment can also be made there.
Additional Information
Further information on this topic can be found on the following pages:
https://developer.mozilla.org/en-US/docs/Security/MixedContent/site_with_mixed_content
https://www.globalsign.com/en/blog/fixing-mixed-content-warnings/