How do vimeo / youtube etc. get referrer URL in their iframes?

Baffled by the huge quantity of answers and problems on this subject.

Now, I accept the security JS situation disallowing cross-domain access from iFrame to container window/pages but the ideal resolutions cited in numerous articles of Fragment Identifers or postMessage API is truly baffling.

What I want to do is replicate what vimeo seem to have pulled off; their new iframe embed code

<iframe src="http://player.vimeo.com/video/17263117" width="400" height="225" frameborder="0"></iframe>

Uses http://a.vimeocdn.com/js/player_combined.opt.js?8ba54 and seems to be able to fill out a referrer url in the iframe's source from the parent loading page. I.e. www.donkey.com/myvideo.html gets inserted in the http://player.vimeo.com/video/17263117 page. Normally, with security blocks on JS this is not possible with simple pa开发者_如何学运维rent.location.href. So, I looked into it and have been going on a truly wild chase of the goose to find how this can be done.

I've tried to understand their JS and played with postMessage API but haven't got anything to show. Any guidance is very much welcome.

It doesn't need to get it from the <iframe> source at all (security restrictions prevent this as you've already noted), it's passed to the server as a header, and it's rendered in the page by their server for the JavaScript to use, look at the options variable defined in the page.

Let's take an example here: http://www.jsfiddle.net/nick_craver/FfuPk/

If you look at the request to http://player.vimeo.com/video/17263117,

You'll see the referrer get's passed:

Referer: http://fiddle.jshell.net/nick_craver/FfuPk/show/light/

In a script block in the page loaded by the iframe you'll see:

var options = {config: {
               //....
               "referrer":"http:\/\/fiddle.jshell.net\/nick_craver\/FfuPk\/show\/light\/"
               //....
              };

So that's how it gets the referrer, ultimately from the header sent by your browser to the server.