Chris Lloyd
chrislloyd403@gmail.com

Using YUI to workaround SSL warnings when fetching JSON-P over HTTP

2013/09/21

Modern browsers don’t allow content to be fetched using HTTP on a page delivered over HTTPS.
You get errors like:

IE: SEC7111: HTTPS security is compromised by http://xxx
Safari/Chrome: The page at https://xxx ran insecure content from http://xxx
Firefox: Blocked loading mixed active content "http://xxx"

In some cases the source of the data you want to load over JSON-P isn’t available over HTTPS. YUI has a module that’s advertised for cross-domain loading (http://yuilibrary.com/yui/docs/io/#cross-domain-transactions), but it can also be used to work around the SSL problem.

This example uses a customized YUI from http://yuilibrary.com/yui/configurator/ with only the io-xdr module. The io.swf should be obtained from the main YUI download.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="yui-io-xdr.min.js"></script>
<script type="text/javascript">
YUI().use("io-xdr", function(Y) {
  // Register for the Flash transport
  Y.io.transport({ src: 'io.swf', id: 'flash' });
  // xdrReady is fired when the Flash object is ready, I couldn't find a callback for when it fails to load (eg, on mobile devices). Probably best to include some SWFObject-style Flash detection first.
  Y.on('io:xdrReady', function(){
    // When ready, the JSON-P endpoint is requested
    Y.io("http://www.example.com/service/jsonp?callback=cb", {
      xdr: { use: 'flash' },
      timeout: 1000,
      arguments: { },
      // There are other callbacks, but these are the most useful
      on: {
        // This is a JSON-P response, it should be evaluated.
        success: function(id, o, args) { eval(o.responseText); },
        failure: function(id, o, args) { console.log('failed to load content'); }
      }
    });
  }, Y);
  // This is the callback function name requested from the endpoint.
  function cb(d) {
    console.log(d);
  }
});
</script>
</body>
</html>

Comments

    Leave a comment