Lecciones Prácticas

I have to admit I hate IE8. I do not use it except for testing that pages are displayed right. Some days ago a user wrote complaining about the visualization of Your options – Your submissions page: the CSS and images were not being loaded.

Internet Explorer 8 assumes that, in an SSL (https) connection, every element has to be loaded via HTTPS. If this does not happen, IE8 displays a security alert so that user can decide to load / not load the “insecure” elements.

The problem

I used httpwatch free basic version when loading the page and noticed the CSS url was starting with “http” and not “https”.

Altought mozilla does not complain about https pages loading http contents, IE8 does.

This is what happened when loading yoursubmissions.py page (the warning text is in spanish, sorry):

If you click “yes” none of the CSS nor the images are loaded and everything looks awful:

On the other side, if you hit “no” the page looks fine.

The fix

Samuele, from CDS Support Team, gave me a great advice: edit /var/www/yoursubmissions.py, look for the return page(..." line and add secure_page_p=1. This forces yoursubmissions function (defined in webstyle_templates.py) to load CSS via https.

Then run:

sudo -u apache /soft/cds-invenio/bin/inveniocfg --update-all; /etc/init.d/httpd restart

Cool! Now the CSS is working… but the gif’s won’t load. Shit!

Digging in webstyle_templates.py code (more precisely, I noticed that images were being loaded using CFG_SITE_URL instead of CFG_SITE_SECURE_URL in yoursubmissions function. So I added the CFG_SITE_SECURE_URL variable to the imports:

from invenio.config import \
     CFG_SITE_URL, \
     CFG_VERSION, \
     CFG_SITE_URL, \
     CFG_SITE_LANG, \
     CFG_SITE_SECURE_URL

and changed some CFG_SITE_URL to CFG_SITE_SECURE_URL in the image variable assignations. Then you must run:

sudo -u apache /soft/cds-invenio/bin/inveniocfg --update-all; /etc/init.d/httpd restart

I checked everything was working fine after this changes. It was, so I made something similar with:
yourapprobals.py
publiline.py
websession_weinterface.py
webbasket_templates.py
webalert_webinterface.py
webbasket_webinterface.py
webmessage_webinterface.py

I see the page correctly, but the IE8 warning is still showing up

Culprits? Some element(s) is (are) still referenced via HTTP and not HTTPS. You should use a sniffer (for instance, httpwatch) to check which are these elements.

One of the most common is Google analytics urchin file, which is usually loaded like:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
try {
  _uacct = "UA-6988718-1";
  urchinTracker();
} catch(err) {}</script>

And should be changed to:

<script src="https://ssl.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
try {
  _uacct = "UA-6988718-1";
  urchinTracker();
} catch(err) {}</script>

(This lines are usually in your webstyle_templates_yoursitename.py).

*** 2010-03-12 UPDATE ***
The new google analytics code version (which calls ga.js) does this http/https thing on its own. In fact, here is an example of the call to ga.js (just like the one google provides). Thanks Samuele for pointing this out.

<script type="text/javascript">
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." 
: "http://www.");
 document.write(unescape("%3Cscript src='" + gaJsHost + 
"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 </script>
 <script type="text/javascript">
 try{
 var pageTracker = _gat._getTracker("UA-xxxxxx-x");
 pageTracker._trackPageview();
 } catch(err) {}
</script>

After every change you must remember to run:

sudo -u apache /soft/cds-invenio/bin/inveniocfg --update-all; /etc/init.d/httpd restart

Hope it helps someone

Related posts:

1. CDS-Invenio: compress CSS to speed up page load
2. Invenio CSS – sticky footer [solved]
3. CDS-Invenio: CSS Sprites to speed up page load
4. CDS Invenio: advanced search sort options language issues [SOLVED]
5. CSS horizontal scroll div with fixed-height images [SOLVED]