Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What exactly are the rules for avoiding the "mixed content" warning in IE due to background images?

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?

like image 391
Dan Avatar asked Aug 05 '11 19:08

Dan


People also ask

What is mixed content warning?

The mixed content error occurs when both HTTP and HTTPS assets are being loaded from a web page that was requested to be fetched as HTTPS. The browser receives a secured page that includes insecure resources like videos, images, or scripts, and blocks this mixed content to protect its user.

What is mixed active content?

Mixed active content is content that has access to all or parts of the Document Object Model of the HTTPS page. This type of mixed content can alter the behavior of the HTTPS page and potentially steal sensitive data from the user.


1 Answers

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.

like image 126
EricLaw Avatar answered Oct 06 '22 00:10

EricLaw