HTTPS iframe shows as HTTP (mixed content)

Question

I've an iframe with a HTTPS URL which shows up as HTTP. I can't seem to figure out why it shows my HTTPS link as HTTP and therefore throwing a mixed content error. Thanks in advance.

<html>
<head>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"648d22a7cbd8d39ff6c1d603172e4867",petok:"c4b2f316536247173a516f5b497b137d814de31b-1441717697-86400",betok:"907c8bfe67d347db6e2954b8e5aae965c633df1e-1441717697-120",zone:"addmilk.nl",rocket:"0",apps:{"ga_key":{"ua":"UA-64317812-1","ga_bs":"2"}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=e9627cd26a/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<script type="text/javascript">
/* <![CDATA[ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-64317812-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

(function(b){(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)})(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){_gaq.push(["_trackSocial","facebook","like",a])}),FB.Event.subscribe("edge.remove",function(a){_gaq.push(["_trackSocial","facebook","unlike",a])}),FB.Event.subscribe("message.send",function(a){_gaq.push(["_trackSocial","facebook","send",a])}));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){if(a){var b;if(a.target&&a.target.nodeName=="IFRAME")a:{if(a=a.target.src){a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){b=unescape(c.split("=")[1]);break a}}b=void 0}_gaq.push(["_trackSocial","twitter","tweet",b])}})})})(window);
/* ]]> */
</script>
</head>
<body>
<iframe src="https://cdn.addmilk.nl/track?id=1&amp;preview_id=150908_thuiscomfort_tell_badkamer_728x90&amp;preview_name=Thuiscomfort%20-%20Tell%20-%20Badkamer%20-%20728x90" frameborder="0" width="1" height="1"></iframe>
</body>
</html>

I get the following error when loading the page even though my src URL is loaded over HTTPS:

Mixed Content: The page at 'https://demo.addmilk.nl/test.html' was loaded over HTTPS, but requested an insecure resource 'http://cdn.addmilk.nl/track/?id=1&preview_id=150908_thuiscomfort_tell_badkamer_728x90&preview_name=Thuiscomfort%20-%20Tell%20-%20Badkamer%20-%20728x90'. This request has been blocked; the content must be served over HTTPS.

Must be your cache, it shows fine for me (besides a 404, but it's https so I think it's fine) — Bart Pelle
Welcome to SO. Please visit the help center to see what kind of questions can be asked here. Yours is off topic since it does not involve any code — mplungjan
Also happens on every other computer or address I test it on. — apachenick
See my answer here: stackoverflow.com/questions/35042344/…, this did the trick for me. Not exactly sure the root cause... If anyone knows I'll gladly update my answer — spencer

Tom Tom · Accepted Answer · 2015-09-12T09:03:51

Look into the dev tool console of your browser. In the network tab you should see request and the protocol used (http or https).

Maybe cdn.addmilk.nl redirect to http ?

HTTPS iframe shows as HTTP (mixed content)

1 Answers