How does Google's javascript API get around the cross-domain security in AJAX

Question

How does Google's API make cross-domain requests back to Google, when it's on your website?

Bouncy

Answer 1

They get around it by dynamically injecting script tags into the head of the document. The javascript that is sent down via this injection has a callback function in it that tells the script running in the page that it has loaded and the payload (data).

The script can then remove the dynamically injected script tag and continue.

Pepperandsalt

Answer 2

The accepted answer is wrong. Ben is correct. Below is the actually iframe node pulled off a page using the Google API JavaScript Client.

<iframe name="oauth2relay678" id="oauth2relay678" 
        src="https://accounts.google.com/o/oauth2/postmessageRelay?
             parent=https%3A%2F%2Fwww.example.com.au#rpctoken=12345&amp;forcesecure=1" 
             style="width: 1px; height: 1px; position: absolute; left: -100px;">
</iframe>

Basic summary of how this works is here: http://ternarylabs.com/2011/03/27/secure-cross-domain-iframe-communication/. On modern browsers they utilize HTML postMessage to achieve communication, and on older browsers, they use a neat multiple-iframe-urlhash-read+write-combination hack. Ternary Labs have made a library which abstracts all the hacky stuff out, essentially giving you postMessage on all browsers.

One day I'll build ontop of this library to simplify cross-domain REST APIs...

Edit: That day has come and XDomain is here - https://github.com/jpillora/xdomain

Collie

Answer 3

AFAIK they use IFRAMEs.

Rotberg

I Agree with you. Google should be using something similar to this, as they do a Post to their Calendar service using the Javascript library which is not possible in JSONp. +1 – Alanis

You can't get any data back from a cross-domain iframe though - you can post data, but you can't see any result. Since you can use GET arguments with jsonp which allows you to send the same thing as post (except files or large quantities of data), they almost certainly don't use iframes – Tarsus

Answer 4

Another possibility is to use the window.name transport as described for the dojo framework here

Wo

Answer 5

Looks like Google display maps using the <img> tag I guess they use the JavaScrit library to work out all the co-ordinates and other parameters the src url needs, then insert the <img> tags (along with a million other tags) into your DOM.

The full map is built up with several panes like the HTML below:

<img src="https://mts1.google.com/vt/lyrs=m@248102691&hl=en&src=app&x=32741&s=&y=21991&z=16&scale=1.100000023841858&s=Galile" class="css-3d-layer" style="position: absolute; left: 573px; top: 266px; width: 128px; height: 128px; border: 0px; padding: 0px; margin: 0px;">

(You can paste this HTML into your own web page to see the result)

So Google Maps does NOT use AJAX or anything to get its maps, just plain images, created on the fly. So no Cross Domain issues to worry about...

Normannormand