Far girare il tuo sito WordPress su una connessione sicura HTTPS oggi non è più una scelta facoltativa: non si tratta solo di sicurezza (in quanto tutta la comunicazione è crittografata), ma anche di una scelta che crea fiducia negli utenti ed un fattore rilevante nel posizionamento dei motori di ricerca.
When we talk about HTTPS, we refer to the classic web navigation protocol (HTTP) that is encrypted through another protocol, the Transport Layer Security (TLS) or – previously – the Secure Sockets Layer (SSL). For this reason, it is also referred to as HTTP over TLS or HTTP over SSL. Today, performance issues related to encryption have been mostly solved – thanks to improvements introduced in the same HTTP starting from its version (HTTP/2)). Additionally, the service of Let’s Encrypt, created by a non-profit entity (Internet Security Research Group, ISRG), has changed the entire sector by providing a simple way to obtain free security certificates.
Thanks to these projects, web browsers like Google Chrome, Mozilla Firefox and Microsoft Edge have decided to “punish” sites that do not function on HTTPS and nowadays show more severe warnings to potential visitors. For example, if your web server uses “legacy” (no longer supported) versions of TLS (or even the now obsolete SSL), you might encounter notifications like ERR_SSL_OBSOLETE_VERSION in Chrome. This type of warning are probably the last thing you want to show to your visitors!
Therefore, the migration from HTTP to HTTPS is today a duty, but website owners may encounter various issues during this procedure, in particular the “mixed content warnings“. Let’s see how to solve them in this article!
Table of contents
SSL/TSLE connection error and “mixed content warning”
A mixed content warning is displayed in the user’s browser when the site they are trying to visit loads both HTTPS and HTTP scripts or contents simultaneously, but we are talking about completely separate protocols – which are not designed to coexist!
When you execute the migration to HTTPS, everything must “run” on that protocol, including images, JavaScript files, and so on: a complete transition must therefore be ensured.
Here are some classic examples:
- You have just added a new plug-in to your site, but the developers have used absolute paths (http://tuodominio.com/style.css) in their plugins or themes to link to CSS and JavaScript instead of using relative paths (/style.css)
- Your images have URLs hardcoded (like http://yourdomain.com/image.png) that work on HTTP. These might be found inside posts, pages, widgets…
- You are connecting to HTTP versions of external scripts (jQuery, Font Awesome, etc.).
You have incorporated iframes that have as source external videos, also in this case with video scripts that use HTTP instead of HTTPS.
How to solve SSL/TLS connection errors (“mixed content warning”) in 4 steps
You can follow the four simple steps below to fix mixed content warnings. We will take a WordPress site as an example, but the procedure is analogous for any platform. This process assumes that you already have, either on your own or with the help of your technician:
- Installed a security certificate (TLS/SSL) on your web server
- Redirected the site, always at the web server level, from HTTP to HTTPS
Passage 1: discover which resources are loaded over HTTP
The first thing you need to do is discover which resources are still loading via HTTP, with the consequent SSL/TLS connection errors we are talking about.
Ricorda che questi avvisi potrebbero verificarsi solo in alcune aree del tuo sito, non a livello globale. Passa alla pagina in cui viene visualizzato l’avviso e avvia Chrome DevTools premendo:
Windows or Linux: F12 or CTRL + Maj + I
macOS: Cmd + Opt + I
Or, opening Chrome DevTools from your browser’s tools menu.
Before you start, you can check the Console tab. Keep in mind that it might be necessary to refresh the page after opening Chrome DevTools to load everything we need correctly.
If there are SSL/TLS connection errors (mixed content), they will be highlighted in red or yellow. Generally, they are accompanied by information that explains “This request has been blocked; the content must be served on HTTPS.” This means that the browser settings are configured to automatically block any HTTP content.
In an attempt to ensure that pages are loaded only over HTTPS, Chrome began blocking mixed contents by default with Chrome 79. More recently, it has released features to initiate the “upgrade” (redirect to HTTPS) of images and mixed contents automatically. Even if Chrome remedies the site’s shortcomings in this way, it will alert us that it has done so.
Another hypothesis is to look in the Security tab of Chrome DevTools. This will show you any insecure origins and the related blocked requests (which, again, correspond to the famous SSL/TLS connection errors).
If you are not using Chrome or simply want a quick overview of the errors, you can also use a free tool like Why No Padlock, which scans a single page and shows all insecure resources.
If instead you are concerned about the rest of your site, you might want to check it “all at once”. Here are some recommended options for doing so:
- There is a free tool called SSL Check from the company JitBit, which you can use to scan your HTTPS site and look for insecure images and scripts that will trigger a warning message in browsers. The number of scanned pages is limited to 400 per website.
- If you are using a WordPress site, you might consider SSL Insecure Content Fixer – a WordPress plugin that you can install on your site to discover errors that lead to mixed content warnings. It is free and will also automatically perform fixes to resolve the errors.
The use of any of the above tools can help you save time in having to manually check every page of the site for connection errors. For a thorough evaluation of potential errors, you might consider using a combination of all these solutions.
Step 2: verify if HTTP resources are accessible via HTTPS
The next step is to confirm that the resources loaded via HTTP are accessible via HTTPS. Very likely they are, and you just need to update the links.
Basta prendere un indirizzo con “http”, sostituirlo con “https” e verificare che anche quest’ultimo venga caricato. Pertanto, dobbiamo semplicemente fare una ricerca e sostituire i riferimenti sul nostro sito.
Step 3: run a “find and replace”
For what is our objective (the solution of SSL/TLS errors), we need to go through a “search and replace” phase, and luckily there are many tools suitable for the purpose, especially on WordPress.
We are not fans of tools like Really Simple SSL. It’s better not to rely on a solution like this in the long term, as they do not address the root problem but only perform redirects. Given that – we hope! – you won’t revert to HTTP later, it’s better to do it properly and update your HTTP URLs directly in the database.
Rather, it is preferable a tool like Better Search Replace, which also deals with serialized and encrypted data. To use this plugin, after installing it, just do so:
- Go to your site’s Pages section and click on Better Search Replace
- Successively, in the first field, insert the value you wish to search for in the database, i.e. the site address with HTTP, for example “http://www.ilmiosito.com”
- In the second field enter the target value, i.e. “
- Select all tables of the database
- Leave the other default options as they are, but (unless you have Hamlet-like doubts!) remove the “dry run” option, i.e. the simulation of substitution, so that the changes are effective
- Launch the operation by pressing the dedicated button and wait until it finishes: at the end, you will see a summary of all the substitutions made.
In alternative, you can also do a “find and replace” with the WP-CLI, but long experience on the topic leads us to prefer Better Search Replace. Where we find ourselves dealing with huge databases that (due to PHP or web server timeout) this plugin fails to handle, we recommend Search Replace DB from Interconnectit, which is usable on any site with PHP and MYSQL.
Step 4: confirm that the mixed content warnings have disappeared!
After finishing the search and replace, it’s time to check that we have really resolved the SSL/TLS connection errors. For this, we recommend you re-check your site to confirm that mixed content warnings are gone.
The substitution procedure is relatively linear, but not without pitfalls: a mistake in massive substitutions means, at least, the need to recover a backup! Moreover, it is not guaranteed that everything will go so smoothly: for example, if our site was built with Elementor, or with the BeTheme framework, specialized tools might be required, which are not the general ones seen in this article.
Error SSL connection issue: Summary
The last aspect you need to consider is that the possible types of SSL/TLS connection error are many and in this article we have shown how to resolve only one, namely that related to the website content.
But the reasons why errors can occur again are multiple and each circumstance requires a specific solution. As you can imagine, having to learn all the solutions and, most importantly, know how to apply them promptly would require an enormous expenditure of time and energy for those not already expert in this field.
Therefore, turning to professionals in this case is certainly the best path to take, especially if your desire is to keep your websites updated, fast and protected.
You could thus gain much more time for your main activities, remedy the “bad surprises” that are always around the corner and avoid any type of complaint from your clients.
If these needs coincide with yours, then we can make it work for you! By turning to us, you could not only adapt your site to modern HTTPS standards but also receive all the additional guarantees offered by our agency, such as the CAA records and the HSTS.
For more information on the benefits of our custom services, click on this link.
