Exposing a part of your DOM to arbitrary code

How come there's no built-in to expose DOM control to arbitrary code - or at least not safely? Is it even possible?
In this talk, I will cover all of the pathways I discovered in a quest to extensive modularity.

Transcript

1. E x p o s i n g a p a r t o f y o u r D O M t o a r b i t r a r y c o d e by
2. Int r od ucti o n :: About me J u l i e t t e W a n g ( s h e / h e r ) https://immjs.de Currently working on: h https://github.com/cathodique https://monopoly-eco.system
3. Why em bed JS c ode? Int r odu cti on
4. Sa fe J S exec ution primit ives Int r odu cti on
5. The < iframe > t a g Giv e it a d iff e ren t or igi n , and t here y ou go! In trod uction :: Sa fe ex e c ution prim itive s [1/2 ]
6. Worker primiti ve In trod uction :: Sa fe ex e c ution prim itive s [2/2 ]
7. Worker primiti ve In trod uction :: Sa fe ex e c ution prim itive s [2/2 ]
8. Worker primiti ve *Workers are always s a m e-origin In trod uction :: Sa fe ex e c ution prim itive s [2/2 ]
9. Worker primiti ve *Workers are always s a m e-origin In trod uction :: Sa fe ex e c ution prim itive s [2/2 ] / / I n s a m e . o r i g i n . c o m / m a i n . j s n e w W o r k e r ( ˝ h t t p s : / / d i f f . o r i g i n . c o m / w o r k e r . j s ˛ ) ; S e c u r i t y E r r o r : C o n t e n t a t h t t p s : / / s a m e . o r i g i n . c o m / m a y n o t l o a d d a t a f r o m h t t p s : / / d i f f . o r i g i n . c o m / w o r k e r . j s
10. Worker primiti ve *Workers are always s a m e-origin In trod uction :: Sa fe ex e c ution prim itive s [2/2 ] / / I n s a m e . o r i g i n . c o m / m a i n . j s n e w W o r k e r ( ˝ h t t p s : / / s a m e . o r i g i n . c o m / w o r k e r . j s ˛ ) ; / / I n s a m e . o r i g i n . c o m / w o r k e r . j s / / [ r e d a c t e d f o r b r e v i t y ] f e t c h ( ˝ h t t p s : / / s a m e . o r i g i n . c o m / c h a n g e p w d ˛ , { m e t h o d : ˝ P O S T ˛ , b o d y : J S O N . s t r i n g i f y ( n e w P a s s w o r d : ˝ p w n e d - : 3 ˛ , ) , } , ) ; POST ht tps://same. origin.com/changep wd
11. Worker primiti ve *Workers are always s a m e-origin In trod uction :: Sa fe ex e c ution prim itive s [2/2 ] / / I n s a m e . o r i g i n . c o m / m a i n . j s n e w W o r k e r ( ˝ h t t p s : / / s a m e . o r i g i n . c o m / w o r k e r . j s ˛ ) ; / / I n s a m e . o r i g i n . c o m / w o r k e r . j s d e l e t e W o r k e r G l o b a l S c o p e . p r o t o t y p e . f e t c h ; / / [ r e d a c t e d f o r b r e v i t y ] f e t c h ( ˝ h t t p s : / / s a m e . o r i g i n . c o m / c h a n g e p w d ˛ , { m e t h o d : ˝ P O S T ˛ , b o d y : J S O N . s t r i n g i f y ( n e w P a s s w o r d : ˝ p w n e d - : 3 ˛ , ) , } , ) ; Ex cep tio n: Ref er ence Er ror: f etc h i s n ot def in ed
12. Worker primiti ve *Workers are always s a m e-origin ** ** But , i tˇs JS! We ca n r emo ve th e p rob lem ati c A PIs . (W ha t a b ea uti ful langu age ... ) In trod uction :: Sa fe ex e c ution prim itive s [2/2 ]
13. Embed d i n g JS co d e: do ne Int r odu cti on
14. Prior Art Pri or Art
15. Prior Art < i f r a m e / > a s i t s h o u l d b e u s e d
16. Prior Art [ 1/4 ] < i f r a m e / > a s i t s h o u l d b e u s e d Pros Properly isolated for cross-origin Capa ble o f sandbox i n g to some e x t e n t Cons Heavy If y ou n est t he m, th e sa nd box in g is pr o paga t ed T h e f a c t t h a t t h e D O M i s n o t y o u r s , c a n p o t e n t i a l l y m a k e s o m e t h i n g s d i f f i c u l t .
17. Prior Art [ 2/4 ] Sho p ifyˇ s remot e-ui
18. Prior Art [ 2/4 ] Sho p ifyˇ s remot e-ui hi dd en if ra me
19. Prior Art [ 2/4 ] Sho p ifyˇ s remot e-ui hi dd en if ra me po stM ess age
20. Prior Art [ 2/4 ] Sho p ifyˇ s remot e-ui Pros Suppo rt spef i c ically f or w eb c o mpo n ent s Not pron e to a v aila bil i ty a t tack s Pr oper ly iso l a ted b y c r o s s - o r igi n A b l e t o n e s t D O M e l e m e n t s w i t h o u t i m p a c t i n g p e r m i s s i o n s Cons H e a v y ( B u t l e s s h e a v y t h a n i f r a m e s i f y o u h a v e o n e i f r a m e t h a t m a n a g e s m u l t i p l e D O M e l e m e n t s ) U n a b l e t o f o r w a r d D O M e v e n t s ( I t ˇ s p o s s i b l e , j u s t n o t d o n e b y r e m o t e - u i ) DOM element s ize is not syncˇd (U nm ai nt ai ne d. .. )
21. Prior Art [ 2/4 ] AMPˇ s Wo r k erD O M
22. Prior Art [ 2/4 ] AMPˇ s Wo r k erD O M wor ker d o c u m e n t : d o c u m e n t p o l y f i l l w i n d o w : w i n d o w p o l y f i l l E l e m e n t : E l e m e n t p o l y f i l l a n d s o o n . . .
23. Prior Art [ 3/4 ] AMPˇ s Wo r k erD O M work er d o c u m e n t + ™ p | + ™ T e x t n o d e + ™ p | + ™ T e x t n o d e + ™ i m g + ™ d i v + ™ i n p u t + ™ b u t t o n + ™ T e x t n o d e
24. Prior Art [ 3/4 ] AMPˇ s Wo r k erD O M work er doc ument
25. Prior Art [ 3/4 ] AMPˇ s Wo r k erD O M work er d o c u m e n t + ™ i m g
26. Prior Art [ 3/4 ] AMPˇ s Wo r k erD O M work er d o c u m e n t + ™ i m g + ™ p
27. Prior Art [ 3/4 ] AMPˇ s Wo r k erD O M work er d o c u m e n t + ™ i m g ( + ™ p ( + ™ T e x t n o d e
28. Prior Art [ 3/4 ] AMPˇ s Wo r k erD O M work er d o c u m e n t + ™ i m g ( + ™ p ( + ™ T e x t n o d e ( + ™ b r
29. Prior Art [ 3/4 ] AMPˇ s Wo r k erD O M work er d o c u m e n t + ™ i m g ( + ™ p ( + ™ T e x t n o d e ( + ™ b r ( + ™ T e x t n o d e
30. Prior Art [ 3/4 ] AMPˇ s Wo r k erD O M work er d o c u m e n t + ™ i m g ( + ™ p ( + ™ T e x t n o d e ( + ™ b r ( + ™ T e x t n o d e post Messa ge
31. Prior Art [ 3/4 ] AMPˇ s Wo r k erD O M Pros Not pron e to a v aila bil i ty a t tack s Su pp ort spe cif i cal l y for p aralle l ism Very ligh tweight a n d f ast Cons Ever- evolving HT M L /DOM spec . . . . . . w h i c h m e a n s t h a t a c t u a l l y , y e s , U n m a i n t a i n e d i s a n i s s u e h e r e U n a b l e t o s y n c h r o n o u s l y c a l l s o m e t h i n g s l i k e g e t C l i e n t B o u n d i n g R e c t a n d g e t C o m p u t e d S t y l e ( M a y b e f o r t h e b e t t e r ? )
32. Prior Art [ 3/4 ] .. .
33. Prior Art [ 4/4 ] JS Inter p r eter in J S
34. Prior Art [ 4/4 ] JS Inter p r eter in J S
35. Prior Art [ 4/4 ] JS Inter p r eter in J S Pros S m a l l e r a t t a c k s u r f a c e ( W h i t e l i s t b a s i s i n s t e a d o f b l a c k l i s t ) Ha s re alm -li ke a dvan ta ges Availab i l i t y attack s pr eve n tab l e Cons I m p l e m e n t a t i o n i s l a g g i n g a l i t t l e b e h i n d ( S u p p o r t s u p t o E S 5 c o d e ) Up t o 4 00x s lo wer
36. R e a l i s t i c w a y s t o e x p o s e a p a r t o f y o u r D O M t o a r b i t r a r y c o d e
37. R e a l i s t i c w a y s t o e x p o s e a p a r t o f y o u r D O M t o a r b i t r a r y c o d e
38. R e a l i s t i c w a y s t o e x p o s e a p a r t o f y o u r D O M t o a r b i t r a r y c o d e C o m m i t t i n g J a v a S c r i p t W a r C r i m e s i n o r d e r t o f a i l t w i c e a t s o l v i n g t h i s p r o b l e m
39. Same -Or i gin I fr ame Resear ch :: Sa me Or igi n I fram e [1/ 2]
40. Same -Or i gin I fr ame Ac ts l ik e a R ealm Resear ch :: Sa me Or igi n I fram e [1/ 2]
41. Resear ch :: Sa me Or igi n I fram e [1/ 2] *We canˇt nu ke e v ery th ing i n t e r f a c e W i n d o w : E v e n t T a r g e t { / / t h e c u r r e n t b r o w s i n g c o n t e x t [ L e g a c y U n f o r g e a b l e ] r e a d o n l y a t t r i b u t e W i n d o w P r o x y w i n d o w ; / / . . . [ L e g a c y U n f o r g e a b l e ] r e a d o n l y a t t r i b u t e D o c u m e n t d o c u m e n t ; / / . . . [ P u t F o r w a r d s = h r e f , L e g a c y U n f o r g e a b l e ] r e a d o n l y a t t r i b u t e L o c a t i o n l o c a t i o n ; / / . . . [ L e g a c y U n f o r g e a b l e ] r e a d o n l y a t t r i b u t e W i n d o w P r o x y ? t o p ; ( / / . . . ( } ;
42. Your ˝host˛ frame @ same.origin.com Th eir ˝ar bi trar y c ode˛ i fram e @ sam e.origin. com wi ndo w.t op .doc um ent. wr ite( ˝ pwned :3˛); Resear ch :: Sa me Or igi n I fram e [1/ 2]
43. Resear ch :: Sa me Or igi n I fram e [1/ 2] Top frame @ dummy .ori gin.com Your ˝host˛ frame @ same.origin.com Th eir ˝ar bi trar y c ode˛ i fram e @ sam e.origin. com wi ndo w.t op .doc um ent. wr ite( ˝ pwned :3˛); Breaks Same Origin P olicy
44. Resear ch :: Sa me Or igi n I fram e [1/ 2] / / I n m a i n . j s c o n s t s o m e E l e m e n t = d o c u m e n t . q u e r y S e l e c t o r ( ˝ . s a n d b o x ˛ ) ; s e n d T o A r b i t r a r y C o d e ( s o m e E l e m e n t ) ; / / I n a r b i t r a r y . j s w i n d o w . o n E l e m e n t S e n t = ( e l m ) = > { e l m . p a r e n t N o d e . p a r e n t N o d e . w r i t e ( ˝ p w n e d : 3 ˛ ) ; } ;
45. Resear ch :: Sa me Or igi n I fram e [1/ 2] / / I n m a i n . j s c o n s t s o m e E l e m e n t = d o c u m e n t . q u e r y S e l e c t o r ( ˝ . s a n d b o x ˛ ) ; s e n d T o A r b i t r a r y C o d e ( s o m e E l e m e n t ) ; / / I n a r b i t r a r y . j s w i n d o w . o n E l e m e n t S e n t = ( e l m ) = > { e l m / / E l e m e n t . p a r e n t N o d e / / E l e m e n t . p a r e n t N o d e / / E l e m e n t . w r i t e ( ˝ p w n e d : 3 ˛ ) ; } ;
46. Resear ch :: Sa me Or igi n I fram e [1/ 2] / / I n m a i n . j s c o n s t s o m e E l e m e n t = d o c u m e n t . q u e r y S e l e c t o r ( ˝ . s a n d b o x ˛ ) ; c o n s t p r o x i f y = ( e l ) = > n e w P r o x y ( e l , { g e t ( o b j , p r o p ) { c o n s t v a l = o b j [ p r o p ] ; i f ( i s S a f e T o P r o v i d e ( v a l ) ) r e t u r n v a l ; r e t u r n n u l l ; } , } ) ; s e n d T o A r b i t r a r y C o d e ( p r o x i f y ( s o m e E l e m e n t ) ) ; / / I n a r b i t r a r y . j s w i n d o w . o n E l e m e n t S e n t = ( e l m ) = > { e l m / / P r o x y . p a r e n t N o d e / / E l e m e n t . p a r e n t N o d e / / E l e m e n t . w r i t e ( ˝ p w n e d : 3 ˛ ) ; } ;
47. Resear ch :: Sa me Or igi n I fram e [1/ 2] / / I n m a i n . j s c o n s t s o m e E l e m e n t = d o c u m e n t . q u e r y S e l e c t o r ( ˝ . s a n d b o x ˛ ) ; c o n s t p r o x i f y = ( e l ) = > n e w P r o x y ( e l , { g e t ( o b j , p r o p ) { c o n s t v a l = o b j [ p r o p ] ; i f ( i s S a f e T o P r o v i d e ( v a l ) ) r e t u r n v a l ; r e t u r n n u l l ; } , } ) ; s e n d T o A r b i t r a r y C o d e ( p r o x i f y ( s o m e E l e m e n t ) ) ; / / I n a r b i t r a r y . j s w i n d o w . o n E l e m e n t S e n t = ( e l m ) = > { e l m / / P r o x y . p a r e n t N o d e / / E l e m e n t . p a r e n t N o d e / / E l e m e n t . w r i t e ( ˝ p w n e d : 3 ˛ ) ; } ;
48. Resear ch :: Sa me Or igi n I fram e [1/ 2] / / I n m a i n . j s c o n s t s o m e E l e m e n t = d o c u m e n t . q u e r y S e l e c t o r ( ˝ . s a n d b o x ˛ ) ; c o n s t p r o x i f y = ( e l ) = > n e w P r o x y ( e l , { g e t ( o b j , p r o p ) { c o n s t v a l = o b j [ p r o p ] ; i f ( i s S a f e T o P r o v i d e ( v a l ) ) { i f ( i s P r i m i t i v e ( v a l ) ) r e t u r n v a l ; e l s e r e t u r n p r o x i f y ( v a l ) ; } r e t u r n n u l l ; } , } ) ; s e n d T o A r b i t r a r y C o d e ( p r o x i f y ( s o m e E l e m e n t ) ) ; / / I n a r b i t r a r y . j s w i n d o w . o n E l e m e n t S e n t = ( e l m ) = > { e l m . p a r e n t N o d e . p a r e n t N o d e . w r i t e ( ˝ p w n e d : 3 ˛ ) ; } ;
49. Resear ch :: Sa me Or igi n I fram e [1/ 2] / / I n m a i n . j s c o n s t s o m e E l e m e n t = d o c u m e n t . q u e r y S e l e c t o r ( ˝ . s a n d b o x ˛ ) ; c o n s t p r o x i f y = ( e l ) = > n e w P r o x y ( e l , { g e t ( o b j , p r o p ) { c o n s t v a l = o b j [ p r o p ] ; i f ( i s S a f e T o P r o v i d e ( v a l ) ) { i f ( i s P r i m i t i v e ( v a l ) ) r e t u r n v a l ; e l s e r e t u r n p r o x i f y ( v a l ) ; } r e t u r n n u l l ; } , } ) ; s e n d T o A r b i t r a r y C o d e ( p r o x i f y ( s o m e E l e m e n t ) ) ; / / I n a r b i t r a r y . j s w i n d o w . o n E l e m e n t S e n t = ( e l m ) = > { e l m / / P r o x y . p a r e n t N o d e / / P r o x y . p a r e n t N o d e / / n u l l . w r i t e ( ˝ p w n e d : 3 ˛ ) ; } ; Ex cept ion: Typ eEr ror : can 't acc ess p rop ert y " w r ite " o f n u l l
50. Resear ch :: Sa me Or igi n I fram e [1/ 2] The Rec urs ive P rox y
51. Resear ch :: Sa me Or igi n I fram e [1/ 2] Same -Or i gin I fr ame Pros ˝Eas y˛ i mplemen tation Cons Avai lability attack s Sa me-o rig in St il l hea vy ( Sa me hea v ine ss a s r emo t e-u i) The who le ˝ To p f ram e @ dum my. ori gin .co m You r ˝ host˛ fr ame @ sa me.or igi n.com The ir ˝a rbitr ary co de˛ i frame @ sam e.ori gin.c om wi nd ow .t op .d oc um ent .w ri te (˝ pw ne d : 3˛ ); ˛ ord eal
52. Res e a rch :: W or ker B locki ng Re cursi ve P roxy [2/2] W o r k e r B l o c k i n g R e c u r s i v e P r o x y
53. Res e a rch :: W or ker B locki ng Re cursi ve P roxy [2/2] W o r k e r B l o c k i n g R e c u r s i v e P r o x y ˝W or kers can ˇ t co mmu nica t e s y nch ron ous ly˛ * *Lie
54. Re sear ch :: Worker Bl o cki ng R ec urs iv e Pr oxy [ 2/ 2 ] :: Sync comm unica tion At omic s.wait( ty ped Ar ra y, ind ex, va lue ) T h e A t o m i c s . w a i t ( ) s t a t i c m e t h o d v e r i f i e s t h a t a s h a r e d m e m o r y l o c a t i o n c o n t a i n s a g i v e n v a l u e a n d i f s o s l e e p s , a w a i t i n g a w a k e - u p n o t i f i c a t i o n o r a t i m e o u t . I t r e t u r n s [ . . . ] " o k " i f w o k e n b y A t o m i c s . n o t i f y ( ) .
55. Sh are dArr Bu ffer Ar bi tra ry co de Mai n fr am e Store the re su lt Ato mics. wait Read the result pos tMessag e po stMe ssa ge w/ At omi cs. no tify d o c u m e n t / / P r o x y ( o b j I d : 1 ) . b o d y / / . . . d o c u m e n t / / P r o x y ( o b j I d : 1 ) . b o d y / / P r o x y ( o b j I d : 2 ) Re sear ch :: Worker Bl o cki ng R ec urs iv e Pr oxy [ 2/ 2 ] :: Sync comm unica tion
56. Res e a rch :: W or ker B locki ng Re cusri ve P roxy [2/2] Wo rk er [ ...] h ack Pros A p p a r e n t l y t h e S h a r e d - A r r a y - B u f f e r p r i m i t i v e i s f a s t e r t h a n p o s t M e s s a g e ? Cons E v e r y s i n g l e p r o p e r t y a c c e s s o f a n o b j e c t f r o m m a i n t a k e s 0 . 5 m s t o c o m p l e t e I c o u l d n ˇ t p i c t u r e a n y o n e a c t u a l l y u s i n g t h i s i n p r o d u c t i o n
57. Resear ch :: Ne xt st eps forwa rd Ne x t st eps for w a r d ?
58. Res e ar ch : : Next steps fo rw ar d :: JS i nt er pr et er on WA SM [ 1/3] JS i nte r pre ter on WA SM
59. Res e ar ch : : Next steps fo rw ar d :: JS i nt er pr et er on WA SM [ 1/3] JS i nte r pre ter on WA SM So ught gai ns Sa me advan t a ges t han J S i nte rpr e ter i n J S Spe e d thatˇ s sim i lar t o j us t r u nni n g JS on b are m etal Po ten tia l cha lle nge s Property access will be throttled by W A S I ˇ s s p e e d Lots o f work
60. Resear ch :: Ne xt st eps forwa rd :: Wor kerDOM + my hack [2 /3] Wor k er DOM + my hack
61. Resear ch :: Ne xt st eps forwa rd :: Wor kerDOM + my hack [2 /3] Wor k er DOM + my hack So ught gai ns C o u l d i n t e l l i g e n t l y r e f r a i n f r o m g e t t i n g s o m e t h i n g s s y n c h r o n o u s l y Sam e a dvant age s as W o rkerDOM Po ten tia l cha lle nge s Sync communica tion prim i t ive is s t ill s l o w B e c a u s e s o m e t h i n g s c o u l d r e q u i r e s y n c c o m m u n i c a t i o n , e v e r y c h a n g e ( s e t , a p p l y ) t o a n e l e m e n t h a s t o b e c o m m u n i c a t e d s y n c h r o n o u s l y
62. Re sear ch :: N ex t s te ps f o rward :: P otent ial br ow ser i mpl em ent at ion [ 3/3 ] JS-na t i v e imple m ent at io n P r e t t y p l e a s e , t c 3 9 ? ( ( O r F i g m a , i f y o u ˇ d w a n t t o c h a m p i o n i t ? )
63. Re sear ch :: N ex t s te ps f o rward :: P otent ial br ow ser i mpl em ent at ion [ 3/3 ] JS-na t i v e imple m ent at io n So ught gai ns Nativ e s pee d Na tiv e secu rity Po ten tia l cha lle nge s Pro babl y ho w to han dle p arall eli sm
64. End i ng wor ds Per sonna l ou t look
65. See Als o :: Li terat ure H o w t o b u i l d a p l u g i n s y s t e m o n t h e w e b a n d a l s o s l e e p w e l l a t n i g h t h https://www.figma.com/blog/how-we-built-the-figma-plugin- system/ A b l o g p o s t c o v e r i n g s i m i l a r c o n c e p t s w h e r e y o u n e e d t o e x p o s e J S o b j e c t s i n g e n e r a l i n s t e a d o f D O M e l e m e n t s J a v a S c r i p t , C o n c u r r e n c y , a n d t h e D O M ( J S C o n f U S 2 0 1 8 ) h https://www.youtube.com/watch?v=XyVQfqmx2CI A t a l k a b o u t h o w W o r k e r D O M w o r k s a n d w h a t p r o b l e m i t s e e k s t o s o l v e
66. Se e Al so :: P ro pos al s Int erfac e Typ e s Pr o pos a l fo r Web A ssem b ly h https://github.com/WebAssembly/interface-types A p r o p o s a l f o r W e b A s s e m b l y t o b e a b l e t o d i r e c t l y i n t e r f a c e w i t h D O M e l e m e n t s E C M A S c r i p t s p e c p r o p o s a l f o r S h a d o w R e a l m A P I h https://github.com/tc39/proposal-shadowrealm A p ropos al fo r the Sh a d owR e a lm e xe cuti o n pr i miti v e
67. Qu esti ons? Qu est ions ?
68. Lin k s t o the sl ide s Figm SpeakerDec