TIMELINE. Security alert with IE 7 and SSL

[GoogleCodeExporter]

When using the IE 7 on a SSL protected website I will get an security alert
(message box) that tells me, that the page contains secure and insecure parts.

This happens normally when a unprotected resource (http://) is referenced
by a secure (https://) resource.

The strange thing is that I have tracked the traffic and no http-call has
been made.

The following line causes the problem:

tl = Timeline.create (document.getElementById("tl"), bandInfos);

Well, perhaps it has somthing to do with the generated script-tags...

When using MultipleIEs on my computer it seems that the error does not
appear in IE 6.

IE 7, Windows 

[Submitted by Jörn Heid on simile.mit.edu] 

I have observed this issue as well in IE7.

It seems to be part of the Timeline.Graphics.createMessageBubble(doc) code
called on line 308 of timeline.js
[ Show » ]
Thomas Belote - 12/Apr/07 02:18 PM I have observed this issue as well in
IE7. It seems to be part of the Timeline.Graphics.createMessageBubble(doc)
code called on line 308 of timeline.js

[ Permlink | « Hide ]
Robert Chartier - 04/Feb/08 04:03 PM

One big issue I have found with the way that IE7 renders differently than
IE6, which might be related (and is just so damn obscure) is that if you
have an IFrame tag down on a SSL page WITHOUT specifying the SRC attribute
it will throw up the security dialog.

I did a quick scan of the JS code to look for this specific issue with no
luck. There are (IIRC) two IFrames in use, which are created via
Javascript, and both do specify a SRC attribute programatically.

I guess just take this as a heads up: it might be obscure and quite
challenging to correct this issue.

With that said, any update as to a timeline of this fix? :)

Thanks!
[ Show » ]
Robert Chartier - 04/Feb/08 04:03 PM One big issue I have found with the
way that IE7 renders differently than IE6, which might be related (and is
just so damn obscure) is that if you have an IFrame tag down on a SSL page
WITHOUT specifying the SRC attribute it will throw up the security dialog.
I did a quick scan of the JS code to look for this specific issue with no
luck. There are (IIRC) two IFrames in use, which are created via
Javascript, and both do specify a SRC attribute programatically. I guess
just take this as a heads up: it might be obscure and quite challenging to
correct this issue. With that said, any update as to a timeline of this
fix? :) Thanks!

[ Permlink | « Hide ]
Robert Chartier - 12/Mar/08 09:28 PM
I have a fix! The issue resides in the relative urls for the style
background in the simile-ajax-bundle.js

right around line 1840 we see:

SimileAjax.Graphics.createMessageBubble=function(H){var
G=H.createElement("div");
if(SimileAjax.Graphics.pngIsTranslucent){var I=H.createElement("div");
I.style.height="33px";
I.style.background="url("+SimileAjax.urlPrefix+"images/message-top-left.png) top
left no-repeat";
I.style.paddingLeft="44px";
G.appendChild(I);
var C=H.createElement("div");
C.style.height="33px";
C.style.background="url("+SimileAjax.urlPrefix+"images/message-top-right.png)
top right no-repeat";
I.appendChild(C);
var F=H.createElement("div");
F.style.background="url("+SimileAjax.urlPrefix+"images/message-left.png)
top left repeat-y";
F.style.paddingLeft="44px";
G.appendChild(F);
var A=H.createElement("div");
A.style.background="url("+SimileAjax.urlPrefix+"images/message-right.png)
top right repeat-y";
A.style.paddingRight="44px";
F.appendChild(A);
var D=H.createElement("div");
A.appendChild(D);
var B=H.createElement("div");
B.style.height="55px";
B.style.background="url("+SimileAjax.urlPrefix+"images/message-bottom-left.png)
bottom left no-repeat";
B.style.paddingLeft="44px";
G.appendChild(B);
var E=H.createElement("div");
E.style.height="55px";
E.style.background="url("+SimileAjax.urlPrefix+"images/message-bottom-right.png)
bottom right no-repeat";
B.appendChild(E);

this needs to be updated as follows:

var prefix = SimileAjax.urlPrefix;
if(SimileAjax.Platform.os.isWin==true &&
SimileAjax.Platform.browser.majorVersion==7)
prefix = document.location.protocol + "//" + document.location.hostname +
SimileAjax.urlPrefix;

SimileAjax.Graphics.createMessageBubble=function(H){var
G=H.createElement("div");
if(SimileAjax.Graphics.pngIsTranslucent){var I=H.createElement("div");
I.style.height="33px";
I.style.background="url("+prefix+"images/message-top-left.png) top left
no-repeat";
I.style.paddingLeft="44px";
G.appendChild(I);
var C=H.createElement("div");
C.style.height="33px";
C.style.background="url("+prefix+"images/message-top-right.png) top right
no-repeat";
I.appendChild(C);
var F=H.createElement("div");
F.style.background="url("+prefix+"images/message-left.png) top left repeat-y";
F.style.paddingLeft="44px";
G.appendChild(F);
var A=H.createElement("div");
A.style.background="url("+prefix+"images/message-right.png) top right
repeat-y";
A.style.paddingRight="44px";
F.appendChild(A);
var D=H.createElement("div");
A.appendChild(D);
var B=H.createElement("div");
B.style.height="55px";
B.style.background="url("+prefix+"images/message-bottom-left.png) bottom
left no-repeat";
B.style.paddingLeft="44px";
G.appendChild(B);
var E=H.createElement("div");
E.style.height="55px";
E.style.background="url("+prefix+"images/message-bottom-right.png) bottom
right no-repeat";
B.appendChild(E);

[ Show » ]
Robert Chartier - 12/Mar/08 09:28 PM I have a fix! The issue resides in the
relative urls for the style background in the simile-ajax-bundle.js right
around line 1840 we see:
SimileAjax.Graphics.createMessageBubble=function(H){var
G=H.createElement("div"); if(SimileAjax.Graphics.pngIsTranslucent){var
I=H.createElement("div"); I.style.height="33px";
I.style.background="url("+SimileAjax.urlPrefix+"images/message-top-left.png) top
left no-repeat"; I.style.paddingLeft="44px"; G.appendChild(I); var
C=H.createElement("div"); C.style.height="33px";
C.style.background="url("+SimileAjax.urlPrefix+"images/message-top-right.png)
top right no-repeat"; I.appendChild(C); var F=H.createElement("div");
F.style.background="url("+SimileAjax.urlPrefix+"images/message-left.png)
top left repeat-y"; F.style.paddingLeft="44px"; G.appendChild(F); var
A=H.createElement("div");
A.style.background="url("+SimileAjax.urlPrefix+"images/message-right.png)
top right repeat-y"; A.style.paddingRight="44px"; F.appendChild(A); var
D=H.createElement("div"); A.appendChild(D); var B=H.createElement("div");
B.style.height="55px";
B.style.background="url("+SimileAjax.urlPrefix+"images/message-bottom-left.png)
bottom left no-repeat"; B.style.paddingLeft="44px"; G.appendChild(B); var
E=H.createElement("div"); E.style.height="55px";
E.style.background="url("+SimileAjax.urlPrefix+"images/message-bottom-right.png)
bottom right no-repeat"; B.appendChild(E); this needs to be updated as
follows: var prefix = SimileAjax.urlPrefix;
if(SimileAjax.Platform.os.isWin==true &&
SimileAjax.Platform.browser.majorVersion==7) prefix =
document.location.protocol + "//" + document.location.hostname +
SimileAjax.urlPrefix;
SimileAjax.Graphics.createMessageBubble=function(H){var
G=H.createElement("div"); if(SimileAjax.Graphics.pngIsTranslucent){var
I=H.createElement("div"); I.style.height="33px";
I.style.background="url("+prefix+"images/message-top-left.png) top left
no-repeat"; I.style.paddingLeft="44px"; G.appendChild(I); var
C=H.createElement("div"); C.style.height="33px";
C.style.background="url("+prefix+"images/message-top-right.png) top right
no-repeat"; I.appendChild(C); var F=H.createElement("div");
F.style.background="url("+prefix+"images/message-left.png) top left
repeat-y"; F.style.paddingLeft="44px"; G.appendChild(F); var
A=H.createElement("div");
A.style.background="url("+prefix+"images/message-right.png) top right
repeat-y"; A.style.paddingRight="44px"; F.appendChild(A); var
D=H.createElement("div"); A.appendChild(D); var B=H.createElement("div");
B.style.height="55px";
B.style.background="url("+prefix+"images/message-bottom-left.png) bottom
left no-repeat"; B.style.paddingLeft="44px"; G.appendChild(B); var
E=H.createElement("div"); E.style.height="55px";
E.style.background="url("+prefix+"images/message-bottom-right.png) bottom
right no-repeat"; B.appendChild(E);

[ Permlink | « Hide ]
Gerard - 30/Oct/08 05:47 AM
Robert, I have the same problem with using your wrapper.

It tried your fix but i don't have
'SimileAjax.Graphics.createMessageBubble=' at around 1840 as you discribed.
I use a version donwloaded from your site. Is there an update?

Original issue reported on code.google.com by GabrielR...@googlemail.com on 6 Apr 2009 at 1:38

[GoogleCodeExporter]

Value of Timeline.urlPrefix is different between IE and firefox.

For IE:
Timeline.urlPrefix = js/timeline-api.js

For FF:
Timeline.urlPrefix = https://localhost/js/timeline-api.js

When "https" is missing, IE consider it's "http" protocol...I guess

Original comment by th.legen...@gmail.com on 15 Apr 2009 at 4:06