08Website know-how & errors

Mixed content and SSL – fix the “Not secure” warning

Why the browser shows “Not secure” despite a certificate, how to find mixed content and fix it in WordPress with search and replace – on Nexthosting web hosting.

In short

Mixed content occurs when a page is loaded over https, but individual images, scripts or styles are still embedded over http://. The browser blocks or flags them, and the padlock disappears. The fix: switch all addresses in the database, theme and files to https://. In WordPress you can do this with search and replace.

What is the problem?

With a certificate (SSL certificates and HTTPS), the connection to the page is encrypted. But if the page loads a file unencrypted, someone on the network could alter that file and inject malicious code. That is why the browser steps in.

Type	Example	Browser behaviour
Active mixed content	Scripts, styles, iframes over `http://`	Blocked, the page looks broken
Passive mixed content	Images, videos over `http://`	Often loaded, but the padlock shows a warning

Typical signs: broken layout, missing images, the message “This page is not completely secure”, a padlock with an exclamation mark or crossed out.

Find mixed content

How to find the insecure addresses

Open the pagehttps://meinprojekt.de
Press F12, Console tab"Mixed Content" messages
Note the addressesWhich files are http?
Determine the sourceDatabase, theme, plugin, file
Fix it and clear the cache

Open the page and press F12. In the Console you will see, for example: Mixed Content: The page at 'https://…' was loaded over HTTPS, but requested an insecure image 'http://…'.
In the Network tab you see all addresses. Filter by http:.
Check several pages, not just the home page.

On the command line you can find leftovers in the source code:

curl -s https://meinprojekt.de/ | grep -o 'http://[^"'\'' )]*' | sort -u

Causes and solutions

Cause	Where it hides	Solution
Images with `http://` in posts	WordPress database	Search and replace
Hard-coded addresses in the theme	`header.php`, `style.css`, Customizer	Change to `https://` or a relative address
Plugin loads a script over http	Plugin settings or code	Update the plugin, change the setting
Old embeds (YouTube, maps, fonts)	Post or widget	Change the embedded address to `https://`
WordPress address still `http://`	Settings, General	Set to `https://`
Cache delivers an old http version	Cache plugin, server, Cloudflare	Clear caches (Understanding caching)
CSS refers to `url(http://…)`	Stylesheet	Change the address

WordPress: switch everything to https

Create a backup. Database and files (Backups and restoring). Better still: test on a staging copy first (Staging and cloning).
Under Einstellungen (Settings), Allgemein (General), check whether WordPress-Adresse (WordPress Address) and Website-Adresse (Site Address) begin with https://. If you cannot change them there, they are hard-coded in wp-config.php.
Replace old addresses in the database (see below).
Clear all caches.
Check the page again with F12.

Search and replace with WP-CLI

With SSH (with WordPress hosting from the Basic plan, with web hosting in every plan):

# First just test, change nothing
wp search-replace 'http://meinprojekt.de' 'https://meinprojekt.de' --all-tables --dry-run

# Then really replace
wp search-replace 'http://meinprojekt.de' 'https://meinprojekt.de' --all-tables

wp search-replace handles serialized data (stored this way by many plugins) correctly. That is the decisive advantage over a simple replace in the database.

Without SSH: plugin

Plugins for “Search and Replace” are available in the WordPress directory (wordpress.org). Make sure it supports serialized data, run a dry run first, make a backup and uninstall the plugin after the work.

With phpMyAdmin (advanced users only)

Export the database, replace in the export with a tool that understands serialized data, and import it back. Be sure to back up beforehand (Databases and phpMyAdmin).

Redirect and HSTS

So that nobody uses the http version any more, you redirect everything to https (.htaccess basics):

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

The redirect alone does not fix mixed content, because the page itself still loads http addresses. The two belong together.

Optional: with HSTS (Strict-Transport-Security), the browser remembers that your domain is only reachable over https. Switch it on only once everything works.

The browser still warns

The padlock is missing or a warning appears

Message "certificate invalid" or "expired"Check or renew the certificate

Warning "the domain does not match the certificate"Point the domain to the server, certificate for all names

Only a note "not completely secure"Mixed content: check the console (this page)

Page loads in an endless loopRedirect loop

Frequently asked questions

I replaced everything, but the message remains.

Clear the browser cache, the WordPress cache and the cache of any service in front of your site. Then check in the console which address is still http.

Does mixed content hurt search engine rankings?

Indirectly: visitors get warnings and leave the site, and blocked scripts can destroy the layout.

Should I use relative addresses?

For your own files, relative addresses (/bilder/logo.png) or https:// are safest. Avoid http://.