Solving Clickjacking - HTTP 203
Solving Clickjacking - HTTP 203
Clickjacking changed the way we have to interact with content from other sites, such as “like” buttons, but could Intersection Observer V2 come to the rescue?
Demo: https://io-v2.glitch.me/
Oh, and here’s the 2018 feature ‘competition’ we mentioned • Best web features of 2018: Part 1/4 -…
And did you know we did a podcast? https://developers.google.com/web/sho…
Content
0.03 -> some of what you doing this evening I
2.31 -> don't have a small talk I didn't become
5.069 -> a developer to do small talk so let's
8.429 -> see why I became a developer if I calm
10.26 -> here we can sneak out and just replace
11.639 -> ourselves so so oh so having using the
26.34 -> last two episodes we're using it now I'm
28.349 -> gonna use it a lot so so I want to talk
31.08 -> about clickjacking oh yes now this is a
34.649 -> hack that was discovered in like the
37.8 -> 2000s yeah this is where you'd have a
40.11 -> setup like this you have a play button
42.93 -> that's part of a website and then you
45.27 -> have this which is an iframe to another
48.09 -> website mm-hmm some other websites some
52.35 -> of a social media site and the idea is
55.14 -> you click that and it will like this
57.57 -> page it is bringing an interactive
59.52 -> element from another site yes onto your
61.739 -> site and yes and and because it's an
63.809 -> iframe any clicks I happen in there
65.369 -> fully will be owned by the iframe yeah
68.61 -> rather than heritage yes to the point
71.52 -> where in order to drag this around I've
73.08 -> had to add this little bits here which
74.61 -> is part of the parent page because if I
75.96 -> do that it quick goes into the iframe
77.549 -> unlikely I control it so click tracking
80.369 -> was this thing where people would sort
83.61 -> of abuse this feature mm-hmm by tricking
86.939 -> people to like a page by something or
90.78 -> generally interact with a site that they
92.88 -> don't think they're interacting with and
94.89 -> what would happen is so you know they
97.229 -> would put a button like over the top
99.15 -> like this then make it as the worst
102.689 -> clicked I can never see this is great
105.89 -> like this click me please I would fall
108.96 -> for it I would fall for it I'm quite
110.43 -> stupid but it would give it point
112.68 -> revention on so when you click that that
114.479 -> would go down into the iframe and you've
116.7 -> liked the page another way of doing it
118.95 -> would be to put the like button on top
120.78 -> but like bring the opacity of it down so
124.59 -> you're clicking there but you're
125.369 -> actually clicking on the iframe which is
126.869 -> on top Oh
129.179 -> various other tricks you could do by
130.77 -> like visually obscuring it like that
133.8 -> tricking users click it they don't
135.18 -> realize its although that content is
137.22 -> controlled by the other site you've done
139.62 -> something to it to the point where it's
141.03 -> no longer legible another one would be
142.89 -> like to put a message there and just
144.75 -> encourage the user to click on this
147.09 -> little bit here the context of the
149.91 -> actual button it's gone because you've
151.77 -> yeah covered up some bits so this was a
155.19 -> problem yeah right this is a problem
157.17 -> that they had to fix and they fixed it
160.44 -> in sort of 2009-2010 depending on the
163.02 -> browser and this was the solution the X
166.74 -> frame options header and one of the
170.07 -> things in the web platform that should
172.17 -> have been the default but because yeah
173.85 -> they're the stuff I course just like
175.89 -> cause and like no cause and so you put
180.81 -> this header and that says I cannot be in
183.75 -> an iframe ok because as well as things
187.68 -> like like buttons what people were doing
188.85 -> was creating like a whack-a-mole game
191.9 -> where you were playing whack-a-mole a
197.3 -> button no but what you didn't know was
199.92 -> there was an iframe over the top of like
203.13 -> Amazon and those moles were appearing in
206.73 -> the places where you would navigate your
208.41 -> way through Amazon and buy a thing Wow
211.35 -> and that was one of the hacks that you
213.3 -> could actually get the user to navigate
214.95 -> round the site and if you knew roughly
216.87 -> where the buttons were going to be and
218.28 -> that's pretty amazing
219.75 -> yes so this was the solution for that
221.64 -> budget so maybe the a the social button
225.39 -> thing works with iframes to the stay
227.37 -> right they want to be iframes so what
229.41 -> you'll see it happens now is you click
231.48 -> on the like button and it will open a
233.37 -> new tab or a pop-up window like again
235.89 -> that is just to the social media site
238.56 -> like whatever site and that is where you
240.75 -> have to complete the final interaction
242.31 -> because that's when that's the only time
243.87 -> it's so basic thing is the EM better
245.88 -> took responsibility for this at that
247.32 -> point yes exactly that and beddy yes and
250.47 -> then because it's safe then because the
252.06 -> other site can't render anything over
253.92 -> the top but people are asking now can we
258.66 -> fix this can we make this actually work
260.19 -> so you don't go off to the other site
261.84 -> can we make this safe and in order to do
266.25 -> this I
267.389 -> you as the owner of this button I would
269.28 -> need to confirm that nothing has messed
272.099 -> with the rendering of my of the book the
274.499 -> any sort of way light like nothing's on
277.59 -> top of it but also I haven't been
279.3 -> blurred I haven't had filters applied I
280.77 -> haven't had any anything that is going
282.569 -> to yeah trick the user into doing
284.009 -> something I mean that's interesting
285.749 -> because your this button probably is
287.61 -> still an iframe so it hasn't yes any
289.86 -> context of what the other side is doing
290.969 -> to that iframe exactly and that's I mean
294.169 -> the intersection observer already dust
296.61 -> it a little bit because it has this
298.83 -> feature where it's the first API that's
301.229 -> what Hayes its actual observer it's the
302.789 -> first I've ever heard of they can
304.039 -> penetrate iframes in a way because it
306.509 -> can track it with ability even if you're
308.719 -> inside an iframe yeah there's a couple
311.46 -> of api's that do that give you
314.129 -> information about iframes as i the
316.02 -> ancestor origins property that will as
318.09 -> an iframe tell you what the origins of
319.68 -> the paralyzer on and i just think that's
322.05 -> a security feature but as you say in
323.729 -> section observer why do you know so much
325.469 -> about this look who wrote the article
326.789 -> element yes Irma
328.77 -> yes as you say the intersection observer
330.9 -> will tell you when an element was you
333.99 -> got lovely demo here yeah is visible or
336.15 -> not and it works
337.199 -> so you've control the iframe out of you
339.24 -> or we can scroll the content inside the
341.43 -> iframe out of you and both times the
343.86 -> section will be able to tell you if you
345.689 -> are visible which was made for stuff
347.729 -> like ads who want to but know if they're
349.979 -> actually little so you get paid for it
351.419 -> yeah some lazy loading lazy loading stop
354.539 -> starting animations until they come into
356.189 -> view yeah it's it's one of my favorite
358.05 -> additions to the web actually it makes a
360.24 -> bunch of stuff a lot of us better resize
364.349 -> observer ISM is amazing I think this
366 -> came out a year previously I didn't make
368.159 -> it into our competition you don't know
369.479 -> what we're talking about watch our HTTP
372.899 -> 2 or 3 Christmas 2018 feature run down
375.87 -> you're great at these I've got to get
379.889 -> those likes and subscribes right
381.379 -> intersection server is looking at
383.219 -> solving the clickjacking problem cool
386.25 -> all right so this is an intersection
388.05 -> observer v2 which is in Canary right now
390.899 -> I'm the experimental web platform
393.149 -> features flight ok ok so this is what
396.33 -> intersections of it looks like right now
398.039 -> you
400.95 -> I don't like this API pattern no mobile
403.62 -> and super weird it feels like out yeah
406.26 -> if the always have the entries but most
409.08 -> of them you only get one one entry yeah
410.7 -> I I find it a really weirdly designed
412.53 -> API but we'll gloss over that
414.45 -> this is nubes opens in the options you
418.919 -> say you want to track visibility now in
422.73 -> section observer calls listing
424.08 -> visibility which is what the original
425.88 -> interface of who are already yes tonight
429.03 -> I claimed the Ameen the intersection
431.88 -> observers kind of correctly in both bad
433.86 -> name because yes it tracks intersections
436.74 -> with your viewport but it's also kind of
440.43 -> called visibility but that that to be
441.84 -> fair you can use intersect observer to
443.729 -> track actual intersections even
445.11 -> off-screen by changing what it is
446.729 -> relative to so fair game but still it's
450 -> very cool yeah this is now called
451.26 -> visible yeah what this means and I think
453.18 -> they might rename it but they're kind of
455.31 -> like I said I think this is badly names
457.169 -> and they said well what names should it
458.639 -> be you know it oops accordionists yeah
461.84 -> something like that
463.19 -> definitely not being clipped Jack so I
468.09 -> don't know you have to supply the delay
471.27 -> property because this is a more
472.35 -> expensive yeah bit of computation you
475.44 -> have to give it a delay which just
476.91 -> debounce is the amount of times you hear
478.5 -> about it why do I have to go by there
479.85 -> just sets low can I go use as long as
483.419 -> you can go okay 100 is low you can go
485.34 -> you can go higher but hundreds well you
487.2 -> can be nice and tell the browser I don't
488.76 -> need to know this often like yeah this
490.32 -> is low to I or T oh that's actually
492.09 -> don't mind and then in your Duda thingy
497.07 -> Bob call back here in the entries it
500.789 -> tells you is visible and it is obscured
503.82 -> yes has well the opposite it's not
506.58 -> secured yes see it's gray a PA so
509.09 -> although it kind of I think it's is
512.99 -> really good like the naming aside the
516.27 -> functionality is really good
517.289 -> I'm gonna do is enable it all right
519.57 -> right right there we go ahead cool okay
521.61 -> so now it's the same as before there's
524.039 -> just a bit of extra code running in here
525.48 -> that knows when loads
526.89 -> yep being tracked or whatever so you can
529.26 -> see I can sort of move this around and
530.88 -> everything's not obscure so I'm gonna
533.37 -> try the hack now
534.36 -> I'm going to put the button over there
535.259 -> and I'm going to change the opacity and
537.42 -> as soon as I change the opacity it's
539.1 -> like NAT can help for sure I guess
541.499 -> there's a being conservative about this
542.79 -> on there absolutely and that's what the
544.559 -> aim of this is right now is to it
546.569 -> doesn't care so much if it if there's
549.029 -> false positives yeah they don't want
550.949 -> false negatives right there yes they
552.839 -> want it wants to do one so they don't
554.879 -> have a hundred or successor of they want
557.189 -> to get all the obscured cases at the
559.47 -> cost of maybe saying you are obscured
562.17 -> when you're not actually obscured yep
563.759 -> yep and the same goes for things like
565.319 -> filters so if I bring the blow-up here
567.809 -> they there's as soon as it's blurred to
570.089 -> any degree because you know you don't
571.619 -> know what that button actually means but
572.939 -> it knows that it's being knocked around
574.799 -> with and same here as soon as there's an
577.41 -> intersection it's like nope so you can't
580.049 -> do a trick where you can curse someone
581.1 -> there and one thing I thought was quite
583.679 -> nice I'm gonna move that to there if I
585.989 -> apply some blur to this you'll see
587.999 -> eventually eventually as it gets blurry
590.85 -> it it triggers hard because like it's a
593.009 -> timing of blur overlapping into yes so
595.949 -> it's not just intersecting at a layout
597.449 -> level it's intersecting at a paint level
599.489 -> that's really good and that's because
600.989 -> this element is appearing on top but as
604.47 -> soon as I make that one appear on top
605.73 -> it's fine because I'm cool and yeah
609.6 -> that's that's really it that's really
612.899 -> interesting so it's it's designed to
615.54 -> detect things like clip path you know
618.059 -> scrolling anything that would be yeah
619.709 -> I'm gonna think that they spent the
620.97 -> amount of time going through all the
622.439 -> possible ways you can mess around with
624.72 -> obscuring and hiding and pretending to
627.689 -> be there when you're actually nod and
629.22 -> it's more work to do it's it's still a
630.779 -> work in progress I filed a few books
633.149 -> recently where I found some ones that I
634.439 -> can actually do this and it doesn't
635.73 -> realize so those are would be fixed
637.98 -> before launching but the idea is like we
639.809 -> can start bringing back like this
641.73 -> behavior that we used to have before I
643.199 -> figured out edible composable widgets
645.899 -> yes so you can click like it will
647.16 -> actually work or even like Buy Now
648.72 -> button and it will do the right they
650.339 -> know that you can detect if this is
652.29 -> legit click or not exactly so and that's
654.66 -> that's the important detail is the owner
656.16 -> of the button knows what's happening to
657.929 -> it right and it's the responsibility of
660.989 -> the embed II to you know make sure the
664.289 -> click is legit
665.129 -> yes now they can at a reliable level
668.009 -> because
668.259 -> before that this was practically
670.029 -> impossible like no way to tell if there
671.769 -> was conduct on top I think exactly yes
673.959 -> there was no way of doing this
674.919 -> beforehand this is entirely new so it
676.929 -> says if this in canary right now in
679.089 -> canary right now do we have any any
681.279 -> signals from other people's I feel like
684.369 -> this is something that historically
687.729 -> Apple would be interested in and
689.139 -> securing these kind of things on the web
690.91 -> there's definitely interests it's
693.1 -> something that the owners of these kind
695.499 -> of buttons are very interested yeah I
696.819 -> can imagine so it's sort of popular with
698.889 -> them right now I think the other
701.289 -> boroughs are happy for chrome to
702.579 -> experiment and yet to prove that the API
704.769 -> can actually work can be done and be
706.929 -> fast you don't want just using this API
709.209 -> to break the performance of the web
710.919 -> that's true and that's what we're
712.329 -> working on now have more content that's
716.529 -> it see your paper done you want another
721.209 -> half an hour episode yeah tell me about
724.689 -> something he doesn't say cut what do we
727.269 -> do
Source: https://www.youtube.com/watch?v=EIH6IQgwdAc