This is a link to the source code I wrote during the talk at the UW Hangout Hangout Hack.
Friday, January 27, 2012
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
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:
(The https is important; you do not want mixed content!)
- Go to https://code.google.com/apis/console/
- Choose your project.
- Make sure you have turned on Google+ Hangout API in the "Services" tab.
- Go to your Hangouts tab and enter the following (and hit Save):
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:
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:
The Files You Need
Sample files and instructions are available at this site:
This post edited for v1.1 release.