What Facebook Does

Facebook is in a unique position compared to many developers looking to set cross domain cookies: The user visits both facebook.com and the other website.

Facebook never actually sets cookies cross-domain, they only read cookies cross-domain. They set cookies on facebook.com when the user visits facebook.com and they set cookies on the other example.com (or any other website) when the user visits example.com.¹

Doing things this way avoids all of the browser security issues because cookies that were already set when the user visited facebook.com can still be read when example.com loads facebook.com in an iframe. This is worth repeating: Cookies can be read in an iframe if they were set outside of the iframe.²

What about when the user is not logged into Facebook?

(This is how you can do it!)

If the user is not logged into Facebook when trying to use Facebook on example.com, then Facebook opens a popup window – not an iframe – to let the user log in.

A popup window has none of the cookie restrictions that iframes get; it can read and set cookies normally.

What about popup blockers?

Most popup blockers make a special exception for “intentional” popups – ones that occur as a direct result of a user’s click. When the user clicks the login button, the blocker allows the popup because the click indicates that the user wanted that popup.

An alternate method for of cross-domain cookies: flash

If you’re looking for a flash-based method of setting cross-domain cookies, or would otherwise like to avoid popups, you may want to check out my previous article, which includes source code: .swf for JavaScript cross-domain flash cookies

Notes

1. Cookies are only set on example.com when using the using Facebook’s JavaScript SDK. When embedding Social plugins directly as an iframe, only facebook.com cookies are used.
2. Safari sometimes prevents JavaScript from reading cookies in an iframe even if GET and POST requests to the server have full access to the cookies. Safari has several quirks like this, but generally behaves better with iframes if the user interacts with it.

Need a more advanced integration than what Facebook Social Plugins provide?

At Sociable Labs, our Intelligent Social Plugins^TM increase social sharing by 15x and have shown a ~1% increase in sales. And the best part is that we do all of the hard work for you!

However, I was surprisingly unable to find any complete library or how-to guide for connecting flash cookies to javascript. So I dusted off my flash skills and built one, and and now you get to enjoy the fruit of my labor:

Download the .swf, .js, and source code from github

This is an .swf file that communicates with JavaScript via flash’s ExternalInerface to read and write to a Local SharedObject (LSO). Essentially, it’s cross-domain cookies for javascript.

It also includes an (optional) javascript library that handles embedding, communication, error checking, and logging.

The project is hosted at github: http://github.com/nfriedly/Javascript-Flash-Cookies

You might also be interested in How Facebook Sets and uses cross-Domain cookies

Working Example

See https://nfriedly.com/stuff/swfstore-example/ and http://nfriedly.github.com/Javascript-Flash-Cookies/ for a working example.

Quick start guide

To use the library, upload the storage.swf & swfstore.js files to your web server and put this HTML and JavaScript into your web page(s):

The HTML

<!-- This example uses jquery, but SwfStore does not require jquery to work. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="/PATH/TO/swfstore.js"></script>

<input id="dataInput" /> <input id="saveBtn" type="submit" value="Save" />

<div id="status"></div>

And The JavaScript

// wait until the page has finished loading before starting
$(function(){

	// first disable things while the swfStore is initializing
	$('input').attr("disabled","disabled");
	$('#status').text('Loading...');

	var mySwfStore = new SwfStore({

		// Optional but recommended. Try to choose something unique.
		namespace: 'myExample', 

		// To work cross-domain, only one of your sites should have the
		// .swf, all other sites should load it from the first one
		swf_url: 'http://site.com/PATH/TO/storage.swf', 

		// Logs messages to the console if available, a div at the
		// bottom of the page otherwise.
		debug: true,

		onready: function(){
			// Now that the swfStore was loaded successfully, re-enable
			$('input').removeAttr("disabled");

			// Read the existing value (if any)
			$('#dataInput').val(mySwfStore.get('myKey'));

			// Set up an onclick handler to save the text to the
			// swfStore whenever the Save button is clicked
			$('#saveBtn').click(function(){
				mySwfStore.set('myKey', $('#dataInput').val() );
				$('#status').text('Saved!')
			});

			$('#status').text('Loaded');
		},

		onerror: function(){
			// In case we had an error. (The most common cause is that
			// the user disabled flash cookies.)
			$('#status').text('Error');
		}
	});
});

Cross-domain usage

A copy of storage.swf located on one domain may be embedded on pages from one or more other domains, allowing cross-domain cookie access.

Troubleshooting

• Be sure the urls to the .swf file and .js file are both correct.
• If the .swf file is unable to communicate with the JavaScript, it will display log messages on the flash object. If debug is enabled, this this should be visible on the page.
• To hide the flash object and disable the log messages appending to the bottom of the page, set debug to false. (Log messages are added to a div if no console is found).
• If the user does not have flash installed, the onerror function will be called after a (configurable) 10 second timeout. You may want to use a library such as Flash Detect to check for this more quickly. Flash Player 9.0.31.0 or newer is required.
• If you pass a non-string data as the key or value, things may break. Your best bet is to use strings and/or use JSON to encode objects as strings.
• If you see the error “uncaught exception: Error in Actionscript. Use a try/catch block to find error.”, try using “//” in the .swf URL rather than “https://”. See https://github.com/nfriedly/Javascript-Flash-Cookies/issues/14 for more information.
• Do not set display:none on the swf or any of it’s parent elements, this will cause the file to not render and the timeout will be fired. Disable debug and it will be rendered off screen.
• The error this.swf.set is not a function has been known to occur when the FlashFirebug plugin is enabled in Firefox / Firebug..

Patches

Although my JS is solid, my Flash / ActionScript skills leave something to be desired. Patches to either are more than welcome at github (preferred), or just leave a comment here if you’re not sure how to use github. (This comment has a short walk through to using github.)

Production Use

If you’re using SwfStore in a production site, feel free to leave a comment here with a link to the site. I turned off WP’s default rel=”nofollow”, so enjoy the link juice Reciprocal links are not required, but are always appreciated.