Posts tagged with "jquery" - Jay Caines-Gooby 2010-09-07T23:19:12+01:00 Jay Caines-Gooby Avoiding HTTPS mixed content warnings 2010-09-07T23:19:12+01:00 2010-09-08T08:24:21+01:00 <p><img src="/media/Screen shot 2010-09-07 at 22.37.19.png" title="Mixed HTTPS and HTTP content warning" alt="Skull and cross bones icon"/></p> <p>Working on an <span class="caps">HTTPS</span> site today I was getting mixed content warnings from Chrome due to a few external resources still coming over <span class="caps">HTTP</span>.</p> <p>Google analytics already has the <span class="caps">HTTP</span>/<span class="caps">HTTPS</span> switcher built into it, but jQuery was being pulled in with an explicit http call to:</p> <pre name="code" class="html:nogutter:nocontrols"> &lt;script src="" type="text/javascript"&gt;&lt;/script&gt; </pre> <p>I could serve the code directly myself, but it seemed neater to use the Google <span class="caps">CDN</span>. It was a relatively quick fix thanks to <a href="">stackoverflow</a>. I used the simplified version:</p> <pre name="code" class="html:nogutter:nocontrols"> &lt;script src="//" type="text/javascript"&gt;&lt;/script&gt; </pre> <p>which uses the // <a href="">protocol-relative <span class="caps">URL</span></a> to download the external jquery file. Because it&#8217;s served over <span class="caps">HTTPS</span>, you won&#8217;t benefit from using the browser&#8217;s cached version, but it is one less file to be served by you.</p> <h3>Don&#8217;t forget your favicon</h3> <p>So now I was at the point of being certain that every resource on the page was being served over <span class="caps">HTTPS</span>, yet I was still getting the dreaded mixed content warning. Then I realised I hadn&#8217;t explicitly put a favicon link in the html. A quick check in the logs seemed to confirm this. The implicit favicon.ico request was being made by Chrome, but using <span class="caps">HTTP</span>.</p> <p>Adding the icon link seemed to do the trick.</p> <pre name="code" class="html:nogutter:nocontrols"> &lt;link href='/images/favicon.ico' rel='shortcut icon' /&gt; </pre> <h3>Proxying Google maps</h3> <p>Once final problem was that as part of the registration process, I was showing a Google Map iframe.</p> <p>I didn&#8217;t want this page served over <span class="caps">HTTP</span> just to avoid the mixed content warning, especially as the map page contains personal details.</p> <p>As I&#8217;m using nginx to serve the site, and it&#8217;s relatively easy to proxy content served from local application servers like mongrel and unicorn, I wondered if we could do something similar with the requests to <a href=""></a>.</p> <p>The nginx config is really easy:</p> <pre name="code" class="nginx:nogutter:nocontrols"> location /maps { proxy_pass; proxy_set_header X-Real-IP $remote_addr; } </pre> <p>Just make sure this comes ahead of any location rule that matches /, as it needs more priority.</p> <p>And then in my code, I just invoke the iframe without the <a href=""></a> host, when I know I&#8217;m running in production, and hence running the proxy</p> <pre name="code" class="ruby:nogutter:nocontrols"> - host = (RAILS_ENV != "production" ? "" : "") %iframe#map{ :scrolling =&gt; "no", :marginheight =&gt; "0", :marginwidth =&gt; "0", :src =&gt; "#{host}/maps?hl=en&amp;amp;gl=GB&amp;amp;q=#{@address}&amp;amp;mrt=loc&amp;amp;t=m&amp;amp;z=15&amp;amp;iwloc=near;&amp;amp;output=embed", :frameborder =&gt; "0", :height =&gt; "250", :width =&gt; "250" } </pre> <p>and that, currently is doing the job for me.</p>