 So 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. So literally, why became a developer? Because I can't. I mean, we can sneak out and just replace ourselves. And action. So, so, so. We haven't used it in the last two episodes. We're using it now. I'm going to use it a lot. So, so, I want to talk about clickjacking. Oh, yes. Now, this is a hack that was discovered in, like, the 2000s. Yeah. And this is where you'd have a setup like this. You have a button that's part of a website. And then you have this, which is an iFrame to another website. Mm-hmm. Another website. Some other website, some other social media site. And the idea is you click that, and it will like this page. It's bringing an interactive element from another site onto your site. And yes, and because it's an iFrame, any clicks that happen in there are fully, will be owned by the iFrame rather than the parent page. Yes. 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, the click goes into the iFrame, and I can't control it. So, clickjacking was this thing where people would sort of abuse this feature by tricking people to like a page, buy 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. But then make it... This is the worst click checking attempt I've ever seen. What? This is great. And then you'll do it. You want to click this? Click me, please. I would fall for it. I would fall for it. I'm quite stupid. But it would give it pointer events none. So when you click that, that would go down into the iFrame and you've liked the page. Another way of doing it would be to put the like button on top, but bring the opacity of it down. So you're clicking on there, but you're actually clicking on the iFrame, which is on top. Oh, various other tricks you could do by visually obscuring it like that since tricking users to click it, they don't realize it's... 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 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. Right, this is a problem that they had to fix. And they fixed it in 2009, 2010, depending on the browser. And this was the solution. The xFrame options had a... And this is another one of the things in the web platform that should have been the default, but because it wasn't there at the start. Just like cause. Just like cause and like no cause and blah, blah, blah. So you put this header and that says, I cannot be in an iFrame. Okay. Because as well as things like like buttons, what people were doing was creating like a whack-a-mole game where you were playing whack-a-mole like... Oh, bleep, bleep, bleep, bleep, bleep, bleep, bleep. Suddenly like button. No, but what you didn't know was there was an iFrame over the top of like Amazon and those moles 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 around the site and if you knew roughly where the buttons were going to be. And that's pretty amazing. Yes. So this was the solution for that. But the social button thing works with iFrames to the stay, right? They want to be iFrames. So what you'll see that 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 because that's when that's the only time it's safe. So basically the embedder took responsibility for this at that point. Yes, exactly that. Embeddy. Yes. And then because it's safe then because the other site can't render anything over the top. 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 safe? And 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 the button in any sort of way, like nothing's on top of it, but also I haven't been blurred, I haven't had filters applied, I haven't had anything that is going to trick the user into doing something. I mean, it's interesting because this button probably is still an iFrame, so it hasn't really have any context of what the other site is doing to that iFrame. Exactly. And that's, I mean, the Intersection Observer already does this a little bit because it has this feature where, oh, it's the first API, that's what I want to say. Intersection Observer is the first API I've heard of that can penetrate iFrames in a way because it can track your visibility even if you're inside an iFrame. Yeah, there's a couple of APIs that do, that give you information about iFrames, as I, the Ancestor Origins property that will as an iFrame tell you what the origins of the pair of iFrames are. Oh, I didn't know that one. Interesting. That's the security feature, but as you say, Intersection Observer, why do you know so much about this? Look who wrote the article. That's me. It's Mr. Serma. Yes, as you say, Intersection Observer will tell you when an element, oh, you've got a lovely demo here, is visible or not, and it works in an iFrame. So even if you can scroll the iFrame out of you or you can scroll the content inside the iFrame out of you and both times the Intersection Observer will be able to tell you if you are visible, which was made for stuff like ads, you just want to know if they're actually visible so you get paid for it. Yes, lazy loading. Lazy loading as well, too. Stop starting animations until they come into view. It's one of my favorite additions to the web, actually. It makes a bunch of stuff a lot simpler. Apparently, a resize-observer is better. Resize-observerism is amazing. I think this came out a year previously, so it didn't make it into our competition. If you don't know what we're talking about, watch our HTTP203 Christmas 2018 feature rundown. You're great at these. Oh, I've got to get those likes and subscribes. Right, Intersection Observer is looking at solving the click-jacking problem. Cool. All right. So this is an Intersection Observer V2, which is in Canary right now, and the experimental web platform features flag. OK. 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 always have the entries, but most of them you only get one entry. One entry? Yeah, I find it a really weirdly designed API, but we'll gloss over that. This is the new bit. 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 think this is badly named. I mean, Intersection Observer is kind of correctly in both bad name because, yes, it tracks intersections with your viewports, but it's also kind of called visibility. But that to be fair, you can use Intersection Observer 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 visibility. 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, oops, I don't know. Luredness. Yeah, and I said something like that. Definitely not being Clip Jack. I don't know. I don't know. So I don't know. You have to supply the delay property because this is a more expensive bit of computation. You have to give it a delay, which just debounces the amount of times you hear about it. Why do I have to go? Why does this set? How low can I go? That is as low as you can go. 100 is lower. You can go higher, but 100 is lower. Well, you can be nice and tell the browser, I don't need to know this often. Yeah, this is low priority. Okay, that's actually kind of nice. And then in your do-da-thingy-Bob callback here, in the entries, it tells you is visible, and it will give you that callback when it changes. Yes, well, the opposite. It's not obscured. Yes, so it's great API. So I think it's really good. The naming aside, the functionality is really good. And what I'm going to do is enable it. All right, there we go. Call. Okay, so now it's the same as before. There's just a bit of extra code running in here that knows when it's being clicked or whatever. So you can see I can sort of move this around and everything's fine. Oh, cool, not obscured. 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 not. Can't tell 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 there's false positives. Yeah. They don't want false negatives, right? Yeah. They want it wants to play on the same side. So they want to have a hundred percent 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. Yeah, yeah. And the same goes for things like filters. So if I bring the blur up here, as soon as it's blurred to any degree, because you don't know what that button actually means, but it knows that it's been messed around with. And same here, as soon as there's an intersection, it's like nope, so you can't do the trick where you encourage someone to click there. 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. Because it's a tiny bit 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. And that's because this element is appearing on top. But as soon as I make that one appear on top, it's fine, because it's on the top. Cool. And yeah, that's really it. That's really interesting. So it's designed to detect things like clip path, scrolling, anything that would be Yeah, 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. And there's more work to do. It's still a work in progress. I filed a few bugs recently where I found someone's like, oh, I can actually do this, and it doesn't realize. So those will be fixed before launching. But the idea is we can start bringing back this behavior that we used to have before. We figured out it was actual embeddable, composable widgets. Yes, so you can click like, it will actually work, or even 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 that's the important detail, is the owner of the button knows what's happening to it. And it's a totally. The responsibility of the embeddy to make sure the click is legit. Yes. 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 you said this is incanary right now. Incanary right now. Do we have 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. It's something that the owners of these kind of buttons are very interested in. Yeah, I can imagine. So it's sort of popular with them. Right now, I think the other part is 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. And that's what we're working on now. I have no more content. It's all done. That's it. Cheat of paper, done. That was it. What did you want another half an hour episode? Yeah, tell me about something. He doesn't say cut. What do we do?