Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

issue with datauri test on https in ie7 #362

niallcollins opened this Issue Aug 30, 2011 · 7 comments


None yet
5 participants

I am using this Modernizer test to test if a data uri is supported in the rendering browser.

(function (undefined) {
    "use strict";
    // create an image object
    var datauri = new Image();

    // assign the error event to it
    datauri.onerror = function() {
        Modernizr.addTest('datauri', function() { return false; });

    // assign on load event to it
    datauri.onload = function() {
        Modernizr.addTest('datauri', function() { return (datauri.width === 1 && datauri.height === 1); });

    // set a base64 source to the image for the test
    datauri.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

This works fine. However in IE7 when this test is run on https page, no issue on http pages, then I get a pop up asking "The page contains both secure and non secure items etc etc". When I remove the test the issue goes away.

Anyone have any ideas why and how I could fix it?


paulirish commented Aug 30, 2011

i dont know an easy fix.

you could create an iframe where you execute that test... maybe? :/

The entry point to my site will be a http page. What if I performed the above check on this entry page, set a cookie and in future when the cookie exists read from this, otherwise perform the test?

Would this be a better and more performant option than creating an iframe on all pages as part of the test? Or even creating it on https pages.

Feedback appreciated on this.

barkan commented Sep 8, 2011

considering that IE7 doesn't support datauris without a lot of shenanigans, would browser sniffing be an appropriate fallback here?

Yes I reluctantly in the end with browser sniffing. So at the start of my test, I checked for IE7 or before browsers and if the current page is https - then the datauri test failed. Otherwise, I progressed with the test. Not ideal but couldn't find another way out of this.

@paulirish paulirish closed this in 090707f Dec 11, 2011

I managed to fix this by adding

if(($.browser.msie !== undefined) && ($.browser.version == '7.0')) { return false; }

to the two methods which use data:image


stucox commented Mar 24, 2013

Just found this. Yeah, as @chrisbarber86 suggests, we might as well just blacklist IE7 with a UA sniff — we know it doesn't support data URIs anyway. I'll do it at some point.

@stucox stucox reopened this Mar 24, 2013

@stucox stucox was assigned Mar 24, 2013

@stucox stucox pushed a commit that referenced this issue Mar 24, 2013

Stu Cox Merge pull request #876 from stucox/master
`datauri` test updates (fixes #321 & #362)

stucox commented Mar 24, 2013

Fixed by #876

@stucox stucox closed this Mar 24, 2013

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

@paulirish paulirish datauri test. added note about IE7/SSL. fixes #362 71a9d7a

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

Stu Cox Merge pull request #876 from stucox/master
`datauri` test updates (fixes #321 & #362)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment