trouble loading inline json in HTTPS and the IE message "This page contains both secure and nonsecure items"

[jcorreia]

HI,
I´ve been the last 6 hours tracking a stupid problem with IE and
Timeline in https.
Instead od loading json from a file I use inline json from a var, and
anthought it works well in firefoz in IE, it throws the annoying
message "This page contains both secure and nonsecure items".

I´ve tracked all links, iframes, css, images and found out that the
problem is with inline load of json. Loading from a file it works
well.

To load json from a file you do this :
tl.loadJSON("cubism2.js", function(json, url) {
eventSource.loadJSON(json, url);
});
But as I need to load the data from a database I load json like this,
to give an example :

var JsonTimeline = {"dateTimeFormat": "iso8601",
"events" : [
{"start" :"2008-08-22T00:00:00+01:00","instant" :
"true","title" : "Test Again","description" : "Test bigger"},
{"start" :"2008-08-18","end" : "2008-08-22","instant" :
"false","title" : "Test Event","description" : "First Line"}
]};

eventSource.loadJSON(JsonTimeline,'' );

If we put the contents of var JsonTimeline inside a file and load as
the cubism2 example, everyrhing works well.

The problem is because of loadJson function, and not passing the
second argument 'url'. is should be explicitly 'https', but I don´t
know how to do this.


I´ve tracked the loadJson function to file api/scripts/timeline.js and
the function is

Timeline.loadJSON = function(url, f) {
var fError = function(statusText, status, xmlhttp) {
alert("Failed to load json data from " + url + "\n" +
statusText);
};
var fDone = function(xmlhttp) {
f(eval('(' + xmlhttp.responseText + ')'), url);
};
SimileAjax.XmlHttp.get(url, fError, fDone);
};

But this is way beyond my javascript knowlegde, so I´am asking for
help.
How can I force the url to be https, or is there another way to load
the json ?

Thanks,
Jcorreia

[LarryK]

I think the problem may lie in the method
Timeline.DefaultEventSource.prototype._getBaseURL

-- since you are not specifying a url in the loadJSON call, Timeline
is using
document.location.href
to determine the base url for links and images in your event data.

Maybe it is leaving out the transport (http/https) on IE or
something.

Suggestions:
1) Use a debugging proxy such as fiddler to see exactly what url is
being called that uses http instead of https
2) Use breakpoints to see where the url (that has http in it) is being
generated.

IE 7 debugger tips: http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/
Free Debugger: http://www.microsoft.com/express/download/default.aspx

Good luck,

Larry

[jcorreia]

Hi,
Thanks for your answer.
I already debugged with fiddler and firebug, and didn´t find anything
being called with http. I found out the loadJson problem by comparing
it with the cubism example. As cubism had no problem I wondered why
and start cutting some things until I reached the loadJson method.

There are some variables in timeline code that are used whenever there
is need to build an url. They are SimileAjax.urlPrefix and
Timeline.urlPrefix, and I don´t know if they are being used in the
method that you referenced. As I mentioned above, there are a lot of
javascript magic happening in Timeline that I don´t understand :P

I think the problem could be solved in 2 ways : One method to load the
json from a variable (and there are a lot of people using this) and a
fix or workaround in loadJson method. Unfortunately this is way beyond
my knowledge, but maybe somebody can check this ?

Thanks

[marki]

I found the following post about this problem:

http://weblogs.asp.net/rchartier/archive/2008/03/12/ie7-this-page-contains-both-secure-and-nonsecure-items.aspx

Sounds plausible. I'm going to try & address on my local (old) build,
but I haven't even looked at the 2.0 codeline.

[jcorreia]

Thanks,
but I have been there and checked that.
I´m using version 2.0 and the paths are well built with
'SimileAjax.urlPrefix' and the problem is indeed the loadJson method.
I need a fix or a way to load the data without going to search for an
url, since I´ve got all the json I need ;)

[Patrick]

So the issue is removeChild. If you reference this page:
http://support.microsoft.com/kb/925014

Here you will find an explanation from M$ that removeChild on a div
element that has a background-url set will cause IE to say the page
has insecure and secure content. I started digging through the code
and removeChild is used alll over the place. Now these locations might
not fit all of the criteria described in that article, but there are
some that do somewhere in the code. This is going to require a pretty
big change in the code. Also jcorreia the function that you are
calling in your code is not Timeline.loadJSON but actually

Timeline.DefaultEventSource.prototype.loadJSON = function(data, url) {
var base = this._getBaseURL(url);
var added = false;
if (data && data.events){
var wikiURL = ("wikiURL" in data) ? data.wikiURL : null;
var wikiSection = ("wikiSection" in data) ? data.wikiSection :
null;

var dateTimeFormat = ("dateTimeFormat" in data) ?
data.dateTimeFormat : null;
var parseDateTimeFunction =
this._events.getUnit().getParser(dateTimeFormat);

for (var i=0; i < data.events.length; i++){
var event = data.events[i];
var evt = new Timeline.DefaultEventSource.Event(
("id" in event) ? event.id : undefined,
parseDateTimeFunction(event.start),
parseDateTimeFunction(event.end),
parseDateTimeFunction(event.latestStart),
parseDateTimeFunction(event.earliestEnd),
event.isDuration || false,
event.title,
event.description,
this._resolveRelativeURL(event.image, base),
this._resolveRelativeURL(event.link, base),
this._resolveRelativeURL(event.icon, base),
event.color,
event.textColor,
event.classname
);
evt._obj = event;
evt.getProperty = function(name) {
return this._obj[name];
};
evt.setWikiInfo(wikiURL, wikiSection);

this._events.add(evt);
added = true;
}
}

if (added) {
this._fire("onAddMany", []);
}
};

The solution might be writting this out to a file and loading it. This
is a terrible way to do it, and it may be my temporary fix.

[LarryK]

Hi Patrick,

Good sleuthing!

I looked at the MS bug report.

==>> I think their suggested fix of using outerHTML instead of
removeChild is NOT something that we'd want to do in Timeline.

removeChild is much more standard and faster than outerHTML .

The bug report says that moving background images to the css file will
also avoid triggering the IE bug.
I think moving images to the CSS file sounds reasonable if it does the
trick.

It also says that this particular bug only happens if divs have a
background image. I suggest that the first verification would be to
remove all background images and still see if the bug occurs.

Regards,

Larry

[wpatters]

Hey, I'm pretty new with JSON, and I noticed earlier in this thread
that it was mentioned possible to run the JSON as a variable? This is
exactly what I'm trying to do, and I was wondering what you're
supposed to put into the url slot of the loadJSON function call to get
this to work?