How to Fix Mixed Content/Insecure Content Issue in Apache/PHP

Mixed content is when your web page is loaded over HTTPS but other resources on it such as CSS, JS, image files are requested over insecure HTTP connection. As a result, browser blocks these HTTP requests and issues a mixed content/insecure content warning. In this case, the browser will not send insecure request to your website, even if you redirect them to HTTPS in your server. In this article, we will look at how to fix mixed content/insecure content issue in Apache/PHP.

How to Fix Mixed Content/Insecure Content Issue in Apache/PHP

Here are the steps to fix mixed content/insecure content issue in Apache/PHP.

1. Update header.php

If you run your website on WordPress, then just add the above line to header.php file.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Instead, if you use HTML templates for your websites, just add the above line in <head>…</head> block. The above header will automatically force browser to request for HTTPS version of blocked URLs. So if your web page is loaded over HTTPS and the user’s browser encounters an HTTP request to your CSS, JS, Image files, it will automatically request their HTTPS versions instead of blocking them.

2. Use relative paths

The second way to fix this problem is to use relative paths instead of absolute paths in your web page. For example, use

<link rel="stylesheet" href="/static/css/app/base.css">

instead of

<link rel="stylesheet" href="http://example.com/static/css/app/base.css">

So when your page is loaded over HTTPS, all resources will automatically be loaded over HTTPS.

3. Find and Replace

Go to your website’s root folder (e.g. /var/www/html) and run the following command to find all references to the HTTP version of your domain www.example.com.

$ cd /var/www/html
$ sudo grep -r "http://www.example.com

You will get a list of all files which contain HTTP reference to your domain. Replace http with https in all those files.

4. Use WordPress Plugins

You may also use WordPress plugins like SSL Insecure Content Fixer which will automatically search and replace all your insecure content requests to secure ones. Since these are automated scripts that run without any manual intervention, please use these plugins on a staging version of your website, instead of directly using it on production version. This will avoid any mishaps.

As you can see, it is easy to fix mixed content/insecure content issue in Apache/PHP.

No matter which platform you use, the basic idea is to replace all HTTP requests with HTTPS ones, or relative URLS. You can do this manually, or programmatically, depending on your resources.

How to Fix Mixed Content/Insecure Content Issue in Apache/PHP