Solving Clickjacking - HTTP 203

Key Takeaways

Su what are you doing this evening I don't know I don't have any small talk I didn't become a developer to do small talk literally why I became a developer cuz I can't maybe we can sneak out and just replace ourselves with and [Music] action so so so we haven't used in the last two episodes we're using it now I'm going to use it a lot so though I want to talk about clickjacking oh yes now this is a a hack that was discovered in like the 2000s yeah this is where you'd have a setup like this you have a a a button that's part of a website and then you have this which is an iframe to another website M another some of website some of social media site and the idea is you click that and it will like this page it's it's bringing an interactive element from another site yes onto your site and yes and and because it's an iframe any clicks that happen in there are fully would be owned by the iframe Yeah rather than the parent page yes uh to the point where in order to drag this around I've had to add this little bit here which is part of the parent page because if I do that it the click goes into the if frame and I can't control it so clickjacking was this thing where people would uh sort of abuse this feature by tricking people to like a page buy some something or generally interact with a site that they don't think they're interacting with and what would happen is so you know they would put a button like over the top like this um but then make it this is the worst click jacking time I've ever seen what this is great and you want to click this click me please I would fall for it I would fall for it I'm quite stupid um but it'll give it Point revents non so when you click that that would go down into the if frame and you've liked the page uh another way of doing it would be to put the like button on top but like bring the opacity of it down uh so you're clicking there but you're actually clicking on the ey frame which is on top um oh various other tricks you could do by like visually obscuring it like that and tricking the user to click it they don't realize it's uh although that content is controlled by the other site you've done something to it to the point where it's no longer legible another one would be like to put a message there and just encourage the user to click on this little bit here and the context of the actual button is gone because you've covered up certain bits so this was a problem yes right this is a problem that they had to fix and uh they fixed it in sort of 2009 2010 depending on the browser and this was uh the solution the x-frame options header and this is another one of the things in the web platform that should have been the default but because it was there at the start just like cause just like cause and like no cause and blah BL blah blah yeah so you put this header and that says I cannot be in a ey frame okay because uh as one of those things like like buttons what people were doing was creating like a whacka mall game where you were playing whacka like suddenly like button no but what you didn't know was there was a an if frame over the top of like Amazon and those malls were appearing in the places where you would navigate your way through Amazon and buy a thing wow and that was one of the hacks like you could actually get the user to navigate round the site and if you knew roughly where the buttons were going to be and that's pretty amazing yes so this was the the solution for that but but the the the like the social button thing works with iframes to the stay right they want to be iframes so what you'll see happens now is you click on the like button and it will open a new tab or a pop-up window that is just to the social media site to whatever site and that is where you have to complete the final interaction that's when that's the only time it's so basically the took responsibility for this at that point yes exactly that embed yes and then because it's safe then because the other site can't render anything over the top um but people are asking now can we fix this can we make this actually work so you don't have to go off to the other site can we make this uh safe and uh in order to do this I would need to as the owner of this button I would need to confirm that nothing has messed with the rendering of my of the of the button in any sort of way like um like nothing's on top of it but also I haven't been blurred I haven't had filters applied I haven't had any anything that is going to trick the user into doing something I mean it's interesting because you this button probably is still an ey frame so it hasn't really have any context of what the outterside is doing to that ey frame exactly and that's I mean um the intersection Observer already does this a little bit because I it has this feature where oh it's the first API that's what I want to say it's insection Observer it's the first API I've heard of that can penetrate ey frames in a way because it can track your visibility even if you're inside an ey frame yeah there there's a couple of apis that do that give you information about eye frames there like uh the ancestor Origins property that will as an i frame tell you what the origins of the pair of FR are that's a security feature but as you say intersection Observer why do you know so much about this look who wrote the article Mr Ser yes as say the intersection Observer will tell you when an element um oh you got a lovely demo here yeah is is visible or not and it works so you can scroll the if frame out of view or you can scroll the content inside the iframe out of VI and both times the insection will be able to tell you if you are visible which was made for stuff like ads who want to know if they're actually visible so you get paid for it or similar lazy loading lazy loading stop starting animations until they come into view it's it's one of my favorite additions to the web actually it makes a bunch of stuff a lot res Observer is better resize Observer is amaz amazing I think this came out a year previously didn't so didn't make it into our competition if you don't know what we're talking about watch our HP 203 Christmas 2018 feature rundown you're great at these oh I got to get those likes and subscribes right intersection server is looking at solving the clickjacking problem cool all right so this is in intersection Observer V2 which is in Canary right now behind the experimental web platform features flag okay okay so this is what intersection observer looks like right now you and I do you know what I don't like this API pattern no I'm not a big fan it's super weird it feels inside out yeah and you have the always have the entries but most of the time you only get one ENT one entry yeah I I find it a really weirdly designed API but we'll gloss over that uh this is the new bit Ah options in the options you say you want to track visibility now intersection Observer calls this thing visibility which is what the original intersection Observer already Yes I mean the intersection observers kind of correctly in both bad name because yes it tracks intersections with your viewport but it's also kind of called visibility but that that to be fair you can use intersection to track actual intersections even off screen by changing what it is relative to so fair game but still it's very confusing this is now called visit yeah what this means and I think they might rename it but they're kind of like I said I think this is badly named and they said well what name should it be and I went obsess yeah and I said something like that definitely not being click jacked I don't know I don't know so I don't know um you have to supply the delay property because this is a more expensive yeah bit of computation you have to give it a delay which just of De bounces the amount of times you hear about it why do I have to why do this sets how low can I go that is as low as you can go okay 100 is low as you can go you can go higher but 100 is you can be nice and tell the browser I don't need to know this often like yeah this is low priority I don't mind and then in your Duda thingy bob call back here in the entries it tells you is visible and it will call back OBC it yes has well the opposite is obscured yes see it's great API so although it kind of I think it's is really good like the naming aside the functionality is really good and what I'm going to do is enable it all right right right there we go all right cool okay so now it's same as before there's just a bit of extra code running in here that knows when it's being click jacked or whatever so you can see I can sort of move this around and everything's fine not obure uh so I'm going to try the hack now where I'm going to put the button over there and I'm going to change the opacity and as soon as I change the opacity it's like n can help for sure I guess they're being conservative about this aren't they absolutely and that's what the aim of this is right now is to it doesn't care so much if it if there's false positives yeah they don't want false negatives right they want it wants to play on the have 100% of success rate of they want to get all the obscured cases at the cost of maybe saying you're obscured when you're not actually obscured yep yep and the same goes for things like filters so if I bring the the blur up here they as soon as it's blurred to any degree cuz you know you don't know what that button actually means but it knows that it's being messed around with and same here as soon as there's an intersection it's like nope uh so you can't do the trick where you encourage someone to click there uh and one thing I thought was quite nice I'm going to move that to there if I apply some blur to this you'll see eventually eventually as it gets blurry it triggers ah because like there's a Tim of blur overlapping into yes so it's not just intersecting at a layout level it's intersecting at a paint level that's really good um and that's because this element is is appearing on top um but as soon as I make that one appear on top it it's fine cuz it's on the top level cool and yeah that's that's really it um that's really interesting so it and it's it's designed to detect things like clip path you know scrolling anything that would be I'm guessing they spend a good amount of time going through all the possible ways you can mess around with obscuring and hiding and pretending to be there when you're actually not there's more work to do it's it's still a work in progress um I filed a few bugs recently where I found someone like oh I can actually do this and it doesn't realize um so those will be fixed before launching but the idea is like we can start bringing back like this behavior that we used to have before we fig out composable widgets yes so you can click like it will actually work or even like buy now button and it will do the right thing you know that you can detect if this is a legit click or not exactly so and and that's that's the important detail is the owner of the button knows what's happening to it and it's uh still the responsibility of the embed to you know make sure the click is legit yes but now they can at a reliable level because before that this was practically impossible like no way to tell if there was content on top I think exactly yes there was no way of doing this beforehand this is entirely new so he said this is in Canary right now in Canary right now do we have any any signals from other peoples I feel like this is something that historically Apple would be interested in and securing these kind of things on the web there's definitely interest um it's something that the owners of these kind of buttons are very interested in yeah I can imagine uh so it's sort of popular with them um right now I think the browsers are happy for Chrome to experiment and to prove that the API can actually work and be done and be fast because you don't want just using this API to break the performance of the web that's true uh and that's what we're working on now I have no more content it's all done that's it cheat your paper done that was it what what did you want another half an hour episode yeah tell me about something he doesn't say cat what do we do