1. Caja"KA-ha” yiminghe@gmail.com 承玉 2011-09-20 Draft

2. Outline Background Caja Introduction Caja Internal Learn By Example

3. Javascriptis dangerous ?

4. Stealing cookies

5. DDOS Make requests to your server

6. Expose all information See what it should not see

7. Load viral script Can load any number viral scripts as it want

8. Forge id Ask for information from user as your id

9. Finnally Leak Send what it got to remote server

10. So ?

11. But

12. Caja Comes HTML , CSS , JavaScript Security Object Capability Javascript Safe subset of javascript Related Microsoft Web Sandbox FBJS YAHOO! Adsafe

13. Sanitize

14. YAP

15. Make app safe

16. Object Capabilty Caja use object-capability security model

17. What does it mean other callee caller Caller can call callee by reference Caller can not call other in global namespace

18. How to get reference creation or introduction

19. Internals Backend frontend

20. backend Rewrite source code to allow runtime check

21. frontend Runtime check at browser Object properties descriptor enhance Global prevent Wrap native DOM Iframed isolation

22. Iframed isolation

23. frontend

24. Learn By Example

25. Simple example Sourcecode this.x=1;window.alert(2); Issues ?

26. Compiled code: ___.loadModule({ 'instantiate':function(___, IMPORTS___){ vardis___ = IMPORTS___; varmoduleResult___, x0___; moduleResult___ = ___.NO_RESULT; dis___.x_w___ ===dis___?(dis___.x= 1):dis___.w___('x', 1); moduleResult___ =(x0___ =IMPORTS___.window_v___?IMPORTS___.window: ___.ri(IMPORTS___,'window'), x0___.alert_m___? x0___.alert(2): x0___.m___('alert',[ 2 ])); returnmoduleResult___; },

27. Little note IMPORTS__ : runtime environment *_w__ : whether allowed to write w__ : intercept writing v__ : intercept getting *_m__ : whether allowed to call method m__ : intercept method

28. DOM example Source code document.body.style=‘color:red’; Issues ?

29. compiled vardis___ = IMPORTS___; varmoduleResult___, x0___, x1___; moduleResult___ = ___.NO_RESULT; moduleResult___ =(x1___ =(x0___ =IMPORTS___.document_v___? IMPORTS___.document: ___.ri(IMPORTS___,'document'), x0___.body_v___? x0___.body: x0___.v___('body')), x1___.style_w___ === x1___?(x1___.style ='color:red'): x1___.w___('style', 'color:red')); returnmoduleResult___;

30. Import KISSY Inject KISSY into IMPORT__ Source: KISSY.DOM.addClass(el,"x");

31. compiled vardis___ = IMPORTS___; varmoduleResult___, x0___, x1___, x2___; moduleResult___ = ___.NO_RESULT; moduleResult___ =(x1___ =(x0___ =IMPORTS___.KISSY_v___? IMPORTS___.KISSY: ___.ri(IMPORTS___,'KISSY'), x0___.DOM_v___? x0___.DOM: x0___.v___('DOM')), x2___ =IMPORTS___.el_v___? IMPORTS___.el: ___.ri(IMPORTS___,'el'), x1___.addClass_m___? x1___.addClass(x2___,'x'): x1___.m___('addClass',[ x2___,'x'])); returnmoduleResult___;

32. How Tell IMPORTS__ to recognize KISSY.DOM.addClass as a function frameGroup.makeES5Frame(document.getElementById("theGadget2"), {/* Grant this gadget no network access */}, function(frame){ // Load and run the gadget frame.contentCajoled(code) .run({ KISSY:frameGroup.tame({ DOM:frameGroup.markFunction(function(){}) }) }); });

33. Import others Class : Anim Instance method : Anim.proto.run Class : EventObject Intance member : EventObject.proto.target …etc

34. Demo

35. Refer Caja http://code.google.com/p/google-caja/ YAP http://developer.yahoo.com/yap/guide/caja-support.html http://developer.yahoo.com/yap/guide/what-are-cajas-limitations.html TAOBAO SHOP http://shopxxx.taobao.com

36. Thank you