This is a link to the source code I wrote during the talk at the UW Hangout Hangout Hack.

 

http://lggwg.com/wolff/google/basicHangoutApp.xml

Crafty

http://craftyjs.com/demos/tutorial/tutorial.html

This is something for my pals at UW!

Are you building a Hangout app, but are struggling with XSS problems?

Why do I have XSS issues?

[ Please note that hangoutiframer.appspot.com has the latest info on using the hangoutiframer; this post is left up for historical reasons.

You define Hangout apps using an XML gadget spec.  Google reads that spec and rehosts it on googleusercontent.com.  We do this partially for efficiency and partially to help protect against XSS attacks.  That's the good part, and for straightforward gadgets, that's enough.

This means everything that's inside the .xml (and any loaded .js files) are served from googleusercontent.com, not from your server.  This may cause problems, such as:

• My app has lots of Ajax, but it can't seem to write back to itself without XSS errors.
• I'm writing a Flash app and I don't want to do 'Security.allowDoman("*")' because it lets malicious people abuse my .swf, but I'm plagued by security sandbox errors.
• I'm using an HTML5 canvas and I want to get the bits off it, but I keep getting
  
  SECURITY_ERR: DOM Exception 18

You could write a gadget spec that includes an iframe to your own site. Then the items inside the iframe would be hosted on your site! However, then your iframe would be isolated from the hangout itself, and you'd have to come up with some kind of transit mechanism to pass data from the googleusercontent.com iframe to your iframe.

This isn't fun. So much more fun? Using our iframe solution instead!

How iframing a Google+ Hangout App works

In a Hangout app using the iframe solution, you do not write an .xml file.

Instead, you provide a link to your app in an html page served from your own server.  We have a service that will create a gadget spec for you automatically.  You then include two .js files in your .html, and you have access to the Hangout API!

Let's be specific.  Let's assume I'm making an app whose iframe is hosted at:

https://mediakit001.appspot.com/static/basicHangoutApp.html


(The https is important; you do not want mixed content!)

1. Go to https://code.google.com/apis/console/
2. Choose your project.
3. Make sure you have turned on Google+ Hangout API in the "Services" tab.
4. Go to your Hangouts tab and enter the following (and hit Save):

https://hangoutiframer.appspot.com/forward/gadgetspec?u=https://mediakit001.appspot.com/static/basicHangoutApp.html

You can follow that link to see if your XML is really there, and you're all set!  Click "Enter a Hangout" to try it out!

You'll need to add some specific scripts to your hangout:

<script src="//hangoutsapi.talkgadget.google.com/talkgadget/apps/gadgets/js/rpc.js"></script>
<script src="//hangoutsapi.talkgadget.google.com/hangouts/api/hangout.js?v=1.0">
</script>

And you will also likely want a function called on app startup.  In this case, let's say you want to call onClientReady() on startup:

<script src="https://apis.google.com/js/client.js?onload=onClientReady">
</script> 

The Files You Need

Sample files and instructions are available at this site:

http://code.google.com/p/hangout-experiments/source/browse/#git%2Foauth%2Fiframe


This post edited for v1.1 release.

Look, it's fish!