Proxies are Awesome!

Proxies
are Awesome!
Brendan Eich
(w/ Mark Miller & Tom Van Cutsem)

Tuesday, September 28, 2010

ECMAScript 5 (ES5)


ES5 Review
• Array extras
• JSON (based on json2.js)
• Strict Mode (“use strict”)
• Object meta-programming API
• accessor properties (getters & setters)
• mutability and enumerability controls
• “javascript.lang.reﬂect”
• In Firefox 4, IE9 (w/o strict?), WebKit nightlies

ES5 Property Descriptors
• Data vs. accessor properties
• Property attributes
var point =
{ x: 5,
y: 8,
get r() { return Math.sqrt(this.x*this.x + this.y*this.y); } };
Object.getOwnPropertyDescriptor(point, ‘x’);
{ value: 5,
writable: true,
enumerable: true,
configurable: true }

Object.getOwnPropertyDescriptor(point, ‘r’);
{ get: function () { return Math.sqrt(this.x*this.x + ...); },
set: undefined,
enumerable: true,
configurable: true }

Property Descriptor Maps
var point =
{ x: 5,
y: 8,

Object.defineProperty(point, ‘z’, {
value: 0,
enumerable: true,
writable: false,
configurable: false });

var point = Object.create(
Object.prototype,
{ x: { value: 5, ... }, y: { value: 8, ... },
r: { get: function() {...}, enumerable: true, ... },
z: { value: 0, enumerable: true, ... } });


Property Descriptor Maps
var point =
{ x: 5,
y: 8,

Object.defineProperty(point, ‘z’, {
value: 0,
enumerable: true,
writable: false, name pd
configurable: false }); x {...}
y {...}
r {...}
var point = Object.create( z {...}
Object.prototype,
{ x: { value: 5, ... }, y: { value: 8, ... },
r: { get: function() {...}, enumerable: true, ... },
z: { value: 0, enumerable: true, ... } });


Tamper-prooﬁng Objects
var point =
{ x: 5,
y: 8,

Object.preventExtensions(point);
point.z = 0; // can’t add new properties

Object.seal(point);
delete point.x; // can’t delete properties

Object.freeze(point);
point.x = 7; // can’t assign properties


ES-Harmony Proxies


Dynamic Proxies

• Generic handling of property access:

• Generic wrappers: security, aspects, logging, proﬁling, ...

• Stratiﬁed form of SpiderMonkey’s __noSuchMethod__
js> o = {__noSuchMethod__: function (id, args) { print(id, args); }}

({__noSuchMethod__:(function (id, args) {print(id, args);})})

js> o.m(1,2,3)

m 1,2,3

• Generic handling of other operations applicable to objects:

• Virtual objects: persistent objects, remote objects, ...

• Emulate the dreaded “host objects”


Example w/ just ES5: logging
function makePoint(x, y) {
return {
x: x,
y: y,
...
};
}


return {
x: x,
y: y,
...
};
}
function makeLoggedPoint(p) {
return {
get x() {
log(‘get’,‘x’,p); return p.x;
},
set x(v) {
log(‘set’,‘x’,p,v); p.x = v;
},
// get y, set y, ...
};
}
var lp = makeLoggedPoint(makePoint(1,2));

return {
x: x,
y: y,
...
};
}
function makeLoggedPoint(p) {
return { Too ad hoc. What about:
get x() { • logging other data types
},
log(‘get’,‘x’,p); return p.x;
• proﬁling, persistence,
set x(v) { access control, ...
log(‘set’,‘x’,p,v); p.x = v;
},
// get y, set y, ...
};
}
var lp = makeLoggedPoint(makePoint(1,2));

Logging: static ES5 “proxies”
function makeLogger(obj) {
var proxy = Object.create(Object.getProtoypeOf(obj), {});
Object.getOwnPropertyNames(obj).forEach(function(name) {
var pd = Object.getOwnPropertyDescriptor(obj, name);
Object.defineProperty(proxy, name, {
get: function() {
log(‘get’, name, obj);
return obj[name];
},
set: function(v) {
log(‘set’, name, obj, v);
obj[name] = v;
},
// copy attributes from pd
});
});
return proxy;
}


Logging: static ES5 “proxies”
var proxy = Object.create(Object.getProtoypeOf(obj), {});
Object.getOwnPropertyNames(obj).forEach(function(name) {
var pd = Object.getOwnPropertyDescriptor(obj, name);
Object.defineProperty(proxy, name, {
get: function() {

},
return obj[name];
• proxy doesn’t reﬂect
set: function(v) { structural changes made to ‘obj’
log(‘set’, name, obj, v);
obj[name] = v;
• structural changes made to
},
proxy are not reﬂected in ‘obj’
// copy attributes from pd • structural changes:
});
});
• add/delete properties
return proxy; • change property attributes
}


Logging: dynamic (harmony) proxies
var proxy = Proxy.create({
get: function(rcvr, name) {
return obj[name];
},
set: function(rcvr, name, val) {
log(‘set’, name, obj, val);
obj[name] = val;
return true;
},
...
}, Object.getPrototypeOf(obj));
return proxy;
}


Logging: dynamic (harmony) proxies
var proxy = Proxy.create({
get: function(rcvr, name) {
log(‘get’, name, obj); handler
return obj[name];
},
set: function(rcvr, name, val) { meta
log(‘set’, name, obj, val);
base
obj[name] = val;
return true;
},
... proxy
}, Object.getPrototypeOf(obj));
return proxy;
}


Stratiﬁed API
var proxy = Proxy.create(handler, proto);

handler

meta
base

proxy


Stratiﬁed API

handler.get(proxy, ‘foo’)
handler

meta
base
proxy.foo

proxy


Stratiﬁed API

handler
handler.set(proxy, ‘foo’, 42)

meta
base
proxy.foo
proxy.foo = 42

proxy


Stratiﬁed API

handler

handler.get(proxy, ‘foo’).apply(proxy,[1,2,3])

meta
base
proxy.foo
proxy.foo = 42
proxy.foo(1,2,3) proxy


Stratiﬁed API

handler


handler.get(proxy, ‘get’) meta
base
proxy.foo
proxy.foo = 42
proxy.foo(1,2,3) proxy
proxy.get


Stratiﬁed API

handler


handler.get(proxy, ‘get’) meta
base
proxy.foo
proxy.foo = 42
proxy.foo(1,2,3) proxy proto
proxy.get


Not just property accesses

handler

meta
base

proxy



handler.has(‘foo’)

handler

meta
base

‘foo’ in proxy

proxy




handler.delete(‘foo’)

handler

meta
base

‘foo’ in proxy

delete proxy.foo proxy




var props = handler.enumerate();
handler
for (var i=0;i<props.length;i++) {
var prop = props[i]; ...
}
meta
base

‘foo’ in proxy

for (var prop in proxy) { ... }




var props = handler.enumerate();
handler
for (var i=0;i<props.length;i++) {
var prop = props[i]; ...
}
handler.defineProperty(‘foo’, pd) meta
base

‘foo’ in proxy

for (var prop in proxy) { ... }

Object.defineProperty(proxy,‘foo’, pd)


But not quite everything, either

handler

meta
base

proxy



handler

meta
base

proxy === obj

proxy



handler

meta
base

proxy === obj

Object.getPrototypeOf(proxy) => proto proxy proto



handler

meta
base

proxy === obj

proxy instanceof SomeFunction



handler

meta
base

proxy === obj

proxy instanceof SomeFunction

typeof proxy => “object”


Full Handler API
handler

proxy

Object.getOwnPropertyDescriptor(proxy) handler.getOwnPropertyDescriptor(name)
Object.getPropertyDescriptor(proxy) handler.getPropertyDescriptor(name)
Object.defineProperty(proxy,name,pd) handler.defineProperty(name, pd)
Object.getOwnPropertyNames(proxy) handler.getOwnPropertyNames()
delete proxy.name handler.delete(name)
for (name in proxy) { ... } handler.enumerate()
Object.{freeze|seal|...}(proxy) handler.fix()
name in proxy handler.has(name)
({}).hasOwnProperty.call(proxy, name) handler.hasOwn(name)
receiver.name handler.get(receiver, name)
receiver.name = val handler.set(receiver, name, val)
Object.keys(proxy) handler.keys()
for (name in proxy) { ... } handler.iterate()


Fundamental vs Derived Traps
handler

proxy

Fundamental traps
for (name in proxy) { ... } handler.enumerate() -> [string]

Derived traps
for (name in proxy) { ... } handler.iterate() -> iterator


Function Proxies
JavaScript functions are objects. Additionally,
they are also callable and constructible
var call = function() { ... };
var construct = function() { ... };
var funproxy = Proxy.createFunction(handler, call, construct);

handler
call construct

funproxy


Function Proxies

call(1,2,3) handler
call construct

funproxy(1,2,3)

funproxy


Function Proxies

call(1,2,3) handler
call construct
construct(1,2,3)

funproxy(1,2,3)

new funproxy(1,2,3)
funproxy


Function Proxies

call(1,2,3) handler
call construct
construct(1,2,3)
handler.get(funproxy,‘prototype’)

funproxy(1,2,3)

new funproxy(1,2,3)

funproxy.prototype funproxy


Function Proxies

call(1,2,3) handler
call construct
construct(1,2,3)

funproxy(1,2,3)

new funproxy(1,2,3)

typeof funproxy => “function”


Function Proxies

call(1,2,3) handler
call construct
construct(1,2,3)

funproxy(1,2,3)

new funproxy(1,2,3)

typeof funproxy => “function”
Object.getPrototypeOf(funproxy) => Function.prototype

Dilemma: Invoke vs Get+Call
• Fundamental vs derived traps = tradeoff in
performance (method allocation or caching)
vs. consistency
var p = Proxy.create({
get: function(receiver, name) { ... },
invoke: function(receiver, name, args) { ... },
...
});

p.x; // get(p,'x')
p.m(a); // invoke(p, 'm', [a])

• invoke can intercept arguments
• but notably, JS methods can be extracted as
functions and called later (functional FTW!)
• breaks invariant o.m.call(o) <=> o.m()

Selective Interception

meta
base

object



VM territory (C++)

meta
base

object

JavaScript territory



VM territory (C++)
VM handler

meta
base

object




VM territory (C++)
VM handler VM handler

meta
base

host object object




VM territory (C++)
VM handler VM handler handler

meta
base

host object object proxy




VM territory (C++) Self-hosted
VM handler VM handler handler

meta
base

host object object proxy



Example: no-op forwarding proxy
handler

function ForwardingHandler(obj) {
this.target = obj; proxy target
}
ForwardingHandler.prototype = {
  has: function(name) { return name in this.target; },
  get: function(rcvr,name) { return this.target[name]; },
  set: function(rcvr,name,val) { this.target[name]=val;return true; },
  delete: function(name) { return delete this.target[name]; }
  enumerate: function() {
   var props = [];
for (name in this.target) { props.push(name); };
return props;
  },
...
}

var proxy = Proxy.create(new ForwardingHandler(o),
   Object.getPrototypeOf(o));

Example: counting property access
function makeSimpleProfiler(target) {
var forwarder = new ForwardingHandler(target);
var count = Object.create(null);
forwarder.get = function(rcvr, name) {
count[name] = (count[name] || 0) + 1;
return this.target[name];
};
return {
proxy: Proxy.create(forwarder,
Object.getPrototypeOf(target)),
get stats() { return count; }
}
}


Example: counting property access
function makeSimpleProfiler(target) {
var forwarder = new ForwardingHandler(target);
var count = Object.create(null);
forwarder.get = function(rcvr, name) {
count[name] = (count[name] || 0) + 1;
return this.target[name];
};
return {
proxy: Proxy.create(forwarder,
Object.getPrototypeOf(target)),
get stats() { return count; }
}
}

var subject = { ... };
var profiler = makeSimpleProfiler(subject);
runApp(profiler.proxy);
display(profiler.stats);


Fixing a Proxy

handler

meta
base

proxy


Fixing a Proxy

handler

meta
base

Object.freeze(proxy)

Object.seal(proxy)
proxy
Object.preventExtensions(proxy)


Fixing a Proxy

var pdmap = handler.fix();
if (pdmap === undefined) throw TypeError(); handler
become(proxy,
Object.freeze(
Object.create(proto, pdmap)));
meta
base


Object.seal(proxy)
proxy


Fixing a Proxy

if (pdmap === undefined) throw TypeError(); handler
become(proxy,
Object.freeze(
meta
base


Object.seal(proxy)
proxy

ﬁx
Trapping Fixed

Fixing a Proxy

if (pdmap === undefined) throw TypeError();
become(proxy,
Object.freeze(
meta
base


Object.seal(proxy)
proxy

ﬁx
Trapping Fixed

Meta-level Shifting
handler

proxy
for (name in proxy) { ... } handler.enumerate()
for (name in proxy) { ... } handler.iterate()

base-level: many operations meta-level: all operations reiﬁed as
on objects invocations of traps


Meta-level Shifting
a proxy whose μhandler

handler is a proxy
handler

handler.getOwnPropertyDescriptor(name) μhandler.get(handler, ‘getOwnP..’)(name)
handler.getPropertyDescriptor(name) μhandler.get(handler, ‘getProp..’)(name)
handler.defineOwnProperty(name, pd) μhandler.get(handler, ‘define...’)(name,pd)
handler.delete(name) μhandler.get(handler, ‘delete’)(name)
handler.getOwnPropertyNames() μhandler.get(handler, ‘getOwnP..’)()
handler.enumerate() μhandler.get(handler, ‘enumerate’)()
handler.fix() μhandler.get(handler, ‘fix’)()
handler.has(name) μhandler.get(handler, ‘has’)(name)
handler.hasOwn(name) μhandler.get(handler, ‘hasOwn’)(name)
handler.get(receiver, name) μhandler.get(handler, ‘get’)(receiver,name)
handler.set(receiver, name, val) μhandler.get(handler, ‘set’)(receiver,name,val)
handler.keys() μhandler.get(handler, ‘keys’)()
handler.iterate() μhandler.get(handler, ‘iterate’)()

meta-level: all operations reiﬁed as meta-meta-level: all operations
invocations of traps reiﬁed as invocations of ‘get’ trap


Example: Membranes
• Firefox security wrappers (anti-XSS, XUL, etc.)
• Google Caja: capability-secure subset
• Object-capability model: an object is powerless
unless given a reference to other objects
• References can be made revocable through a
membrane


Example: Membranes
function makeSimpleMembrane(initTarget) {
var enabled = true;

}


Example: Membranes
var enabled = true;

return {
wrapper: wrap(initTarget),
revoke: function() { enabled = false; }
};
}


Example: Membranes
  var enabled = true;

  function wrap(target) {
   if (Object.isPrimitive(target)) { return target; }
   var baseHandler = new ForwardingHandler(target);
   var revokeHandler = Proxy.create({
   get: function(rcvr, name) { return wrapFunction(baseHandler[name]); }
   });

  }
  return {
};
}


Example: Membranes
  var enabled = true;

   });

if (typeof target === “function”) {
return Proxy.createFunction(revokeHandler, wrapFunction(target));
}
   return Proxy.create(revokeHandler, wrap(Object.getPrototypeOf(target)));
  }
  return {
};
}


Example: Membranes
  var enabled = true;
function wrapFunction(f) {
   return function() { // variable-argument function
if (!enabled) { throw new Error("revoked"); }
   return wrap(f.apply(wrap(this), arguments.map(wrap)));
}
}
   });

if (typeof target === “function”) {
return Proxy.createFunction(revokeHandler, wrapFunction(target));
}
   return Proxy.create(revokeHandler, wrap(Object.getPrototypeOf(target)));
  }
  return {
};
}


Prior Work

handler

meta
base

proxy


Prior Work

handler mirror ProxyHandler InvocationHandler

meta
base

proxy mirage proxy java.lang.reﬂect.Proxy


Prior Work

handler mirror ProxyHandler InvocationHandler

meta
base

proxy mirage proxy java.lang.reﬂect.Proxy

# traps 13 30 3 1


Making JavaScript Extensible

• Extending JavaScript today: “Host objects”
(the IE DOM; anything implemented in C++)
• Proxies are sufﬁciently powerful to emulate most
of the behavior of host objects in JavaScript itself
• Two possible avenues to close the gap:
• Make proxies even more powerful
• Make host objects only as powerful as proxies

Status

• Presented at ECMA TC-39 meetings
• Approved for inclusion in ES-Harmony
• http://wiki.ecmascript.org/doku.php?
id=harmony:proxies
• In Firefox 4 already, thanks to Andreas Gal!
• The basis of all of Gecko’s security wrappers
• Used by Zaphod (Narcissus as JS engine add-on,
source at http://github.com/taustin/Zaphod/)


Lessons for Web Standards
• Standards need savvy academic research
• Standards must evolve quickly on the Web
• They can’t evolve without prototype trials
• These experiments need tons of user-testing
• To reach users at scale, prototypes must ship
• Ecma TC39 committed to prototyping specs
before ﬁnalizing standards
• Committee members work together, no
blind-siding, to uphold Harmony (it’s social!)


Micro-benchmark Results


Micro-benchmark: Overhead


Proxies: Summary

• Proxies enable:

• Generic wrappers: access control, profiling,
adaptors, test injection, etc.

• Virtual objects: persistent objects, remote objects,
emulated host objects, ...

• API:

• Robust: stratified, not all operations intercepted

• Secure: can’t trap non-proxy or fixed objects

• Performance: no overhead for non-proxy objects


Conclusions

• ES5 provides new meta-programming APIs
• ES-Harmony Proxies: robust dynamic meta-
programming for virtual objects, wrappers
• Proxies help put developers in control of
extending JavaScript, instead of Ecma TC39
• JavaScript: the Revenge of Smalltalk!


Proxies are Awesome!

More Related Content

Proxies are Awesome!