Coding Dojo with IE and SSL

Question

My application is using Dojo 1.1.1 on an SSL-only website. It is currently taking advantage of dijit.ProgressBar and a dijit.form.DateTextBox.

Everything works fabulous in Firefox 2 & 3, but as soon as I try the same scripts in IE7 the results are an annoying Security Information dialog:

This page contains both secure and non-secure items. Do you want to display the non-secure items?

I have scrutinized the page for any non-HTTPS reference to no avail. It appears to be something specific to dojo.js. There use to be an iframe glitch where the src was set to nothing, but this appears to be fixed now (on review of the source).

Anyone else having this problem? What are the best-practices for getting Dojo to play well with IE on an SSL-only web server?

Answer 1

After reviewing the JavaScript sourcecode for Dijit, I thought it was likely the error results from an "insecure" refrence to a dynamically generated IFRAME. Note there are two versions of the script file, the uncompressed represents the original source (dijit.js.uncompressed.js) and the standard (dijit.js) has been compressed for optimal transfer time.

Since the uncompressed version is the most readable, I will describe my solution based on that. At line #1023, an IFRAME is rendered in JavaScript:

if(dojo.isIE){
    var html="<iframe src='javascript:\"\"'"
           + " style='position: absolute; left: 0px; top: 0px;"
           + "z-index: -1; filter:Alpha(Opacity=\"0\");'>";
    iframe = dojo.doc.createElement(html);
}else{...

What's the problem? IE doesn't know if the src for the IFRAME is "secure" - so I replaced it with the following:

if(dojo.isIE){
    var html="<iframe src='javascript:void(0);'"
           + " style='position: absolute; left: 0px; top: 0px;"
           + "z-index: -1; filter:Alpha(Opacity=\"0\");'>";
    iframe = dojo.doc.createElement(html);
}else{...

This is the most common problem with JavaScript toolkits and SSL in IE. Since IFRAME's are used as shims due to poor overlay support for DIV's, this problem is extremely prevalent.

My first 5-10 page reloads are fine, but then the security error starts popping up again. How is this possible? The same page is "secure" for 5 reloads and then it is selected by IE as "insecure" when loaded the 6th time.

As it turns out, there is also a background image being set in the onload event for dijit.wai (line #1325). This reads something like this;

div.style.cssText = 'border: 1px solid;'
                  + 'border-color:red green;'
                  + 'position: absolute;'
                  + 'height: 5px;'
                  + 'top: -999px;'
                  + 'background-image: url("' + dojo.moduleUrl("dojo", "resources/blank.gif") + '");';

This won't work because the background-image tag doesn't include HTTPs. Despite the fact that the location is relative, IE7 doesn't know if it's secure so the warning is posed.

In this particular instance, this CSS is used to test for Accessibility (A11y) in Dojo. Since this is not something my application will support and since there are other general buggy issues with this method, I opted to remove everything in the onload() for dijit.wai.

All is good! No sporadic security problems with the page loads.

Answer 2

If your page is loading files from a non-https URL Firefox should tell you the same thing. Instead of an error the lock symbol at the bottom (in the status bar) should be crossed out. Are you sure that is not the case?

If you see the symbol, click on it and check which files are "unsecure".