DEF CON 23 – Dan Kaminsky – I Want These * Bugs off My * Internet

all right good afternoon everybody if people have been coming to Def Con or black hats or paying attention to information security pretty much for the last I don’t know 10 years or so this man needs very little introduction it blew my mind the first year that I came to Def Con at Def Con 13 and I was just telling him I cited his stuff in a paper in law school so it’s my distinct pleasure to introduce to you all Dan Kaminsky holy crap we’re back at DEFCON who here is actually here for their first DEFCON ever awesome welcome welcome to Vegas least our version of it you know I’ve been coming here for 15 years and I actually do talk about a lot more things than just DNS you know I want to thank all of you for being here because it’s not like I really told you what I’m gonna talk about yeah that’s the fun part right so why am I here why am i coming up a comeback to Vegas oh I like hacking I know I should be surprised you know the primary thing that we break as hackers of our assumptions people think they know how the world works and then there’s how they really work and there’s a difference now just because we’re breaking assumptions and we’re dealing with the way things really work doesn’t mean we understand what we’re doing you know what do you think happens when you mess with the system and you don’t know how it works well it falls over and breaks we just defined that as a good thing but there’s an advantage to knowing how things actually work we can fix things nobody else cares to if we could bother to care too so I want to talk about something that I really really like guys I like the web I do I think the web is the most interesting advance in technology certainly that I’ve seen in in my career HTML the very interesting property people don’t realize it was the first document format you could just put crap into it and it would render something like I wasn’t gonna crash ok like this shouldn’t be weird but you know if you thought like a hammer and you like your to hit a nail and you missed the nail it’s not like the board turns into like a fish like oh you know something you’ve dent the board but it’s still aboard most file formats for documents if you got it wrong even a little you didn’t need to be some magic super skilled buzzer which is die um there’s this great phrase surfing the web I realize how weird this guys you know surf cobwebs that’s terrible but the experience of just being able to go ahead and I’m on this site now I’m on that site now I’m here now I’m there it was so compelling we got this incredibly weird phrase to be popular the web the web is always up two days stale it’s not old Zion i aversion you know my god how are we gonna patch 950 million web pages you know that the web is always live and I like that property and it’s not how the world necessarily has to work Mobile does not work that way your phone does not work that way I’m not saying Mobile is bad but it is optimized for you using way less internet you have to accept installation yet the wait for download yet the wait for a home stuff get on your home screen mobile has a lot of friction applications get old they get stale you can’t just like read download them on demand because like 25 Meg’s and the worst part is the permissioning either you have the Apple situation where you need permission to put something online or you have the Google Android model where it might actually work a lot better if you needed permission because there’s a lot of crap out there the web has an amazing security model really really it actually does the browser represents a neutral broker not in terms of like people who approve your code but software that approves out their software and it is implementing two major ideas the first idea is the same origin policy the same origin policy basically says look we’ve got one user we’ve got one program the web browser and that program might be at two sites one of them is CNN one of them is Gmail CNN doesn’t get to read your Gmail this shouldn’t seem strange but it was a revolution the idea that you could have mutually distrusting programs where the only intersection between them is the user might not even be two tabs it might be two elements on the same page you have this thing called an iframe that we’re gonna talk a lot about in the

talk where you could potentially embed a piece of PayPal and that piece of paper could say hey do you want to spend a thousand dollars and buy something and somebody else they’ll you know that top page can’t be like forget the user and just keep some JavaScript I’m just gonna click that button make some money that doesn’t work because the web made sure it didn’t work there are other issues and we’re gonna talk about them the other thing about the web is that it should be safe to surf anywhere it’s really weird if you look at the web okay the web requires you to download and execute our unaudited arbitrary code and execute it blindly that’s how the web works but in return you know users require the web to make sure that anything executed is heavily constrained it lives in the most aggressively tested sandbox that has ever been deployed again not perfect but that’s the model we’ve had to do things to make this safe we’ve had amazingly pulled back plugins ActiveX gone java gone NPAPI gone flash not looking so good we keep pulling back because this is a really hard challenge malvert Isaac there’s kind of a thing going around where people say oh you know everybody should run web ad blockers because advertisements might contain dangerous content this is because advertisements might actually contain dangerous content this is true it’s just not exclusively true question you know all these terrible like clickbait listicle sites that are out there that everyone kind of complains about what you think these are wildly more secure than ad networks are you joking who do you think’s making more money who do you think actually has budget for security these little crappy sites No so if you follow the malvert izing pattern you end up basically saying hey it’s not safe to browse all these arbitrary sites get content from anywhere you really should have a small list of sites that you get content from because those are the only places that are trusted so you know Facebook and Twitter and nothing else right that sounds like the web not to me that sounds awful don’t want that future now if you want to say however everyone should ad run ad blockers because advertising’s are annoying and make the web slow now you’ve got potentially a different point you’ve got a totally different story now to tell you I’ve actually been working for the last couple of years to clean up the advertising ecosystem somebody’s got to and one of the questions has been wire ads causing all these performance problems turns out it’s our fault and security the same origin policy as wonderful as it is can be a problem this is a surprising finding even for me bear with me what is the ultimate goal of the same origin policy protect the user we fight for the user okay you have all these mutually distrusting entities and the assumption under the same origin policy is if I include some content I’m a parent page and I’m going to include a frame and advertisement or whatever else the only thing that it can do is it can draw pixels in this frame and I just need to make sure that it doesn’t like take over my clicks you know take over my pixels each got to live in the box and that’s the only thing bad that can happen turns out that’s not entirely accurate turns out stuff can be completely invisible and still make your web browser really really slow and you’re not allowed to tell you don’t let to find out that some frame on your page is some advertisement of your page is gunking up the works because as far as the system knows gunking up the works is an impossible thing can’t make it slows frame everything since Dainius so same origin policy means the parent should not be able to measure cross domain iframes let me ask you a question since when did we hackers respect should not so uh so I wrote me a CPU monitor in JavaScript versus cross-domain it’s kind of great go to website goes hate you you just hate iframe you’re somewhere else but go load some stuff and this thing goes crap what do you asking me to do and this is a big site we’ll go ahead we’ll go to a little site metafilter and you’ll see ya goes ahead and does some work but it’s taking way way way less work so it works much faster so this is a way of measuring what’s going on anyone got a theory for what trick I’m pulling here cuz it’s kind of fun by the way this works everywhere works an ie Firefox Chrome mobile every browser since like the beginning of time any theories out there can’t hear you but

someone tell me if he was right yeah check it out so you could just ask the browser to do something in 250 milliseconds and then you find out if it actually did so you set an interval you’re like hey keep trying to do something and then find out the gap between attempt and reality if it happens instantaneously that mean ravans precisely at the turn 50 millisecond mark yeah browser was idle if there’s like a 20 or 30 millisecond delay browser somewhat busy if there’s 1,000 2,000 3,000 milliseconds and we’ve got a problem we got something’s doing a lot of work and there are various ways of getting these timers but this is what you’re doing how you so I’ve been building this code out and call it nice yes and it has two functions one is find out if a page is slow – if you’re doing something that might make a mage page slow how about we wait until later so you can actually schedule events give me like a set idle time out so it will only do some action when we’re not trying to actually I don’t know do useful things for the user so what do we have here it turns the usefulness well for the people trying to make web pages we have a very easy way of seeing if the page sucks but of course a bunch of us are hackers we also have a way of seeing across the frame boundary something’s going on in there it’s very hard to know what but you do get to find out something’s going on at like 60 frames a second so there have been various cryptographic attack taken lovely advantage of this sort of stuff could we fix this problem well as it happens because it’s in every single web browser ever it’s kind of core to the way web browsers are built frames inside of us kind of share the event loop so they’re using resources that we’re trying to use so if they’re busy we’re busy and if we’re busy they’re busy it’s all a big line it’s like a queue so you really have to redesign the browser to try to fix this chrome is actually doing stuff like that they’re gonna try to make iframes work in their own processes they’re gonna try to make them independent of their parents but still you’re sharing a CPU like it’s not like there’s like two computers there so even if it’s not blocking it’s still going ahead and other things are trying to do work at the same time you are you probably can tell just by the fact that the CPU time is different do we want to fix this is it a good thing for the user that random things can be included on a web page and no one can tell us making everything slow absolutely not you should be able to measure if you’re delivering a bad experience to users of the Internet what we might be able to do and what I think this is actually gonna go towards is I think because ultimately I don’t know if you guys know this people open when you’re like a publisher of an ad site I love like a I don’t know some news site you have no idea what content you’re including from advertisements you just don’t know you know I run this script it brings stuff in you can’t even tell if it’s good or bad so I think by design we can say hey I’ve got a frame here tell me if this particular frame is using up all the CPU cycles and it’s making things slow or if it’s not if it’s being very quick that is how you get to the point where people can manage their performance impact and also you can return that data at lower frequency so it doesn’t break crypto let’s step back for a second what have I just done what is the conversation that I just had in front of all of you here giving this hack a no it’s a hack what should browser developers do it turns out that’s a complicated question to answer if you just have the metric of what’s best for the user we have a theoretical harm maybe somehow there’s some dangerous stuff that you can see through the that the timing attack and you have an actual real-world problem the web is drowning under poorly performing webpages so which is the thing that we want to protect how difficult would it be to fix we have different things we’re gonna do versus a from a one line fix that just works – we have to reorder tech the world and it’s not gonna be fixed after we do that anyway that matters and how useful would a proper implementation be maybe this isn’t a bug maybe we should double down and make it an awesome feature if you want to go ahead and make things better this is the conversation that you have to have if you don’t want to make things better that’s totally fine it’s okay I’m not sure why you’re at my talk have you seen my hat if it was any more white it’d be clear but you know it’s cool it’s cool I like making things better that’s just me something else that same origin policy is making us blind to know three steps

our first step step one buy ad space on a popular site step three profit anyone know what step two might happen to be turns out there are some unknowns out there check out this dump it’s called add stuffing it’s one of the reasons your browsers aren’t recently sucking so people are doing they’re buying ads on popular sites and then they’re putting ten more ads in that ad you don’t see it it’s all invisible your browser’s choking on this stuff and same origin policy as lovely as this is why nobody can audit for this stuff it’s ugly there’s no limit ten fifty under they’ll just keep doing it all day you don’t notice anything on-screen meanwhile you turn around you run a sniffer and you know it’s like that uh anyone remember that ad with the indie and the tear going down that’s totally happening so there’s this whole thing called viewability and it basically comes down to maybe we should be able to notice there’s a bunch of stuff that’s low that nobody can see maybe that’s not good for anybody but the scammer you can see this stuff with nice such a s because the CPU goes through the roof there are various tricks that try to go ahead and detect huh I’m in a box that’s one pixel by one pixel sometimes these tricks work sometimes these tricks are even mildly efficient sometimes they’re not I have a question should this be a hack at all so uh who here knows what clickjacking is the only environment of the world I could have had many hands go up alright so I’m going to show you the worst case you may not know what click jacking is so there’s this dialog and it’s in the middle of flash and this dialog is basically a permission dialog that if you happen to click allow flash gets to see your key but gets to see your subscreen camera gets to listen to your microphone that’s the permissioning model the viewability problem is the beginning of clickjacking they’re the same problem and viewability the harm is done just because it loaded just because it executed but there was no user interaction but that rabbit hole gets a little deep because the whole point is you show somebody important warning if you click allow’ you may be recorded and then you get the actual user interaction if the user doesn’t know what they’re giving permission to the interaction doesn’t mean anything legitimate so we call these attacks that try to hijack user interaction clickjacking attacks and defend against them we basically make the web suck what do I mean by that so here’s PayPal right you buy something on PayPal and you’re on eBay who they can trust you get to buy something on eBay you have a confirm and pay button but if you’re anywhere else besides eBay no it navigates you somewhere else if you like go to the store you go to buy something you go to the cash register like yeah actually we can’t take your car – can you guys go over there go to the VESA store get a receipt and like find your way back here and then like give us the receipt won’t let you buy something it’d be a terrible bottle but it’s what we do on the web because it’s the only way PayPal off of ebay can know when they present something to you that it’s not been manipulated that no one went ahead and tried to hijack the interaction then go ahead and say oh it should say $1,000 but we’re gonna put an icon on it and it just says $1.00 like sure I’ll buy that for a bucket now you’re out of grant that sucks twitter twitter actually knows a thing or two about web design and when you go ahead and you click something to reach we did it on a foreign page it does a pop-up people hate pop-ups but the most one most popular sites on the Internet has to use pop-ups because it’s the only way that Twitter can know that you’re not just browsing random sites and retweeting random things that it’s actually you we have this terrible design that’s being maintained some bugs need to be judged by the crap they create in their wink we normally fix clickjacking by turning off embedding entirely there’s a header it’s called X frame options and it disables and ctrl disables iframes entirely or at least controls where they can be says hey that thing you were doing the web was nice but still too dangerous so you know go make your site ugly content embedding is one of the cool parts of the web so people are doing pop-ups doing navigation to a safe domain some sites are doing crazy stuff like forget it forget the security model we’re just gonna engage in JavaScript vs. JavaScript warfare on the top frame

what we have a really good security model and we’re gonna abandon it but that’s what people have been having to do to avoid the the risks of content embedding Adobe can’t do any of that stuff they have a box and it needs to show up on screen and if it is not actually on screen the world comes to an end be users can be spied on but Adobe’s got a bit of an advantage those guys got native code execution so check out this adobe destroy to click jackin at least for camera and microphone we’ve got the thing fully visible let me tell you it works you give it put it in a frame that’s too small it doesn’t even lows I know I know you’re trying to mess with me you put stuff on top it renders but you try to click stuff nothing happens you move it off to the left of the page nothing happens go ahead and try to do all these stuffs with iframes so as far as flash knows is totally on top everything’s cool you know it’s got like all of its pixel space there but somehow it knows when it’s inside the iframe this actually works up here in the plane not when the iframe is too small not when there’s stuff on top of the iframe not when the iframe is off to the left oh that’s that’s cool I wonder what they’re doing uh even if you move that stuff around go ahead and say hey we’re gonna take this little box here and have it follow the mouse so wherever you click is always right under the allow button Adobe knows it’s moving how how are they doing this well I don’t I don’t know how else I can say this they make Photoshop they can tell by the pixels Adobe is semi puzzly comparing the expected stuff whether they hope they’re gonna display to the actual rendered output there’s a fuzzy comparison if you render their dialogue at 56% opacity it works if you render it at 55% it doesn’t if you put on top of it a 25% present image it works if it’s a to 25% it doesn’t if you have the original be 75% it and with a 25% overlay it doesn’t they have comprehensive ly dealt with this problem cool good job adobe glad not getting spied on maybe I’ll bite you anyway so I guess flash can do with html5 can’t again new because this solution is terrible you never want to read pixels back from the GPUs like you got a 10-lane freeway fot nine lanes are going out one lane is coming back you don’t get to read pixels back especially not repeatedly which you have to do to know if things have been moving around you’re turning the browser into a video parser so in this one context where security is absolutely overwhelmingly necessary and the youth is precisely fixed to a scenario where it’s almost never gonna have that dialogue up it’s not like all the time okay here we can scrape some pixels nowhere else do we get to do that but it’s not like we can’t patch browsers to Adobe can patch flash we can patch browser engines the html5 people w3c have been working on fixing viewability and click jacking they actually have a group called Web Apps SEC that has a proposal called UI security or says hey maybe content should know if it’s being displayed or not if it’s not it should be able to respond to that it recommends pixel scraping as a general implementation strategy quit trying to make pixel scraping happen it’s not gonna happen but can something happen I am finally getting into a standards body I’m becoming a w3c invited expert because I want these clickjacking bugs off my web how are we gonna do it all right check it out layers of distraction okay browsers don’t really know what pixels they sent they’re actually displaying on screen they kind of make a bunch of stuff up and be like I don’t know GPU but you’ll figure it out that’s really how it works but it’s not like the browser’s without knowledge it knows what it’s sending to the GPU web pages are composed of layers is like a sequence of transparencies on top of each other let me show you the DEF CON web page here the DEF CON web page looks nice simple well composed we’re just sort of go into the matrix here turn on side this is why your computer looks at the DEF CON web page Firefox is a 3d view which urn things on his side we see it’s a bunch of stuff that’s act on top of each other there are layers here well this is what the computer sees could we make the computer see something else pixel scraping is an attempt at auditing it’s saying we have so freakin many ways of putting

something on screen that uh and let’s see what happens after building this thing called iron frame and it is an attempt at correctness by design we’re gonna take the layer so the original name for this was Ginga we’re gonna take the layers that are at the bottom we’re gonna drop them on the top we’re not gonna guess or not gonna check to see if the right thing is rendered the only thing that could be rendered is the right thing why is it not called Jenga because what happens when you play Jenga things fall over now we have to make sure we don’t put too much on the top that layer on the bottom might be huge but we can measure the position and size of what we’re what our space should be and we only make things that big so let me just show you this working under Chrome and blink and then but before I do that let me explain what you never use the work just when it comes to browsers or anything that might be hard just as a four-letter word all right so we’re gonna start here’s a tweet it’s inside a bunch of hidden iframes let me tell you there’s no way if this frame to know it is being framed and that’s why if you were to interact with it it would create this pop-up now I have a bunch of slides here or I could show it to you but forget it they have gone into alive all right so check it out on our left we have the our favorite Swift on security tweet Twitter account there’s no security applied no matter how this thing is messed with what’s up it’s not showing you what hmm windows P duplicate come on you can do it that’s right all that time I spent in Redmond had some reason all right check it out we have to tweet it’s fully visible it is in fact interactable we have the tweet over here it is fully visible it is interactable this thing is shrunk downs like 3 or 4 iframes up it shrunk down as no way of knowing but we got a big red drought red border here nope can’t use that let’s keep going we’re gonna put some stuff on top of our of our tweet fully interactable when in the insecure mode over here if you look it’s actually popped on top it’s fully visible boom we get to interact with it scroll down some more we’re gonna go off to the left this thing is off to the left it’s not fully visible it’s interactable in the insecure mode in the secure mode it knows you can’t mess with it now so follow this is the trick you go ahead and you have only place this thing keep bowels can be is where it’ll click through and do something nasty so we’re gonna have this follow the mouse now I have to activate it there’s the button and then this follow the mouse you’ll notice it’s following eventually it’ll get somewhere so it’s yellow was yellow being as mean it’s here it’s visible but it hasn’t been visible for long enough once it is visible though it is interactable um now here’s my question anyone in the audience think I’m doing like silly little stuff you know no real attack is gonna get through here you’re like JavaScript badasses out there alright so check it out let’s have some fun with this we’re gonna go ahead and make this 50% opaque we’re gonna pop up the 50% opaque now is fully visible we’re going to go ahead and put 10x icons on top of ourselves so there’s ten of these things are all ten percent visible we’re gonna pop on top of all of them we’re fully visible we never drop shadow now look this is an element it’s not even on top of us it’s like way over there and it’s gonna crap some pixels on us that was annoying but we’re gonna pop on top of all of that and it’s gonna work oh it’s not working because it’s not fully visible cuz it wasn’t fully scrolls into space it knows about your scrolling now it’s fully visible blurring unblurred clip path we’re gonna draw a giant X over our frame nothing can go and open up we get that too just fine I don’t know anything else assume so check this out scale 3d you can literally take and port it content and flip it and reverse it and it’s still a thing that you could interact with and still this code goes ahead and fine says something bad has happened turn it on its side it finds something bad has happened use the visibility Hill and hidden element it goes ahead and makes it visible so here’s the really crazy thing it’s not like I did a bunch of special cases here this slides back you can do it I believe in you go projector go security by design is a thing okay I’m not saying that what I’m doing is perfect but all of those things that you just saw all those I’m gonna go ahead and make messed up content on the

internet all of those attacks failed because of one class to fix that was actually using the way the web browser worked so I want to talk to you about the gory details there no one just bribe me like I wrote some code but you never get to see it now let’s talk about how this stuff actually works what it means to move a lair now I’m talking to you about blink the renamed engine from WebKit inside of chrome but all the browser’s work this way they have to hanging out the former head of Internet Explorer and his jaw dropped he’s like damn this is the anti hack you’re working with the actual graphical layer to build a security policy we’ve been struggling with for ten years so that’s pretty cool this is look like what we got to do here got satisfy three requirements we have to promote content to the top layer if to actually get it on top then we need to make sure we haven’t put too much on top which requires a bunch of measurement and finally we have to report back how much was promoted the way the security model actually works is not oh I make things red and my make things yellow you’re actually sending messages the thing that you promoted here’s how visible you are what do you want to do with that information I don’t know you figure it out it’s your policy it’s your page your PayPal is not gonna have the same policy as Twitter it’s not gonna have the same policy than anything else so here’s the information you need to decide what the right thing to do is alright so what do we have to work with oh my god browser internals I got like no frame trees and frame views and layout views and layout objects and chat layout box model objects and deprecated paint layer and graphic layer graphic layer tree builder Wow browsers are complicated crap so let me make your life a little easier here you got three layers to worry about you got a thing called a document layer you got a layout tree of layout objects you get a layer tree if deprecated paint layers or graphics layers I’m gonna teach you what these things actually are and I don’t want anyone here to think this is a final implementation I am still a hacker or not a web developer but still let’s talk well what’s going on in this beast first off there’s the document object I don’t mean the document object in JavaScript I mean the document object in C++ it’s basically the Dom without the guardrails you can do anything in here that doesn’t mean you should do anything in here this is the same view that you’re coding with in JavaScript with the security removed so you can go ahead move things around but anything you move remember the bad guy also has JavaScript access they can see what you did after they can also feed you bad stuff so be careful what you read layout object layout object is interesting this is the first layer where the graphics engine goes okay I don’t need all this JavaScript stuff I don’t either is like you know weird things over here what I need to know is what are you trying to draw so you got like a little block flow from HTML you got like an image for a layout image these things still know what they are they’re just stripped of anything that is not relevant to the graphical subsystem and this is what actually moves around you know you move an object it like it’s styled and all that kind of stuff but it’s still not blank transparencies no the blank transfer but before I go to that anyone here ever do like website design and he’s like to see if anything has changed anyone yeah so if you were actually doing that this is the lair you want to dump to be like what is the web browser actually showing the user in a form slightly less annoying than pixels but your transparencies are the layers so you have deprecated paint layer and graphics layer different methods look like the same underlying structure and here is basically I’ve got some stuff here and stack stack stack stack stack it doesn’t know what it is it just know that is pretty pictures many objects can share the same graphics layer this is a problem because we have a particular object that we want to move we don’t want to move objects that we’re already there we want to specify this iframe needs to be movable it turns out there’s a trick in web performance called transform equals translate Z 0 that will go ahead it will turn this very simple layer tree and do actually a fairly complicated layer tree you might think this is really slow but most of these layers are not actually drawing content they’re not creating pixels they’re just applying rules I throw a scroll bar here cut off some content there and but this is kind of this complex tree we can take this crap at the bottom be like your link so what I found is that everything in iron frame could be implemented at document layout object or graphics layer you can always do it multiple ways for various values of security difficulty

instability the game that you are playing is it’s sort of a fight between absorbing the browser’s existing knowledge of what is or isn’t supposed to happen versus suffering the browser’s assumptions because it was never designed to do this kind of iron frame moving so it like thinks it’s working in different world things are supposed to be the same documentary and you’re violating its assumptions so that’s your fight as you’re building this where we are right now is it looks like a actual movement of content works really well at the graphics layer that is the thing that wants to be able to move has all the right methods has all the right stability figuring out what should move is a different story that is possible in graphics layer but it’s hard I’m right now using the actual document layer there’s this amazingly useful method called bounds in viewport space that says 8 iframes deep with all of these Scrolls and all of these transforms and there’s been a zoom done we’re all the way down here you are covering pixels 100 to 300 this is you hate those numbers you apply it to the graphics layer and everything is good so I’m just gonna do this thing I hope I actually don’t lose all of you first we got to find our document element when you have an iframe that’s like another web page in your web page and so you have a document and you have an iframe it has a document that is what I want to raise now why do I want to do it this way well if you don’t have an iframe in the way you could potentially just say you know pages are filled with elements there it is box that image that advertisement you just say we’re just gonna put that on top but if it’s not across an iframe boundary and not across the domain boundary some bad guys just like sweet you’re trying to raise yourself up I’m gonna put you back down because we are living in the same security domain you need to actually use the security model if you want there to be a security model I don’t like checkbox features and then once you’re inside that iframe what you could potentially amplify anything you can raise any element I just want to raise all of it why because I want this to actually be a thing that’s testable there’s like a bazillion different HTML elements within a bazillion different rules let’s go ahead and get this working on one of them and that one of them is everything that’s inside the iframe and then we’ll clip it from there next up we actually got to raise our layer that means we need to find our layer route today or at least that I’ve been doing you go to the document you asked for slate object you go to the layout object you ask for its layer object you as the layer object you get the graphics layer backing it’s very much an over the river and through the woods reality that we’re up to here so you find the graphics layer for the iframe which by the way you had to promote with that translate Z trick so there actually is a layer then you got to find the root layer and it’s really easy you’re just like root graphics layer add child iframe graphics layer it just works sweet I say that because there’s lots of other ways that don’t just work and you you know scratch your head a lot ok your graphics layer is too big you have taken whatever was all the way down there you’ve lifted it up it’s potentially huge you gotta fix that so how do you do that the way I’m doing it right now is super kind of janky okay so you’re inside an iframe right you might be inside like 10 iframes I saw one site 57 iframes deep what the heck I have no good idea so you’ve gotta like walk your way up you gotta think of these frames like keyholes they’re smaller than their they’re always smaller than they potentially could be so what you’re doing is you’re constantly saying I’m a thousand by a thousand but I’m gonna keep getting smaller gone through here I’ve gone through there you’re trying to figure out how big you are by the time you make it to the top frame now the reason you’re doing is manually normally graphics layer would do this for you but you don’t like all the transformations graphics layer is gonna do to you it’s gonna go ahead and put stuff on top of you you need to be on top of and that is not just occluding objects that’s all the transformations like blurs and whatnot so we go ahead and we walk up the stack what next now we’ve gone from a thousand by a thousand to 100 by a hundred we’re not done because the top viewport hey you know that theory that isn’t an iframe where I can user actually scrolls they might have scrolled to you off-screen they might have recently scrolled you that is not a frame boundary that’s a viewport boundaries you’ve got to intersect with the viewport okay now you’ve figured out how small you’re supposed to be and where you’re supposed to be you got to shrink that stuff so we apply our bounds that’s done using a set position and set size you have to take the scrolling into account because that wasn’t taken into account all the way back in the viewports in the bounds in viewport space and then you’ve got to tell your lair

hey you’ve had these bound set apply them and then system will do it for you you wish you would be done but as it happens there’s one last step all the way and all those frames those sub frames could have scrolled too you need to take the sub frame scrolling into account so it turns out there’s a function set offset from layout object so ultimately use all three of the layers that I described to get not just stuff raised up but raised up correctly and it works it works quite well and your final step is to go ahead and report back and say hey guy here’s where you are here’s how visible you are it’s so easy yeah that’s why you never say the work just alright so some issues you need to actually get this into the compositing pipeline the deal is there’s a whole bunch of steps in a row that need to happen in the proper order for a web page to render properly and right now we’re just sort of saying hey do it I’m JavaScript i order you to do it so you need to actually get to the point where the thing is maintaining itself because other things will cause new layouts to happen and it’s gonna blow away your fix other problems it would be nice if this was a little more stable it’s mostly stable usually it’s displaying things when everything’s in the right compositing mode by which I mean it aborts if it’s not it’d be nice it was easier to schedule stuff to happen at the right time but the hardened browsers and there’s some issues with mouse that Mouse input as well hey testing gets weird when things are being moved around the biggest issue with this designs probably do we really want to be forcing things to be on top like aren’t we altering the design of web pages well my design that I want is failing closed it’s basically saying look whatever is reported is absolutely the correct thing it might be ugly but that’s what’s visible the alternative is failing open you read the tea leaves you analyze you audit your auditing at of the the layer level instead of the pixel level the browser guys think they can do this they think they can figure out the minimum on modified rectangle that’s what the guys at Firefox call this I don’t care about fail closer to fail open I just want something with a really nice bug bounty on it so hey you want to you want to make a bet on this and get your checkbook out I think mine’s gonna be less expensive the original thinking was that position and size was good enough how many legitimate time to someone putting stuff on your content and they’re not trying to hack you well you know designers hey I can think I’ll drop shadows so you know you’ll have a frame is on top and it’s like kind of like drawing a nice little smooth shade just to make it look good and it’s not malicious but it’s there could we potentially support that yes but not with the toys that I have at my disposal maybe as some toys that people will build me the deal is I’ve got this world here up here that has a drop shadow on it and that world is it’s viewable but it’s not like our viewable the area we want to promote that we want to actually record as being fully visible is down here we want to be able to split our layer into and promote the bottom half and not the Tom top half that is not really easy with the present architectures chrome had something called replica layers that looks like they might be able to do that god help me I haven’t been able to figure out how to do it we probably do the the actual compositor to support what what I’m up to if there’s one more thing that I want because I am a greedy bastard if I’m trying to secure the Internet thus far somebody can draw a fake Twitter they’re just pixels I mean they don’t work with like your credentials right like when you hit the retweet on the fake Twitter what’s it gonna do it doesn’t know who you are it’s fake Twitter what if we wanted to use iron frame for like single sign-on what if it’s the thing that actually collects your credentials what if you’re supposed to put sensitive information in there now it can be absolutely perfectly viewable but you don’t know who it really is well what’s our solution to that normally okay look I frames have always had input exclusivity that means when you talk to an iframe you know it’s just the iframe that gets your keyboard and mouse events we’re now getting output exclusivity that means whatever pixels are there the frame knows that is there if we have input and we have output we can update the address bar we can go ahead and say hey I know you’re on random site com but right now what you’re interacting with is actually coinbase is actually twitter is actually paypal is actually anyone else no more messing around let’s fix some

stuff so here’s what I got to leave you with char first of all we can’t kill clickjacking this bugs been around for 10 years we can kill it without breaking what makes the web special we can do crazy things as hackers okay it’s not just about blowing things up although that too we can’t defend the vision of the open web and we can realize when we try to do this my god it’s gonna be hard it’s gonna fail the first time the second time the tenth time and that’s okay all the greatest acts that I’ve ever seen have been you fail you fail you fail you succeed I’m just saying the success can be a little more and finally these add suffers that are making sight slow they’d go stuff themselves that’s right I’ll say so I may actually I looks like I have a couple minutes for questions anyone want to ask something oh oh the question is am I going to make this public one of the fun things about joining the w3c is you have to make this public everything goes look I actually want this in web browsers this isn’t just to show off so yeah the code would be public but I was too busy making it I’d be the hallway at Def Con and I’m like wait a second this can work on Twitter and thus now I’m sitting down in the hallway coding it up so yes this will be public code will be out sometime next week presentation will be on Dan Kaminsky comm sometime the next eight hours another question anyone else go for it you want to fight you barely hear you here take it out testing testing one two three twe got double mic going on street I’m on the secure wired mic and hi Dan well that’s that dog three months ago when you’re conducting your research 1 for 30 set 3478 I can bear it here louder louder 3 months ago when you were conducting your research on port 34 78 which is emulating stun traffic mmm how much beer are you gonna buy for everyone who responded to that it’s sort of relational you know sometimes you scan internets sometimes internets can you any other questions about JavaScript of stuff no I’ll see you tonight dude all right web developers if you’ve got some interesting ideas how you want to use this stuff I’m gonna make it so you can build beautiful things that don’t suck Security’s gonna give you a hand that’s what I got