IE Mixed Content – Page Contains Both Secure and Nonsecure Items
Posted by: jordan in security, tags: browsers, securityI ran into IE’s mixed content security alert feature earlier today when trying to load our application’s secure credit application page. Obviously it’s a bad user experience and it looks bad on us so I set out to fix it and found the following things that hopefully will save someone else some time.
The reason for the warning is that you’re on an SSL-secured (https protocol) page that is attempting to load non-SSL (http protocol) content. It’s ok if you’re on an HTTP page and you request HTTPS; you won’t receive the error.
First of all, you should download a tool for HTTP sniffing. I use Fiddler.
Run Fiddler and then browse to the page that is causing the message. You’ll see a bunch of requests go through, most likely. You can ignore any CONNECT requests; anything else should be showing up as HTTPS.
Most likely, you have a script or CSS file that is requesting HTTP content. If you set them all to HTTPS or leave them as relative paths, you should be ok.
For example:
/css/site.css – OK
https://www.example.com/css/site.css – OK
http://www.example.com/css/site.css – Error
Here’s your checklist of things to do:
- All loaded assets, such as images, scripts, css, favicons, etc. must be relative paths or be HTTPS.
- All iframes must point to an actual page (relative or HTTPS). No SRC attribute, or an SRC of # or about:blank will raise the error. Some people have used javascript: false; with success.
- Make sure all requests from your page are HTTPS. Google Analytics and other 3rd-party tools often have a special link you can use for HTTPS.
- The codebase attribute of an object (Flash, Applets, etc) must be HTTPS. IE doesn’t actually make a request on this, but it does check the protocol for some reason.
- Anything that returns an HTTP error will cause the error to pop up, since IE considers its error pages to be “insecure”. Of course, the whole browser’s insecure, but that’s another article.
- If you have a JavaScript that calls removeChild() on a node that has a background image, it may cause this error. You can set outerHTML = ” instead without consequence. Retarded, but it works.
Things that you don’t have to worry about:
- DOCTYPES
- XHTML namespaces
- Links in the page (anchors, not the link element)
The one that got me was the codebase attribute of an object element. I figured it was just too stupid to be the actual problem. Silly me; IE strikes again.
Hope this saves some folks time.
Subscribe to Zorked!
Cheers mate – we spent ages trying to track down the remove child issue.
Yeah, I spent almost a day running through our code to find out what was causing it, so I’m glad I was able to help you guys.
thanks a lot – saved me a lot of debugging time, and solved my problem with a simple search-and-replace
Thanks a lot. I’ve never used ssl before and this IE message wasn’t acceptable. Your simple to follow instructions quickly solved my problems.
Egg
Glad you guys found it helpful.
I wish I had read this article sooner, the fact that Iframes not having a src attribute could cause this issue for me is insane. I spent at least 2 days trying to figure out why I was getting this issue when everything on the page was using relative or https already. Thanks so much, you made my day.
how do i turn off the error in the browser. mostly I dont care if there’s nonsecure items on the page as I didnt intend to use SSL anyway
Hi name, in IE7 you can go into Tools->Internet Options, click the Security tab, choose the Internet level, hit “Custom Level”, and look for an option that says “display mixed content”. Change that to enable instead of prompt.
This of course only disables it on your computer, and I don’t recommend it anyway–it’s a bit of a security risk.
Man, you saved me! Thanks for the valuable info!!!
THANKS! I saw the codebase attribute and dismissed it as not being the problem. …IE doesn’t actually download it after all. It wasn’t until after a couple of hours of testing a debugging that I actually tried changing it to https. …grumble grumble, IE is so lame. Then I searched and found your post.
Nice! Thanks for the tips.
Keep the good work up!!
Thanks for the help! The CODEBASE attribute on a flash object was causing the problem on our site… never would have guessed!
[...] pages, try using relative URLs. Here’s a page outlining some additional issues to look out for. IE Mixed Content – Page Contains Both Secure and Nonsecure Items | Zorked! I’m pretty sure you’re using include files, so if you want to specify an absolute path, you might [...]
Thank you very much sir… Nice article…
Great article… really helped me out! Thanks!
I have just installed the SSL cert on my site and am now getting the error mentioned above. I notticed that the ’src’ tag cannot be used without provoking the browser to display this error, but how can I embed a flash file without using this tag? The main site directory only contains the HTML file referencing the flash file so I am not looking at a lot of code to look through. The main html file was generate using FLASH 8. Is there a way to get the main HTML file to load without provoking this message, or should I just work around this by linking to the https section when I direct users to the CMS?
Ok, sorry but I was quick to ask without looking into it deeper.
It seems like this fixed my problem with FLASH. And I think this is mentioned above.
I had to change the ‘publish’ settings in FLASH to FLASH HTTPS which generated the proper file format and also a .js file that needed to be included.
Thank you for the blog which helped me look in the right direction, I have not had any formal training and am teaching myself as I go.
bless you for posting this, one of the most irritating issues to run into
//If you have a JavaScript that calls removeChild() on a node that has a background image, it may cause this error. You can set outerHTML = ” instead without consequence. Retarded, but it works. //
can you give me the exact fix for the problem arising due to this reason?
Where should i keeep outerHTML=”
and is the above expression correct
Pradeep, you should be able to use the following code, where elem is a reference to some element on your page that you would like to remove.
if(elem.outerHTML) elem.outerHTML = ”;
else elem.parentNode.removeChild(elem);
you’re da man!
I have applied all of the above mentioned fixes (Thank you) and this eliminated some of our issues. Unfortunatly my end user is the general public and changing the settings in the browser is not an option. We have narrowed it down to the menu on the pages whhich were built using frames. ie6 appears to see this as unsecure and still throws the pop-up.
Очень интересно!!! Только не очень могу понять как часто обновляется ваш блог?
Thanks Jordan – that fiddler saved me!
It was a meta-call to a swfobject.js – just needed to make it https and hey presto.
Thanks (found you on Google)
Hello
can you also explain how to call images from css when page are loaded using https?
thanks
@AirBear: you may try using a different menu, such as suckerfish or plain CSS dropdowns. I can’t see any need for frames to display a menu.
@House: sorry, I don’t understand Russian
@Robert: glad the article was helpful for you. Best of luck!
@Hire: you can use a relative URL if the image is on your server.
For example, instead of linking to http://mysite.com/assets/myimage.jpg you would link to /assets/myimage.jpg
If it’s not on your site, you would need to change it to https://someoneelsessite.com/assets/theirimage.jpg
If they don’t have SSL, you will need to download the image to your own site, and link to it with a relative path or with https.
Good tips. Mine was the codebase.
Thanks