Monday, October 1, 2012

Getting rid of "Only secure content is displayed" messages

PROBLEM: You have a secure page(s) on your site (e.g. online payment page) and you are getting "Only secure content is displayed" type warnings in your browser, but you're already using relative URLs for all your assets on your page.

SOLUTION: Have a look at any external assets e.g. Twitter javascript libraries etc. and see how you are linking to them.  You probably have hard coded the protocol - I'd suggest you use protocol-relative hyperlinks (this doesn’t apply to simply linking to another page e.g http://www.twitter.com, only for actual content that is being used on the page e.g. http://twitter.com/javascripts/blogger.js). So instead of having:


            <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
            <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/UserXXX.json?callback=twitterCallback2&count=2"></script>

Use this instead:

            <script type="text/javascript" src="//twitter.com/javascripts/blogger.js"></script>
            <script type="text/javascript" src="//twitter.com/statuses/user_timeline/ UserXXX .json?callback=twitterCallback2&count=2"></script>

And this will help you avoid those ugly ‘mixed content’ security warnings which you normally brush under the carpet when browsing the web (obviously make sure that the external sites offer a HTTPS version of their resource).

Some more info is here:

http://weblogs.asp.net/jgalloway/archive/2009/10/15/did-you-know-about-protocol-relative-hyperlinks.aspx

An alternative approach is to use javascript like Google does

   ...
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   ....