What is it?:
If you've got a website or even if you've looked at a few, chances are you've run into this. You load the site over https and it's greyed out or even in some cases you get a warning rather than your much anticipated green bar. This happens when you've got mixed content on the site and it's a pretty common occurrence.
Mixed content happens when we serve some resources over https and some are served over http. Leaving the connection only partially encrypted which leaves the plaintext or unencrypted content vulnerable.
Examples:
Examples of this can be found when we load items from scripts to images over http in the code of the site. Most modern browsers will let you know this is occurring by loading the site over https blocking the insecure resources and adding a warning in the address bar in place of the expected green lock.
Firefox for example shows mixed content as:
And Chrome shows it as:
In both cases we can click the exclamation point and see what the warning is specifically
The Investigation:
In order to resolve these issues so you can get your green bar back, we need to understand why it's occurring.
We already know that this happens when you're serving some content over http and the rest over https but how do we identify which resources are causing the problem? While there are some tools you can use that will scan your site, the most simple answer is your browser. Most browsers have developer tools that will allow you to inspect your site.
In chrome we can go to the top right-hand side of the screen>> Click the 3 dots >> Click More Tools>>Developer Tools -> Console
In Firefox go to the upper right-hand side of the screen >>Click the 3 lines for the Menu>>Web Developer>>Web Console.
If you haven't loaded the page before chrome might request you reload the page in order to view the mixed content but once that's done you'll get a list of resources that are being served over http rather than https like this:
In this example the mixed content is not blocked from being loaded but you are being warned that it's serving these resources insecurely.
Fixing it:
Fixing mixed content issues is typically as easy as changing the http:// to https:// in your source code. Take the following steps to determine your course of action:
If you've got a WordPress site there are even some plugins you can get which will automatically fix the issue. Here are a couple I found:
SSL Insecure Content Fixer
Really Simple SSL
If you have any questions about these troubleshooting steps, or about cPanel & WHM in general, register an account on the cPanel Forums and join the discussion! We have a team dedicated exclusively to the cPanel Forums to help answer any questions you have.
Contributed by: cPanelLauren
If you've got a website or even if you've looked at a few, chances are you've run into this. You load the site over https and it's greyed out or even in some cases you get a warning rather than your much anticipated green bar. This happens when you've got mixed content on the site and it's a pretty common occurrence.
Mixed content happens when we serve some resources over https and some are served over http. Leaving the connection only partially encrypted which leaves the plaintext or unencrypted content vulnerable.
Examples:
Examples of this can be found when we load items from scripts to images over http in the code of the site. Most modern browsers will let you know this is occurring by loading the site over https blocking the insecure resources and adding a warning in the address bar in place of the expected green lock.
Firefox for example shows mixed content as:
And Chrome shows it as:
In both cases we can click the exclamation point and see what the warning is specifically
The Investigation:
In order to resolve these issues so you can get your green bar back, we need to understand why it's occurring.
We already know that this happens when you're serving some content over http and the rest over https but how do we identify which resources are causing the problem? While there are some tools you can use that will scan your site, the most simple answer is your browser. Most browsers have developer tools that will allow you to inspect your site.
In chrome we can go to the top right-hand side of the screen>> Click the 3 dots >> Click More Tools>>Developer Tools -> Console
In Firefox go to the upper right-hand side of the screen >>Click the 3 lines for the Menu>>Web Developer>>Web Console.
If you haven't loaded the page before chrome might request you reload the page in order to view the mixed content but once that's done you'll get a list of resources that are being served over http rather than https like this:
In this example the mixed content is not blocked from being loaded but you are being warned that it's serving these resources insecurely.
Fixing it:
Fixing mixed content issues is typically as easy as changing the http:// to https:// in your source code. Take the following steps to determine your course of action:
- Identify whether or not the resource loads over https by copying the URL retrieved with the browser and paste it in the address bar
- If it loads without issue you'll just need to change the http:// to https:// in your code
- If you try to load the offending script/image etc. over https directly and it fails this means you're linking to something that is hosted elsewhere and doesn't contain a valid SSL. Since you have no control over the remote host in most cases to fix this you'll need to do one of the following:
- Remove the resource entirely
- Host it locally and serve the resource from your own host
- Obtain it from somewhere else that does support https (has a valid SSL)
If you've got a WordPress site there are even some plugins you can get which will automatically fix the issue. Here are a couple I found:
SSL Insecure Content Fixer
Really Simple SSL
If you have any questions about these troubleshooting steps, or about cPanel & WHM in general, register an account on the cPanel Forums and join the discussion! We have a team dedicated exclusively to the cPanel Forums to help answer any questions you have.
Contributed by: cPanelLauren
