 I'm Indian and today I'll be talking about some metaprogramming APIs which are there in JavaScript like object.observe and ES16 proxy. So have you guys heard about object.observe or proxy before? Okay, so these are some of the APIs that's exposed in JavaScript which lets you do some interesting stuff. Let me just give you a brief introduction of what each of them are. So the first is object.observe. So assume you have a normal object say obj and you want to observe some changes that are happening to your object. So what this API does is that it gives you a callback function and as things keep changing that object you can observe the changes in that callback function. So there are different changes that you can observe like if your property gets updated or new property gets added or if a property gets deleted and so on. All these callbacks happen to your function that you specify. So for example after attaching this observer and if I just say obj.ba or equal to 2 then what happens is that your function gets this change notification saying that a new property called bar is added to your object and what is the new value of it and what type it is whether it's an add operation, update operation, delete operation and so on. So this is object.observe and it was mainly created so three people championed it initially and one of the main use cases was that all these MVC frameworks were coming up just then and one of the things that they had to do was to figure out how to keep the model and the view in sync. So one of the normal ways to do this is that you say assume your model is a JavaScript object and you want to observe if the model has changed and if your model has changed I will go and update the view. So Angular has a complex mechanism of dirty checking where it used to see if your model has changed and it will go and update the view for you. So the browser vendors were like especially people from Chrome were like okay why don't we expose this natively from the browser. So that's what they did using object.observe. So yeah it was supposed to be the next big thing everyone was so excited about it. This is a new way for different frameworks used to do this dirty checking in different ways like knockout did it in a different way, embedded it in a different way and people thought once browser vendors expose this it will be a standard way to sort of do this. So Chrome was the first one to ship it, it came out in Chrome 36 some time ago and it was also supposed to be a part of ES 2016 and there was a proposal for it which I think it was in the stage to process approval stage for yeah to get into ES 7 yeah 2016. So and recently there was an update to this proposal so this update basically said that okay we are removing object.observe so that's the next big update. So basically the developers were like so we initially thought Polymer was going to use it but we found out that after Polymer became Polymer became 2.0 we didn't end up using object.observe so I don't think it's really useful and all that and they also gave statistics like I don't think anyone is using this in the while because we Chrome did some telemetry or something and found out less than 1% of the users were using it so I don't think it's really useful and they just pointed us to some polyfills which could polyfill the behavior for object.observe so yeah I don't that shows like even if a feature is supposed to be on the spec it does a proper spec and stuff for it but still it got no kicked out just to the day so I was using this in one of my pieces of code and I started looking at alternatives so this another thing called proxy which is another metaprogramming API and it's been there in Firefox for quite some time as a non-standard feature but it recently got accepted as a feature and I think in Chrome it's behind a flag right now in Canary it's there without a flag and edges already implemented it so this is going to be a standard feature and proxy works in a slightly different way in compared to object.observe so okay forget the handler part of it so assume you want to observe or proxy this target object so what you do with a proxy is that you say I want to new proxy of target which is the object you want to observe and you pass in a handler to it so this handler is an object which can has which can have multiple properties so suppose you have the get property these properties are called traps so these traps means that you want to trap some specific operation on your object so if you implement the get property of it it means that I want to trap all accesses to the object so in this case for example I'm saying if there's someone is trying to access some property of me call my function that's what the get function is saying and I'm basically I'm checking if the property that you're trying to access is already there in the object if it is there return it or just return 37 because why not yeah so pretty interesting stuff can happen because of this so if say p of a equal to 1 and p of b is undefined so if you access p of a p is the proxy here so p of a will be one of course but p of b is undefined now if you check c is in p which basically checks if c is the property of we'll return false because it doesn't have an property c but if you actually go out and print p of c it will print 37 so that's because the proxy seeing that okay the property is not there and I'll return 37 so yeah there are some crazy things that you can do with proxies so yeah so it sort of behaves some things are similar to object.observe so one thing which is different from object.observe and proxy is that when you get notified of your changes so for object.observe the callback is called asynchronously so you just say you want to observe an object and you get notified later on when someone is making changes to it like accessing it or something not access sorry delete or updating it and so on this actually this notification comes at the end of each micro task so without going too much into it's basically when all your JavaScript stack is empty and it's sort of the same time when your promises get resolved something like that so for proxy it's way more powerful than object.observe in the sense that it happens synchronously so if someone is trying to access some property of an object and you can just deny it or something because the proxy basically intercepts it's not just an observer so one thing that's different between object.observe and proxy second thing these are the type of things that you can observe using object.observe which is adding a property update delete when someone changes the property descriptor and setting a different prototype and so on these are the stuff that you can observe with proxy I won't get into all of them but so these are different traps that you can implement so if your object contains any of these keys then it's you can do something with so suppose someone is trying to set a different prototype for your object you can intercept and do something you want at that point so yeah one thing is that you can't observe the window any global object so that's just one caveat that's there but in proxy you can pretty much observe you can proxy almost any object that's there can even proxy an object which is a proxy to another object is a proxy to another object and so on so it's pretty interesting if you actually think about it so yeah there's some neat stuff that you can do so so yeah it seems like proxies can do almost everything that object.observe can but this just this one small thing probably it's a deal breaker for you depending on so suppose if you have a script say you have including jQuery and you want to observe who's using jQuery or like if there's someone know some someone who suppose you don't want anyone to add say a custom property to the jQuery object like you don't want to use any jQuery plugins or something so what you can do is like you will just create an object.observe which you can't anymore because it's replicated and stuff but just to for highlight the difference you can attach a observer to jQuery and say that okay you can keep logging accesses to it but if you have a proxy if someone accesses jQuery dot custom property you won't get notified because they're accessing the target object directly so if they do jQuery proxy dot custom property then you will get the log but so this is just one small difference and oh I forgot to mention one thing before so in terms of the number of things what you can observe in using object.observe you can't find out if someone is accessing your property so in object.observe there is no way to no equivalent of get basically yeah so that is possible so one of the different it might break in some weird cases like if you're doing like type of checks and those kind of things but especially if you're playing with host objects and stuff like that it lot of stuff break because yeah they are host objects yeah these APIs are fun so you learn a lot of about what happens out of in inside the browser by playing around with stuff like this so suppose you have an if you have an array a and you do an object.observe of a and you just print out the changes and I'm basically doing a of 0 equal to high over there so I'm adding a new property new element in the array so you can see that the observer gets triggered and you can see that okay the probably the browser is adding something to the array and it's also updating the length property of the array so some stuff that you can see and yeah if you attach say observer to say you try attaching a proxy to the window object or something as you keep typing in the window console you see it get it getting triggered a lot of time so it's probably fun to figure out why each print happens and yeah even like simple things like function dot prototype dot to string you can see that like this is a node if you FS dot read file supposed to be a native function but if you do a two string of it you can actually see the internal source code of not the entire implementation of course that's the JavaScript part of it so yeah you can do a lot of cool stuff there are others APIs like this which you can use to inspect your own program monitor it intercept it do stuff like that that's about it I think yeah you can follow me on Twitter so so I was actually doing something in JavaScript security so I was able to so that's this attack called on base cross-site scripting so one of the ways in which that happens is when an attacker uses some sensitive operation sensitive objects in the location or the URL of the web page and he uses uses it the developer not that I could sorry the developer uses the location object in say eval or something like that so I won't sort of figure out who's you accessing my location object can I do that in a nice way so I just attach a proxy to that and I can figure stuff like that out it's not very mainstream use cases like that but yeah it's there's some fun stuff that you can do with it so if as he mentioned the suppose if you replace window itself with a proxy to a window and you can just do the program run you figure out what are the oil accesses to it others weird stuff to do this would be say enclose the entire program with a which statement and the width parameters of proxy and yeah so there are a lot of weird stuff that you would obviously not do in production code but for analysis and those kind of stuff it gets pretty interesting you can't it really comes down to who gets to inject their code first so if the attacker injects his code first right so and he there's not pretty much nothing that you can do about it so he manages to say modify some object you won't and he managed to do that in a safe way I mean there are some APIs which he can use to you know like prevent extension of an object or if yeah so if you can't code runs later that's pretty much nothing that you can do about it yeah in 50 it is so that's a canary version it is and in edge it is Firefox has been having it for a long time yeah yes I would assume so I haven't actually measured it because I'm just using this for like all analysis tools and stuff like that it doesn't matter much what use cases where it so it also depends on number of objects you are proxying and all that stuff so if it's pretty small I guess the browser vendors would have optimized for that use case I'm pretty sure anything like this is going to just completely ruin any chance of using like the built-in stuff for optimize like all the optimizations in the product it's just going to throw them out like now if you're on your own so I did stuff yes yeah but that stuff you probably the browser can't make assumptions that it would have if you're not use that so yeah okay thank you