What exactly are the rules for avoiding the “mixed

Question

This is related to SSL and mixed content due to CSS background images but that question had no accepted answer and the one I'm asking is a little more specific.

Under some circumstances when accessing an HTTPS website, IE will throw the "mixed content" warning if an element is given a style with a background image. I found one forum reference that said the warning can be avoided if you put the reference in a stylesheet, for example

#someElement a {
    width:11px;
    height:11px;
    display:block;
    overflow:hidden;
    background:url(../images/sprites_list.png) no-repeat;
    cursor:hand;
    cursor:pointer;
    background-position:0px -72px;
}

but not if you try to create the element inline, a la

$('#someElement').append("<a title='something' style='background: url(../images/sprites_list.png) no-repeat; ... // etc

and indeed, this works for me. I've seen others that say you have to use an absolute https URL to refer to the image, rather than a relative one.

What is the real story here? Is there some "official" explanation or at least a reference to what the rules are? Or failing that, is there a standard set of guidelines which if followed makes it extremely unlikely to trigger the warning?

Answer 1

I think the reason you're getting different results is not because the one method is "safer," but because the offending URL isn't present in the base document when IE loads it. I expect you'll get the warning if you were to place that A directly in the document instead of scripting it in after the page has loaded.

If I'm right in my diagnosis, this would mean there's no as-yet-undocumented quirk to the rules about mixed content.

Also: protocol-relative URLs are awesome. Just in general.

Answer 2

After countless hours of the same problem, I couldn't figure out the problem. I then began picking through my source code and I found it. I'm using HTML5, and I'm using a shiv inside of a conditional comment to make HTML5 elements work in IE8 and down.

<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

My issue was that IE8 and down was throwing an error. That issue was solved by changing the above into a https, with the following:

<!--[if lte IE 8]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

I haven't tested it, but I imagine the following might work too.

<!--[if lte IE 8]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

It might save somebody down the road. If not, then good luck!

Answer 3

Using the fully-qualified URI will avoid the problem of IE8 and below incorrectly creating a bogus URI like about:/relative/file.png that triggers the mixed content warning. This problem was fixed in IE9.