HTTP images over HTTPS using angularjs

Question

whenever I visit my angularjs based website that loads images (http images on a https server) I get warnings in the console saying that mixed content has been blocked. And those images do not show up

It is not my browser because it happens on other browsers too and on other systems, it is not the server, because another website that does not use angularjs works fine. So I think it is related to angularjs.

I already did this:

$sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'http://images.RESOURCE.net/*'
]);

but it does not do anything. Moreover I tried loading them over a protocol-less url so //images.RESOURCE.net

This causes them to be loaded over https but then the server identify of the image server could not be validated and it also does not work.

Is there anyone who can determine the actual problem, is it angularjs and can angularjs fix it? It is almost impossible to remove angularjs from the project at the current state.

Thanks

-xCoder

has nothing to do with angular ... it's a browser security feature. Easy topic to research — charlietfl
– charlietfl, Commented Oct 21, 2015 at 17:00
so how is it possible, that a non-angularjs system works just fine? on the same browser — Janosch Hübner
– Janosch Hübner, Commented Oct 21, 2015 at 17:03
@buzzsaw I've read about CORS but it is the same server, can I programmatically enable CORS? — Janosch Hübner
– Janosch Hübner, Commented Oct 21, 2015 at 17:05
easy enough to check without using angular at all ... open one of the images on https protocol right in browser — charlietfl
– charlietfl, Commented Oct 21, 2015 at 17:10

buzzsaw · Accepted Answer · 2015-10-21 17:18:47Z

1

This is not a limitation of Angular. Modern browsers block the loading of mixed (http) content over a secure (https) connection. This can be addressed by adjusting settings in your browser of choice.

Enabling Mixed Content by Browser:

IE: http://wiki.sln.suny.edu/display/SLNKB/Enabling+mixed+content+in+Internet+Explorer

Firefox: http://wiki.sln.suny.edu/display/SLNKB/Enabling+mixed+content+in+Mozilla+Firefox

Chrome: http://wiki.sln.suny.edu/display/SLNKB/Enabling+mixed+content+in+Google+Chrome

edited Oct 21, 2015 at 17:18

answered Oct 21, 2015 at 17:03

buzzsaw

1,4961 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

charlietfl Over a year ago

this won't have any impact on images, browser handles those directly. Mixed content and CORS are different issues

buzzsaw Over a year ago

@charlietfl You are absolutely correct. I forgot that images were not part of the explicitly blocked content and are not subject to the same restrictions. While it is still a browser restriction, it is something the end user can address. Updating my answer now.

Collectives™ on Stack Overflow

HTTP images over HTTPS using angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related