JAKE ARCHIBALD: 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. It's literally why I became
a developer, because I can't. SURMA: Maybe we can
sneak out and just replace ourselves with-- SPEAKER: And action. [MUSIC PLAYING] JAKE ARCHIBALD: So. SURMA: So. JAKE ARCHIBALD: So. SURMA: We haven't used it
in the last two episodes. JAKE ARCHIBALD:
We're using it now, and we're going to use it a lot. So-- SURMA: So. JAKE ARCHIBALD: --I want
to talk about clickjacking. SURMA: Oh, yes. JAKE ARCHIBALD: Now,
this is a hack that was discovered in the 2000s. SURMA: Yeah. JAKE ARCHIBALD:
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. SURMA: Mm-hm. Another website. JAKE ARCHIBALD:
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. Yes, and because it's an
iframe, any clicks that are happening there will
be owned by the iframe-- SURMA: Yeah. [INTERPOSING VOICES] JAKE ARCHIBALD: --rather
than the parent page-- SURMA: Yes. JAKE ARCHIBALD: --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 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,
they would put a button, like, over the top, like
this, but then make it-- SURMA: This is the
worst clickjacking attempt I've ever seen! JAKE ARCHIBALD: This is great! And then you'll get-- SURMA: You want to click this. Click me, please. JAKE ARCHIBALD: I
would fall for it. SURMA: Please, sir! JAKE ARCHIBALD: I
would fall for it. I'm quite stupid. But it'll give it [INAUDIBLE]. 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 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 and tricking the
user 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 tech click
on this little bit here. And the context of
the actual button is gone, because you've covered
it up [INAUDIBLE] with this. So this was a problem. SURMA: Yes. JAKE ARCHIBALD: This is a
problem that they had to fix. And they fixed it in
sort of 2009-2010, depending on the browser. And this was the solution. SURMA: The X-Frame
Options header. JAKE ARCHIBALD: 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-- SURMA: Just like cause. JAKE ARCHIBALD: --just like
cause and like no cause blah, blah, blah. So you put this
header, and that says, I cannot be in an iframe-- SURMA: OK. JAKE ARCHIBALD: --because,
as well as things like Like buttons, what people
were doing was creating like a
whack-a-mole game, where you're playing whack-a-mole,
like, oh, blip, blip, blip, blip. SURMA: Oh! Then suddenly, Like button. JAKE ARCHIBALD: 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. SURMA: Wow. JAKE ARCHIBALD: And that
was one of the hacks that you could
actually get the user to navigate around the site. And if you knew roughly where
the buttons were going to be-- SURMA: That's pretty amazing. JAKE ARCHIBALD: Yes. So this was the
solution for that. SURMA: But the
social button thing works with iframes
to this day, right? JAKE ARCHIBALD: 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-- SURMA: [INAUDIBLE] Like again. JAKE ARCHIBALD: --that is
just to the social media site or to whatever site,
and that is where you have to complete
the final interaction, because that's the
only time it's safe. SURMA: So basically, the
embedder took responsibility for this at that point. JAKE ARCHIBALD:
Yes, exactly that. SURMA: Embedee. JAKE ARCHIBALD: 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, 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-- SURMA: It's
interesting, because-- JAKE ARCHIBALD: --that
I'm not aware of. SURMA: --this button probably is
still an iframe, so it hasn't-- JAKE ARCHIBALD: Yes. SURMA: --really have any context
of what the other site is doing to that iframe. JAKE ARCHIBALD: Exactly. SURMA: And the
IntersectionObserver 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. IntersectionObserver
is the first API I've heard of that can
penetrate iframes in a way, because it can track
invisibility even if you're inside an iframe. JAKE ARCHIBALD: Yeah, there's
a couple of APIs that give you information about iframes. There's the
ancestorOrigins property that will, as an
iframe, tell you what the origins of
the parent iframes are. SURMA: Oh, I didn't
know that one! Interesting. JAKE ARCHIBALD: That's
a security feature. But as you say,
IntersectionObserver, why do you know so much about this? Look who wrote the article! SURMA: That was me. JAKE ARCHIBALD: It's Mr. Surma. Yes, as you say, the
IntersectionObserver will tell you when an element-- oh, you've got a
lovely demo here-- is visible or not. And it works in an iframe. SURMA: So either you can
scroll the iframe out of view or you can scroll the content
inside the iframe out of view, and both times,
the sections 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 things. JAKE ARCHIBALD: Yes,
or lazy loading-- SURMA: Lazy loading as well. True. JAKE ARCHIBALD:
--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. SURMA: Apparently
ResizeObserver is better. JAKE ARCHIBALD:
ResizeObserver is amazing. I think this came out a
year previously, didn't it? SURMA: Oh, that's right. JAKE ARCHIBALD: So it didn't
make it into our competition. SURMA: If you don't know
what we're talking about, watch our "HTTP 203" Christmas
2018 feature rundown. JAKE ARCHIBALD:
You're great at these. Oh, we got to get those
Likes and Subscribes. IntersectionObserver is looking
at solving the clickjacking problem. SURMA: Cool! All right. JAKE ARCHIBALD: So this is in
IntersectionObserver v2, which is in Canary right now, behind
the Experimental Web Platform Features flag. SURMA: OK. JAKE ARCHIBALD: So this is
what IntersectionObserver looks like right now. And do you know what? I don't like this API pattern. SURMA: No, I'm not a big fan. JAKE ARCHIBALD:
It's super weird. It feels inside out. SURMA: Yeah, and you
always have the entries, but most of the time,
you only get one entry. JAKE ARCHIBALD: One entry. Yeah, I find it a really
weirdly designed API. But we'll gloss over that. This is the new bit. SURMA: Oh, options. JAKE ARCHIBALD:
So in the options, you say you want to
track visibility. Now, IntersectionObserver
calls this thing visibility. SURMA: Which is what the
original IntersectionObserver already-- JAKE ARCHIBALD: Yes. I think this is badly named. SURMA: The
IntersectionObserver's kind of correctly and both bad
named, because, yes, it tracks intersections
with your viewport, but it's also kind
of called visibility. But to be fair, you can
use IntersectionObserver 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. JAKE ARCHIBALD: Yeah, 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-- SURMA: Obscuredness. JAKE ARCHIBALD: Yeah,
and I said something like that, definitely
not being clickjacked. 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 sort of de-bounces the amount of times
you hear about it. SURMA: Why do I have to go? Why is this-- sets? How low can I go? JAKE ARCHIBALD: That is
as low as you can go. SURMA: OK. JAKE ARCHIBALD: 100 is
as low as you can go. You can go higher. But 100 is as low as can go. SURMA: But you can be
nice and tell the browser, I don't need to know this often. Like-- JAKE ARCHIBALD:
Yeah, this is low-- SURMA: --just take your time. JAKE ARCHIBALD:
--priority, just-- SURMA: OK. That's actually nice. JAKE ARCHIBALD: --I don't mind. And then in your doodad
thingy-bob, callback here, in the entries, it tells you
it's visible, and it'll-- SURMA: [INAUDIBLE] obscures. JAKE ARCHIBALD: Yes,
well, the opposite. SURMA: It's not obscured. JAKE ARCHIBALD:
It's not obscured. Yes, see, it's gray
if you [INAUDIBLE].. I think it's really good. The naming aside, the
functionality is really good. And what I'm going
to do is enable it. There we go. SURMA: Cool. JAKE ARCHIBALD: OK, so now
it's the same as before. There's just a bit of extra code
running in here that knows when it's-- SURMA: It loads. JAKE ARCHIBALD: --being
hijacked or whatever. So you can see, I can
sort of move this around and everything's fine. SURMA: Oh, cool. Not obscured. JAKE ARCHIBALD: 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, nah. SURMA: Can't tell
for sure, I guess. They're being conservative
about this, aren't they? JAKE ARCHIBALD: Absolutely,
and that's what the aim of this is right now is it doesn't
care so much if there's false positives. They don't want false negatives. It wants to play
on the safe side. SURMA: So they want to basically
have 100% 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. JAKE ARCHIBALD: Yep. Yep. And the same goes for
other things, like filters. So if I bring the blur here-- SURMA: No. JAKE ARCHIBALD: 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
being 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-- and 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 it. SURMA: Oh, because
there's a tiny, little blur overlapping into-- JAKE ARCHIBALD: Yes,
so it's not just intersecting at a layout level. It's intersecting
at a paint level. SURMA: That's really good. JAKE ARCHIBALD: 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 level. SURMA: Cool. JAKE ARCHIBALD: Yeah,
that's really it. SURMA: That's
really interesting. JAKE ARCHIBALD: And it's
designed to detect things like clip-path, scrolling,
anything that would be-- SURMA: Yeah, I'm guessing-- JAKE ARCHIBALD: [INAUDIBLE] SURMA: --they
spend a lot 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. JAKE ARCHIBALD: 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-- SURMA: Actual compatible,
composable widgets. JAKE ARCHIBALD: Yeah,
so you can click Like, it will actually work,
or even a Buy Now button, and it will do the right thing. SURMA: You know that you can
detect if this is legit click or not. JAKE ARCHIBALD: Exactly. And that's the
important detail is the owner of the button
knows what's happening to it. SURMA: So it's still the
responsibility of the embeddee to make sure the click is legit. JAKE ARCHIBALD: Yes. SURMA: But now they can
at a reliable level, because before this was
practically impossible, no way to tell if there was
content on top, I think. JAKE ARCHIBALD: Exactly. Yes, there was no way of
doing this beforehand. This is entirely new. SURMA: So you said this
is in Canary right now. JAKE ARCHIBALD: In
Canary right now. SURMA: Do we have any
signals from other people? I feel like this is something
that, historically, Apple would be interested in, in
securing these kind of things on the web. JAKE ARCHIBALD: There's
definitely interest. It's something that the owners
of these kind of buttons are very interested in. SURMA: Yeah, I can imagine. JAKE ARCHIBALD: So it's
sort of popular with them. Right now, I think the other
browsers are happy for Chrome to experiment and to prove
that the API can actually work, can be done, and be fast,
because you don't want just using this API to break
the performance of the web. SURMA: That's true. JAKE ARCHIBALD: And that's
what we're working on now. I have no more content. It's all done. That's it. This sheet of paper, done! That was it. SURMA: Tablet, done! JAKE ARCHIBALD: What did you
want, another half an hour episode? SURMA: Yeah, tell
me about something. He doesn't say cut. What do we do?
