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 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  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, 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 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:

(The https is important; you do not want mixed content!)
  1. Go to
  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):

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="//"></script>
<script src="//">

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="">

The Files You Need

Sample files and instructions are available at this site:

This post edited for v1.1 release.


  1. Very helpful, thanks a ton for hosting this service! It seems that the only change for the v1.0 API is to change the ?v=1.0 on the api call, I'm guessing.

  2. hi wolff,

    i tried the iframe hangout and it worked like a charm! very fast way of getting apps running in a hangout. however, i found a bug and i wanted to see if it was an error on the iframe, or on the hangout (not able to invite users to hangout).

    also, i was hoping to change the iframe to increase the amount of screen real-estate available for my apps.

    the problem i have is that your google code project seems to be locked down or unavailable. i'm getting a 403. would you make this code available to me? i'm developing an app for a non-profit open source project.

    please advise, thanks!


    1. Please see: for up-to-date instructions.