I’ve been beta testing the new Lets Encrypt Certificate Authority so have been adding HTTPS to various services however I hit on a problem where Chrome wasn’t showing the green padlock for a specific application. Instead it was showing the broken padlock because it was saying there was mixed content.
In https, mixed content is usually where you have a resource (css, image etc) thats being served in http instead.
So first I went in to developer tools to find that resource. Now it can be difficult to find, however one first tip is to go to the network tab and right click on any of the columns (e.g. Name) and ensure that scheme is ticked. This now adds a new column which should show https for everything. The one that shows http is the culprit.
Except in this case it didn’t. Everything was https. So what’s happening?
Well in Chrome it caches the https state with each resource, and in this instance I had https originally working with a test certificate. Now I have a real one, so chrome was being confused.
The solution was to restart chrome by opening a new tab and entering the url: chrome://restart
Once chrome restarts (it will restart every tab/window you have open) the problem was fixed.
Peter Mount's Blog 