Utilities Blog by JuCa Cruz: Facebook

Friday, October 18, 2013

How does Facebook set cross-domain cookies for iFrames on canvas pages?

I was browsing Facebook's documentation reading about canvas applications and I came across an example application: http://developers.facebook.com/docs/samples/canvas. As I read through their example, however, I got very confused about their use of cookies in the iframe application.

A little backstory...

I had already played around with using iframes for embeddable widgets (unrelated to Facebook) and I found out a few browsers (Chrome, Safari, etc.) have strict cookie policies and don't allow cross-domain cookies set in iframes (Firefox, on the other hand, allows iframes to set cross-domain cookies in iframes). For example, if foo.com has an iframe with src="http://bar.com/widget" the iframe widget will not be able to set any cookies for bar.com and therefore will have trouble persisting state within the iframe: bar.com will interpret every request (including ajax requests) from the widget as a fresh request without an established session. I struggled, and found a way around this by using JSONP and javascript to set cookies for foo.com instead...

... and so?

Well, I was looking at the example canvas iframe Facebook application and I noticed that their application (hosted on runwithfriends.appspot.com) is able to set a cookie, u, with the current user's id along with a few other parameters for the runwithfriends.appspot.com domain. It sends this cookie with every request... and it works in both Chrome and Firefox! WTF? How does Facebook get around the cross-domain cookie restrictions on Chrome?

(I already know the answer now, but I thought this might be helpful for anyone struggling to figure out the same thing)

So the iFrame isn't actually setting the u cookie for the runwithfriends.appspot.com domain. What Facebook does is it creates a form, and uses javascript to submit the form on page load. Since the form's target is the iframe, it doesn't reload the page... it just loads the iframe with the POST's response. Apparently even Chrome and other browsers with strict cookie policies set cookies for cross domain requests if they are POST requests...

As you can see the answer is simple, and could be implemented by just creating a handler (could be a Servlet or anything that can catch some parameterts and transform them into cookies), like this:

<head>
 <title>::Kaptest:: Cookie Generator</title>
 <META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
 <META HTTP-EQUIV="Expires" CONTENT="-1"/>
 <META HTTP-EQUIV="EXPIRES" CONTENT="0"/>
</head>
 <c:set var="myCookies" value="#{kaptest.cross_domain_listener_action.cookies}" />
 Cookies Generated...

@Name("kaptest.cross_domain_listener_action")
public class CrossDomainListenerAction {
 
 private static final LogProvider log = Logging.getLogProvider(CrossDomainListenerAction.class);
 
    @In
    private FacesContext facesContext;
    
 private final String CODE_WORD_VALUE = KapConfig.getString("bulk_post_code_word");
 
 private final String CODE_WORD_NAME = "__token";
    
    private final Integer COOKIE_DEFAULT_MAX_AGE = 30;
    
    private List<CookieWrapper> cookies = new ArrayList<CookieWrapper>();
    
 /**
  * Generates a set of cookies based on a Form submitted by client,
  * in order to bypass cross domain issues with external applications.
  * 
  * In order to use it, one of the parameters should be a codeword (password).
  * 
  *  @return String - outcome
  */
    @Create
 public void generateCookies(){
  log.debug("Generating Cookies based on Params received");
  
  HttpServletRequest request = (HttpServletRequest)this.facesContext.getExternalContext().getRequest();
  Map<String, String> requestParameterMap = this.facesContext.getExternalContext().getRequestParameterMap();
  
  if(StringUtils.equalsIgnoreCase(requestParameterMap.get(this.CODE_WORD_NAME), this.CODE_WORD_VALUE)){//Password provided
   for(String name : requestParameterMap.keySet()){
    String value = requestParameterMap.get(name);
    if(!name.equalsIgnoreCase(this.CODE_WORD_NAME)){
     log.info("Generating Cookie with name="+name+" and value="+value);
     //CookieUtil.placeCookie(name, value, COOKIE_DEFAULT_MAX_AGE);  
     cookies.add(new CookieWrapper(name, value, COOKIE_DEFAULT_MAX_AGE));
    }
   }
  }else{
   log.warn("Wrong Code Word from "+request.getRemoteHost()+"/"+request.getRemoteAddr());
  }

}
 
 public List<CookieWrapper> getCookies(){
  return this.cookies;
 }
}

Monday, October 29, 2012

Interacting with Facebook using Java

If it's your first time interacting with Facebook, probably you haven't found many examples in Java, have you?
On my case I'm working with something really simple, I just need to create a simple app that will be configured as Canvas. There are 2 important steps in order to work with Facebook by using Canvas:

1. Authorization
When Facebook calls your webpage (on my case a jhtml using SEAM - it could be a JSP as well), it will send through POST something called signed_request, for more details please read this The signed_request parameter is the concatenation of a HMAC SHA-256 signature string, a period (.), and a base64url encoded JSON object. It looks something like this (without the newlines):

vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso
.
eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0

Just by receiving this parameter, it means that you (as facebook user) just authorized this app on your account, otherwise you'll get the classic mesage asking for your permission to use this app. Next, we need to retrieve from the JSON object 2 parameters that we need to do the authentication: oauth_token and expires).
However, in order to play around with JSON object, we need to decode it, and this will do the trick: It's very important to use sun.misc.BASE64Decoder in order to avoid missing few characters when decoding with other classes. Belive me, this save you from a lot of headeaches. I'm a big fan of Commons, however, it didn't work out really good when decoding this JSON object. FYI, this is my method.

/**
 * Process signed request
 * <br>
 * jsonObject will have available these attributes: algorithm, expires, issued_at, 
 * oauth_token, user, user_id
 * 
 * @see https://developers.facebook.com/docs/authentication/signed_request/
 * 
 */
private void authorizeApp() throws Exception{
 log.info("(authorizeApp)Processing signed request");
 String base64urlEncodedJsonObject = null;
 
 String[] arraySignedRequest =  StringUtils.split(signedRequest, '.');     
 log.info("arraySignedRequest[0]="+arraySignedRequest[0]);
 log.info("arraySignedRequest[1]="+arraySignedRequest[1]);
 
 base64urlEncodedJsonObject = new String(new BASE64Decoder().decodeBuffer(arraySignedRequest[1]));
 
 log.info("base64urlEncodedJsonObject="+base64urlEncodedJsonObject);
      
    //parse data and convert to json object
 jsonObject = (JSONObject) JSONSerializer.toJSON(base64urlEncodedJsonObject);
    log.info("jsonObject="+jsonObject);
    
    //check signature algorithm
    if(!this.getStringAttributeFromjSonObject("algorithm").equals("HMAC-SHA256")) {
     log.warn("Unknown algorithm is used");
    }
    
    //Retrieve access_token and expires_in params
    this.accessToken = this.getStringAttributeFromjSonObject("oauth_token");
    this.expiresIn = this.getStringAttributeFromjSonObject("expires");
 
}

2. Authentication
This step is really easy, because based on attributes oauth_token and expires, we have a to make a http call to https://graph.facebook.com/me in order to authenticate into FB.
As result of my http call, by using the JSON object returned, I'm able to get more details about this FB account, such as email, first name, last name, age, languages, among others. The next steps depend how deep you want to go.
Good luck!