the lift way

".miniProfile *" #> unboxMiniProfiles.map{
  miniProfile => 
    ".avatar [src]" #> miniProfile.avatarUrl &
      ".displayName" #> miniProfile.displayName &      ...
}

def unboxMiniProfiles = ProfileClient.getMiniProfiles(usernames) match {
  case Full(miniProfiles) => stuff
  case _ => logger.error("Couldn't get mini profiles.")
}

 

The lift way

SHtml.ajaxInvoke(() => jsCmd)

liftAjax.lift_ajaxHandler('F304443309923DBOE=true', null, null, null);

http://www.zensey.com/ajax_request/SD48QP45523DBOEZH/

POST: F304443309923DBOE=true

The angular way

$http({method: 'GET', url: '/rest/profile/mini/123'})
    .success(function(data, status, headers, config) {
      // do stuff
    });

$resource('/rest/profile/mini/:username', {username: '@username'},
  {get: {method: 'GET', isArray: false}}
);

MiniProfile.get({username: $attrs.username}, function (data) {...}

But Security...

USE LIFT's immunities

Unpredictable urls are immune to both attacks.

What we want

angular.module('zen.lift.miniProfile'
  .factory('miniProfile', function (liftProxy) {
    return {
      get: function(username) {return liftProxy(...);}
    };
  }

http://www.zensey.com/ajax_request/F246253955771TQNMAV/

(theirUsername: String) => ProfileClient.getMiniProfile(theirUsername)

dynamically generate modules

<script>
  angular.module('zen.lift.miniProfile')
    .factory('miniProfile', function ($liftproxy) {
      return {
        get: function(username) {...}
      };
    };
</script>

Success!

Generated javascript

The ajax request

JSON response

{
   "success":true,
   "data":{
      "username":"51edf173c0261d53a7168c9d",
      "displayName":"doug2doug2",
      "coach":false,
      "presence":"offline",
      "connectedStatus":"pending",
      "sharedConnections":[
         {
            "username":"51f9c00ac02616bfbba0f301"
         }
      ]
   }