Cross domain/protocol iframe with access to both servers and modern features

Question

I am trying to embed an iframe into an https site. The site being embedded can only use the http protocol.

I'm getting a console error that the frame was blocked because "The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match".

Once I have the frame working I then want to run code on the embedded site. I think using the postMessage framework should do this for me, but I don't want the code that receives those messages on the embedded page to always be included, so want to use Javascript on the parent site to inject the JS file. Trying to use contentDocument but getting an error that this is null.

There is no requirement to support old browsers, so all the new HTML5 stuff is fine so long as IE10/Chrome/Safari/Firefox latest will run it. I have full access to both servers so editing PHP/Apache headers is fine.

Answer 1

To answer my own question, after several more hours struggle, it turns out it isn't going to be possible to inject a JS file when the parent is https and the child is http.

However, once I gave up on this dream, it was quite easy!

Before loading the iframe, I make a CORS AJAX request from website A to the site I want to display in the iframe (website B), to a PHP file that checks the HTTP_ORIGIN value to make sure the correct server is accessing. If it is, it sets a session variable on website B. Then, when I load website B from website A in the iframe, it uses the session value to know it's OK to include the javascript file I was going to inject onto website B.

After that, the postMessage stuff all worked fine over different protocols with no extra work!