"Mixed content" Error when accessing HTTP within HTTPS page

Question

Our intranet website has to communicate with a client .NET app. We're using a HttpListener (on http://localhost:[port]) on the client app and an iframe that refers to this url in the page. Its working like a charm when the page is HTTP.

Problem: When the site is HTTPS a 'Mixed content' Javascript error is displayed in newer browsers and the request doesnt arrive at the client.

I believe this error would also occur when using an Ajax request instead of an iframe.

I also tried to bind a self-signed certificate to the listener and listening on https://localhost:[port] (which works for IE), but since the Firefox has its own certificate store its really tough to install it there automatically (IE uses Windows certificate store which is easy to install there).

So, does anyone know any possibility to make a request to http://localhost:[port] when the site itself is HTTPS that works for both FF and IE?

Thanks!

Why not just run everything on https? Why do you have mixed content in the first place? — Halcyon
As I wrote: Its very ugly to automatically install a certificate into firefox (you need to use NSS tools and have C++ Redistributable 2010 installed) — Powerslave
Oh right, so http://location:[port] is not actually a website but the API for your .NET app? That's weird. Why not use XMLHTTPRequest? — Halcyon
Yeah kind of. HttpListener is a .NET class that listens on incoming requests to some url:port, which in my case is http ://localhost:[port]. With that way, I can easily talk to my .NET app without installing some browser add-ins like ActiveX or something (like http ://localhost:[port]/?action=doStuff). Where should I use XMLHTTPRequest? On the page instead of the iframe? Wouldnt it also throw an mixed content error? Thank you — Powerslave

Halcyon Halcyon · Accepted Answer · 2015-10-01T15:04:35

Change the iframe to:

<script>
    var request = new XMLHTTPRequest();
    request.open("GET", "http://localhost:[port]/?action=doStuff");
    request.send();
</script>

You will also need to make some minor modifications to your app.

It needs to implement an OPTIONS method and it needs to return a cross-origin-resource-policy. This sounds a lot harder than it is, it just needs to return a reply with the Access-Control-Allow-Origin header set to *.

The response of the GET request must also have this header.

If you know all the domains that try to communicate with your app on localhost you can change the * to a whitelist or even just a single value.

"Mixed content" Error when accessing HTTP within HTTPS page

1 Answers