Quick Tip – tracing insecure items on SSL pages using Firefox
So, I have been doing quite a bit of web development recently (as you can see from the new site) and have learned some new things, dusted off some old things and managed to (at times) break things in the most spectacular way.
However something that I thought might be useful to share is a simple tip to help you trace the source of ‘Connection is Not Secure‘ on SSL secured web pages when using Firefox.
When porting telnetport25.com to my new platform, I decided to take advantage of securing the site with SSL. Of course this was quite straight forward – in a foreboding kind of way, but I ran into a few annoying issues with insecure images.
You’ve probably seen it before – you go to a site (or, like me be developing a site) and when accessing one or more of the secured pages you see a little yellow exclamation mark appear on the ‘Secure Site’ part of the Address Bar (see figure 1).
Of course, what parts of the page which are insecure can be anyone’s guess – however, helpfully (not) Firefox does suggest that it might be something to do with ‘Images’.
Luckily, this is normally true – but of course, which image(s)? Taking WordPress as an example; I have pages which have multiple images – some are deemed secure, whilst others aren’t – so how do you work out which is which?
Hunting them down
Thankfully, you can find the culprits quite easily by using the ‘Web Console’ in Firefox’s [ Tools -> Web Developer -> Web Console ] menu (see figure 2 below).
Click on this option and then refresh the offending page and the Web Console will populate with information such as the example in figure 3 below:
Entries such as:
Loading mixed (insecure) display content <URL> on secure page [Learn More]
is what you are interested in. By correcting these (or, as I did made a modification at site level to rewrite links on external resources so they were secure) you should be good to go.