When a user visits a page served over HTTPS, their connection with the web server is encrypted and safeguarded from man-in-the-middle (MiTM) attacks. If the HTTPS page includes content retrieved through cleartext HTTP, then the connection is only partially encrypted; the unencrypted (HTTP) content is blocked and not loaded.
By default, mixed content is blocked in Google Chrome (v21 +), Mozilla Firefox (v23 +), Internet Explorer (v10 +) and other recent browsers. When this happens, the location where unsafe content should be displayed is likely to be blank and a security warning message will be displayed in the browser.
This happens when you have the absolute URL path with
How to Fix
img src tag loads an image using
http: //and causes mixed content warning when the page is accessed via
This can be resolved by modifying all database entries and files (templates) on your site to load your assets over HTTPS or relative URL path. Instead of using:
You would change to:
The "//" causes the browser to use the same scheme of the current URL, so it will use
https:// on HTTPS pages and
http:// on HTTP pages.
It’s not always viable to change all entries on a site’s database. Luckily, recent web browsers versions supports an HTTP header called "Content-Security-Policy". With the help of this special HTTP header we can instruct the web browser to "upgrade" HTTP requests to HTTPS without touching the website database.
If you are using Sucuri Website Firewall and your "Additional Security Headers added to your site" option is enabled, the WAF will automatically set the "Content-Security-Policy" header to fix mixed content issues.
In case you want to send the CSP header from the server side instead, on Apache/LiteSpeed Web Server, this can be easily accomplished with the following .htaccess code:
<ifModule mod_headers.c> Header always set Content-Security-Policy "upgrade-insecure-requests;" </IfModule>
On NGINX, with the following instruction on the site configuration or
add_header Content-Security-Policy "upgrade-insecure-requests;"
Be aware that old web browser versions won’t support this HTTP header and will still face mixed content issues. In this case, you will need to fix the URL of all assets as explained.
Most popular CMS’s such as WordPress, it’s possible to find a plugin or module capable of performing the fix for you. For example, on WordPress you could install Really Simple SSL or SSL Insecure Content Fixer plugins.
Please, only use a "mix content fixer" plugin if your server has a functional SSL (a self-signed SSL is enough) installed that matches your domain and your Website Firewall SSL Mode setting is set to "Full HTTPS" or it’ll end up in a redirect loop.