javascript

Use IFRAME to access window.opener from HTTPS popup into a HTTP page

You can use an IFRAME on in a HTTPS popup window to communicate back to a window.opener that is HTTP. First some background…

Recently I had to make an address book importer for work. Basic use case:

  • go to a page that needs email addresses in a textarea
  • click contact address importer (opens a popup)
  • login to my email provider (yahoo, gmail, etc)
  • pick the contacts i want
  • add those contacts to my textarea

In the use case scenario above I would have two different domains:

  1. HTTP://infoentropy.com/myexample (window.opener page)
  1. HTTPS://infoentropy.com/myexample (popup for login)

The popup must be HTTPS because I users will send their login credentials for the email provider third party sites. Unfortunately a problem develops when you have an HTTP page that opens a HTTPS popup. Browsers will block javascript from accessing the parent window that originated the popup window.opener in javascript. I presume the browser consider HTTP->HTTPS communication to be cross-domain scripting, which is no-no.

Once a window becomes HTTPS browser security prevents it from communicating with window.opener ever again. That means you cannot do this to circumvent the security.

  1. popup HTTP (choose email provider)
  2. transition to HTTPS (login)
  1. transition to HTTP (choose contacts)

We used Plaxo for a long time so I know it is possible to pull contacts from the Plaxo picker into my own page through HTTPS. I basically copied the method that they use, but my method is much less extensible and less flexible.

The key is to have an IFRAME whose src URL is in the same domain/protocol as your opener. So, on the contact picking page I have a few key components.

the HTTPS page

The critical part here is having <form target=""> and <iframe name="">. Having this will pass the processed data from the form into the IFRAME. The SRC of the IFRAME will NEED to be a Fully qualified absolute path.

<form method="post" action="http://localhost/process_selected" target="callback_iframe">
</form>
<iframe name="callback_iframe" src="#nothingyet"></iframe>

the IFRAME contents

The critical part here is that top.opener basically refers to window.opener of the HTTPS page. It is OK to access .opener here because the IFRAME and the opener both originate from the same domain.

<html>
<script>
dostuff() {
  top.opener.mycontacts = thecontactsyoujustsent;
  top.close()
}
</script>
<body onload="dostuff()">
</body>
</html>

the controllers

for http://localhost/process_selected

  • receive selected inputs
  • process data however you want
  • return IFRAME page. it will automagically go into the IFRAME of the secure page.
jeff's blog  Add new comment

Using MochiKit doXHR with POST

This is a followup to my old post Using MochiKit doXHR using POST instead of GET.

The data that you send back in your controller will be stored in the Deferred object that gets returned. Look in the responseText field of the object.


var d = doXHR(url, 
   { method:'POST', 
     sendContent:qry, 
headers:{"Content-Type":"application/x-www-form-urlencoded"}
   });

The headers piece was the critical for the POST to work on my configuration.

jeff's blog  Add new comment
« first‹ previous12