 Okay, so I'm going to talk about internet memes and when I do that, I hope that you'll be able to get some idea about something called clickjacking. You might have tried it on others, you might have been a victim of this and I'll tell you how you can find that out but it will be fun. We have a system where there's a 10 minute Q&A so we can do that but you can stop me in the middle, ask your question, for the camera I'll be repeating the question and then we can do that. We keep it interactive because as it is after lunch. So the topic of my talk is I had your mouse geeks in these strokes. What's the meme here? What? What? Yeah, actually. So lolcatch is what they started calling them later but it started with ikenhasgeeks. I actually forgot the tan. I don't know if you guys know this but the company has geek. They were thinking about the name and all. What I had suggested was hasgeek like HAZ but I don't know there was some drama nazi or something. Okay, let's get to what clickjacking is. User interface redress attack. UI redress attack, UI redressing. So those are some of the other names it's known as. As you can see they are pretty formal names and a lot of research on web application security has been happening in universities and the first time someone mentioned something like this could be a problem was in 1999. Long before any of the dynamic rich internet apps that you see now. And in 2008 there was a pretty popular cited paper by these guys called R Snake and Jeremiah Grossman. They used the word clickjacking and what it means is clickjacking is when an attacker uses transparent or opaque layers to trick a user into clicking on a button or link on another page when they were intending to click on the top level page. Thus the attacker is hijacking clicks and keystrokes. Okay, if it's not clear I'm going to repeat it just for clarity is when an attacker uses transparent or opaque layers to trick a user into clicking on a button or a link or another page when they were intending to click on the top level page thus the attacker is hijacking links and or keystrokes. I hope you got that. So I don't think I don't like that definition at all. So which meme is this? No that's what they call but what's the name of that character? It's called the angry derp. Obviously angry derp trolls a lot and he goes like why you know him whatever. So I thought that was a nice one. Okay so this is what I meant and this is what that definition meant. What is this meme? This is what's visible which is in the background. Okay the attacker is going to attack this. This is transparent but it is in the foreground which means the user when they click or they type something the input goes here but for them it's all happening here. This is what clicks actually is about. Okay now there are many forms it's pretty difficult to what do I say pretty difficult to safeguard applications which you know they work on iframes or cross domain message passing it's a difficult thing because understanding that it's going to happen and it's a problem at the user end. This is happening in the browser because the user is you know maybe socially engineered into clicking something like on Facebook you see this amazing message says see what this girl you know what happened when this girl's father walked in and you click on that. Yeah yeah exactly that's what you did when your wall had that message you were clicked there are a bunch of others now if you look at this it is pretty simple and what I'm going to talk about is you know what what is happening with clickjacking and what are the different attacks that you've seen in the wide. Okay I'm not covering all of them but I'm covering the high profile ones for you to get an idea you might have read about it you might have been a victim of this but you may not know what happened what really happened and at the end I'm going to talk about like how you can prevent this if you're building applications if you're you know you're a designer you're thinking about UI you are looking at like you know I want to kick ass UI but does it enable attacks like these more often than you know something which is less glamorous or something so which one is this Oh well done we are in the philosophy room by the way in this college this is the philosophy fun room so how does one read as the user interface right it's not that you know because Jason is a friend that I get to talk on any topic it's about UI and why or how are you redressing the UI so what's making it possible so I don't know if you went to the funnel and if you read what I've written about the talk I have mistakenly mentioned that this requires CSS 3 well it doesn't I've done more research that was just to submit the talk I've done the research and CSS 2 has this property as well so these are the main ingredients required which enable something like click-jacking to happen okay the first is iFrames I think almost all of us use this or web page can contain another web page within it okay Google Maps is one of the most common options we have you know look at our pages if opacity HTML elements can be solid partially transparent or invisible okay so if I think most of you would be aware of this but if you're not this is what is happening there is a stacking order HTML elements can be stacked on top of each other so you see where it's going right if you make it invisible you know the opacity set to a certain value there's stacking plus opacity an element can be on top and invisible so I don't know if you can see this image clearly this is Google loaded in iFrame okay and here it's stacked on top of another window but in this case it's invisible so you can see what's happening behind okay I want you to understand that even though I'm talking about click-jacking specifically because that's one easy topic to address security using UI user interfaces this is a problem in other places also like you know how does someone know that a web page is secure a web page is HTTPS the lock which is a lot of people rely on you know before all this the green and the orange bar and all that come now people used to rely on a lock which is visible somewhere on the browser right when Chrome came out they changed the position of the lock from anywhere else to the favicon you know the place where favicon comes yeah in the tab on the left of the address the URL which meant that if someone hijacked that page and they were able to replace the original favicon of the website and show the lock some people would mistakenly believe that they're on a secure page when they were not right so even that is a UI redressing attack so there are multiple classes of attacks in UI redressing I'm just covering about click-jacking so coming back to this so if you have iFrames if you use opacity stacking order and stacking just opacity there's something where the page which is behind this is visible to the user while your invisible page is front you can you know inject or hijack clicks okay so when you use Facebook and someone misuses the like button there that's click-jacking because the like button is you know somewhere where you're clicking now there are different ways of doing this and there's a concept of social engineering also someone has to actually takes an action this is not the kind of attack where the user doesn't do anything and then they get infected or something so the user is to be blamed they want to watch racy photos of you know some fantastic video or whatever so they have clicked something mistakenly or whatever but they have I will I'll give you three examples so this is what will happen set index which is the property of CSS 2 puts the iFrame on top the opacity makes the iFrame invisible and the position absolute lines of the iFrame with the dummy page now this is the important part because the original web page is not in your control so wherever the button on the original page is it's going to be there what you need to do is the attackers page will be aligned in a way that when it something gets clicked when the user is going to click somewhere else you know the action button gets clicked but there are ways around it there are new advanced action click-jacking as well so there is a div with style with z index of 10 which makes this on top the opacity is 0 and the position is absolute starting top 0px so you know from the viewport left post top right and this is the invisible frame on top and there is a you know the social engineering thing saying claim your price if you use pirate bake one of the most common ads you can see in Bangalore is you are the two people from Bangalore who have been selected for a price click here so anything on facebook this is my first example this is from a demo page if you click on view demo now obviously this attack is not without user doing something so when they do that wherever the mouse cursor is you can't see the light button here but the light button is under the mouse cursor now in this case it doesn't matter where the button is or whatever because facebook has a particular api open graph api or something and you can like share and all that and based on what you like it will get out of your profile or it will come in your news feed a well executed clickjacking attack would mean that it will ask your friends to also click on that link that you have just posted which you are not maybe not aware of so if you take care of the light button being under the cursor it could be like a game where you are like it could be an easy game that shoot this face and you might win this is not the actual case study but there have been 4 to 5 different attacks on facebook about this it's called likejacking so if you are googling it it's called likejacking basically clickjacking for the light button there is another case study where in that case they would show you a page which kind of look like youtube the light button was the entire viewport so it doesn't matter when you click the idea was that the video would start it would show you some you know the first 2 frames but then it says please enable or the audio is mute click here to unmute right sometimes it would say click here to unmute or click here to view the video input screen something like that and the entire viewport was light button so in the slides that you get these references are already there so this will show you the exact code that you viewed so that the light button follows the mouse cursor people go to javascript and will be able to understand it and the person who released this called it how to like anything on the internet is facebook so this is my first example this is the big one this was what was released in 2008 the flash player in your browser has settings I don't know if you ever right clicked a flash movie you can reach these settings and again it's very small yeah so there's a box and you can choose to choose the flash player to have access to your webcam and your microphone right so this attack was against that that you see a game and when you click basically the flash settings for your browser have been loaded and when you click on that it gets allowed so when this these guys wanted to present it on a conference in 2008 and adobe made sure that it didn't adobe was like this is a massive attack against privacy so we have to you know take care and so they didn't release it but when they released it this is how they released it adobe thought that it was solved I will tell you about the mitigation later but adobe for some time thought that it had been solved but what they did not realize that the swf file which is on the adobe server which can also be used sometimes I don't know how it can be used and it can be iframe you can use the iframe source you can put directly the path which is on the adobe server and if you make some setting changes there those are also persistent so in 2011 someone revisited the attack and they were able to cause some damage but the point is what we are trying to see is this will look like do you allow a jacks or some question the allow button is visible the allow button is actually from the settings option of flash this is again click jacking so when you go to search for just search for flash player click jacking you will get more references for this yes so this question is like some part of the page which is supposed to be visible that's visible in this case yes so again the attack you know it can have different ways of making it work but the point is there are two pages again right and the actual click which you think you are making for this page will go to a different page which is being attacked okay and that's the objective of the attacker yes in this case they usually have two iframes an iframe with an iframe right so the original iframe is it's transparent it's invisible and the second iframe it's only meant for that it starts from that point where the button is visible and that one is not invisible right so you can do that it fell for this one honestly come on this happened last year nobody it's called the twitter don't click attack for once this was not by you know someone some spammer it was just someone who figured out twitter was you know susceptible to this attack so they created a link a tiny URL link and it they called it tinyurl.com slash don't click okay but it overloaded twitter servers because it said don't click which meant most people clicked it and when they did this got posted to their twitter feed okay if they clicked and they went to that page this got posted this is a window from no script no script is an extension for firefox i'm not sure if it comes from the browser maybe from my book so that when they realized no script was initially meant to make sure that no javascript which is not quite listed by you gets executed when a page loads but they realized this attack can happen without any javascript this is just how the page is being aligned based on the layout so they created this other thing called clear click warning okay this additional technology called clear click which will tell you exactly it will basically make anything which is invisible visible and it will tell you this is where the click is going so this window would pop up now obviously in terms of usability this is really really horrible but if you're worried about your reputation you don't want people to realize that you click on things you're not supposed to click on so that's something you can use how many of you have seen this new facebook thing where there are two images and there are like these two women sitting on a railing next to a clip and it says don't click here at one point and it's pointing to where facebook shows you all the images in this window right with the left side and the right side like an ebook reader if you click anywhere it goes to the previous image or the next image so it's pointing to don't click here and if you click there the next image at one of the women is falling now will you try it or yeah I'll try it so this is for people like me the problem was again this is the network effect and twitter it's more than facebook which is a little surprising but that happened that as soon as you click on this this gets posted don't click on the url click on the url you go to the page and this gets posted on your like as your next tweet and within I think a span of 8 hours twitter realized that they were facing outages and you know that twitter failed and all that was showing up so then people got got in touch with the people I think the person behind tiny url to get the link for abuse and then twitter fixed this and how it has been fixed for twitter for facebook for gmail that's another thing I'll show you on the page which this url leads to on the page which is maintained by the attacker on that he has noted whatever he has to show you like a big don't click button but behind that is the twitter thing like behind I'm saying because it's in front but it's invisible it doesn't have to be an api right it can be a normal post as soon as the person clicks the don't click button he's clicking the tweet button because clickjacking is only about purely about user actions user has to say take some action so what is being misused what is the weakness that the user can't see the invisible you know iframe which is loaded there locked in session again the person has to be locked into twitter it do not work otherwise yeah I think this was last year by creating iframe tag that url went to a page which was owned by the attacker so again they have that zindex thing they have exactly what this is you see this this is a page controlled by the attacker and they have a div with zindex, opacity, absolute and the iframe so consider this is where the twitter thing was the attack is exactly the same now that like my experience so this is what was visible the don't click button was here which this is what was visible but the action of the click was happening on twitter which is loaded here already the message was set don't click this and the time you are in link and the tweet button was there so the when you send the person click don't click they were actually clicking on the tweet button and like always one of the clear reasons this was not resolved for a such a long time is because people kept on using ie6 you gonna buy ie6 so another example like how you think it would happen so let's say you think you are clicking some place and you know the user what you can see is the mouse cursor for what's actually happening so this is where the real cursor is okay this is where your mouse cursor is this is the point where you have not clicked the button the clicking this button is just to trigger an action and trigger an event sorry it's called event right so trigger the event this is what it is this is some graphic as soon as you click the button this has reached where your click which you can easily find but this is where your real trigger yeah and this is some tweet something like those you know the tweet things with count of tweets you get so this is called cursor jahi again people have created these demo pages so others like us can understand better what's happening but the UI part is you would think obviously this person has made the cursor black to show you the difference it doesn't have to be exactly like this right so the person using the web page will not realize that there is anything wrong you know there's anything amiss did you get this example I think it's not very clear the image so this is the real cursor the fake cursor and after you have clicked the button what happens is the fake cursor reaches the button because that's where your cursor was you clicked there but it actually is here and this is what happened you see it's a toggle button yes no so next time you click you will tweet but this is like a benign example in reality they could have done the tweet with the first click itself question someone asked question well you trust so many things on the internet first of all you trust your ISP to give you a network which is wire free then you trust your ISP will give you your DNS which is not poison which means that if you want to go to your backside you are actually going to your backside every time you put in you know you go to a website and you accept Google Analytics JavaScript you're trusting Google even though you're not on Google's website you're trusting Google's this thing that their JavaScript is getting injected in your page is fine right and you're trusting the website you're on then you trust them with your data so that happens all the time you trust the browser which is a free piece of software and if you read the usage terms or something all the browsers come with clear this thing that they do not they are not likely to break it on you right so trust is a major issue the thing is yeah that's a different discussion the thing is what can you do here okay now if your if your job is to build web applications or if your job is to design web applications right now obviously security doesn't occur in isolation which is why we have so many of these social engineering attacks because people they don't care right they don't realize it's wrong they just want to use the computer and they want to trust everything the point is what can you do about this now this is not only about clickjacking the mitigations are for UI address attacks right even though I gave you some examples of what clickjacking is doing the mitigations are for UI address like user interface gets changed all the mitigations here still assume that your browser is trustworthy right now if you install an extension if you install a toolbar a browser helper object in your browser that changes the UI then there is nothing you can do these mitigations will not work right these mitigations are only from the point of view that you as the person responsible for the website or whatever internet content is being consumed by your user you can do something about it they also come with their own aviats but we discussed that so the first thing is called frame bursting and then I am also going to talk about wide fields frame bursting simply means what is the big problem you cannot blacklist the zindex you cannot say don't render css your sites will not look so pretty you know I have a friend who is giving a talk on good design equal to good typography most of the typography that happens is javascript and css enables it right so that's not an option and if you are a designer if I tell you that just keep it simple keep it plain then you are going to come and hit me so what do you do you target the iframe you say my content my website cannot be iframe you think that's a feasible thing you all agree? okay well it doesn't matter because it's been done and then I am going to talk about something called the iframe header which is not even at the level of your html it's at the level of html it's part of a header that the server is going to send you and if your browser supports it if you have a modern enough browser your browser will you know allow that to happen your browser will you follow that directive this is a common example of frame bursting which simply means if this is if your website gets loaded in the iframe it will say if top top location is not equal to location top top location is equal to self top location okay how many of you understand the javascript well most of you then you know more than I do about this so I just know that this works but I do know javascript is not a good example you know not a good mitigation for anything because you don't control the javascript once it has gone to the browser it's gone to the browser if someone is sitting there may be removed steps of the javascript the user is still you know susceptible so Stanford there are bunch of people in Stanford they did some research and they looked at the top 500 websites in Alexa website ranking and something something thing and they looked at the top 500 websites and they realized that only 3 websites were using this or the x-frame header option 497 top 500 websites of Alexa which means a lot of big websites like hydrastic websites which means so many users they were not using it properly so this is their recommendation this is there is a style html visibility hidden script something I don't know why there is an fng I think this is a problem with that if self equal to equal to top document document style visibility is visible else top location is self location if javascript is disabled in the browser nothing will load otherwise it will work and set up I don't know Stanford guys are saying it maybe I want to believe them maybe I don't believe them but if you want to you try this this is a frame bursting option now even though if we have a header in http level why do we need to do this because people still use browser which are old there are so many installations of firefox 3.6 or before there are so many installations of IE6 maybe if you are worried about this it's breaking stuff there are no easy options but again are you targeting the kind of people where your website will run for IE6 all the time yeah I am not even done any research on that it's like let's not even go there let's just stick to the desktop browsers for now honestly it will be worse because now a lot of mobile browser Safari has started accepting and processing javascript but I am not really sure what they are doing with it I would like to believe that they are at least keeping up with these headers so if it's a new install of mobile Safari or mobile opera by the way opera doesn't support that extreme option we have an opera guy here somewhere this is what extreme options does first of all it's meant for that no prices for guessing but can you guess which company came up with this option Google? Microsoft for IE8 Internet Explorer 8 is when they realized that they needed something for avoiding link jamming there are couple of options that you can pass to it one is deny which is like don't render at all if inside a frame one is same origin which is like only if it's been served from the same domain then serve it and it is supported with IE8 and above, Firefox 4 and above Chrome 5 and above I am not sure of which version of Safari supports it it supports it now what this will do and I don't think it's visible but I am trying to load Gmail inside an iframe it refuses to load the image is showing that this content cannot be displayed in a frame only in IE Internet Explorer you will get this message in Firefox and Chrome it will just not show you anything but it will not give you a message also the simple reason is as soon as you start showing this kind of a message it's likely that someone will misuse it because they will add another link here for support which will download some EXC or something so Firefox and Chrome are like not showing anything Facebook doesn't load anything Times of India gets loaded and I haven't tried the other websites you might want to have a look at that I also have the same thing Gmail, Facebook and Twitter don't load because they are very clear if extreme options are set which has been sent by the server if the browser supports it we will not load inside a frame so you might realize how difficult the situation was for these guys it's a pretty drastic measure right that I will not allow iframing on my website at all even though we tend to rely on iframes for a lot of things that's all I have this is me my name is Akash Mahajal you can send me a mail if you have any questions about this there are a list of references after this if you need that I will be uploading it on Slideshare and you should also see JavaScript on my iframe there will be more ideas about attacks on JavaScript please give me a plus 1 if you liked it 0 if you didn't or your neutral minus 1 if you don't like it but please give feedback