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, Oct 21 '15 at 17:00
so how is it possible, that a non-angularjs system works just fine? on the same browser — Janosch Hübner, Oct 21 '15 at 17:03
@buzzsaw I've read about CORS but it is the same server, can I programmatically enable CORS? — Janosch Hübner, Oct 21 '15 at 17:05
easy enough to check without using angular at all ... open one of the images on https protocol right in browser — charlietfl, Oct 21 '15 at 17:10

buzzsaw · Answer 1 · 2015-10-21T17:18:47.347

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 '15 at 17:18

answered Oct 21 '15 at 17:03

buzzsaw

1,476
1
10
14

this won't have any impact on images, browser handles those directly. Mixed content and CORS are different issues – charlietfl Oct 21 '15 at 17:07
@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. – buzzsaw Oct 21 '15 at 17:12

HTTP images over HTTPS using angularjs

1 Answers1