You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 4-frames-and-windows/06-clickjacking/article.md
+28-30
Original file line number
Diff line number
Diff line change
@@ -4,22 +4,20 @@ The "clickjacking" attack allows an evil page to click on a "victim site" *on be
4
4
5
5
Many sites were hacked this way, including Twitter, Facebook, Paypal and other sites. They are all fixed, of course.
6
6
7
-
[cut]
8
-
9
7
## The idea
10
8
11
9
The idea is very simple.
12
10
13
11
Here's how clickjacking was done with Facebook:
14
12
15
-
1. A visitor is lured to the evil page. No matter how.
16
-
2. The page has a harmlessly-looking link on it (like "get rich now" or "click here, very funny" and so on).
13
+
1. A visitor is lured to the evil page. It doesn't matter how.
14
+
2. The page has a harmless-looking link on it (like "get rich now" or "click here, very funny").
17
15
3. Over that link the evil page positions a transparent `<iframe>` with `src` from facebook.com, in such a way that the "Like" button is right above that link. Usually that's done with `z-index`.
18
-
4.Clicking on that link, the visitor in fact presses that button.
16
+
4.In attempting to click the link, the visitor in fact clicks the button.
19
17
20
18
## The demo
21
19
22
-
Here's how the evil page looks like. To make things clear, the `<iframe>` is half-transparent (in real evil pages it's fully transparent):
20
+
Here's how the evil page looks. To make things clear, the `<iframe>` is half-transparent (in real evil pages it's fully transparent):
23
21
24
22
```html run height=120 no-beautify
25
23
<style>
@@ -53,7 +51,7 @@ The full demo of the attack:
53
51
54
52
Here we have a half-transparent `<iframe src="facebook.html">`, and in the example we can see it hovering over the button. A click on the button actually clicks on the iframe, but that's not visible to the user, because the iframe is transparent.
55
53
56
-
As a result if the visitor is authorized on facebook ("remember me" is usually turned on), then it adds a "Like". On Twitter that would be a "Follow" button.
54
+
As a result, if the visitor is authorized on Facebook ("remember me" is usually turned on), then it adds a "Like". On Twitter that would be a "Follow" button.
57
55
58
56
Here's the same example, but closer to reality, with `opacity:0` for `<iframe>`:
59
57
@@ -68,30 +66,30 @@ Technically, if we have a text field to hack, then we can position an iframe in
68
66
69
67
But then there's a problem. Everything that the visitor types will be hidden, because the iframe is not visible.
70
68
71
-
So that would look really odd to the user, and he will stop.
69
+
People will usually stop typing when they can't see their new characters printing on the screen.
72
70
```
73
71
74
72
## Old-school defences (weak)
75
73
76
-
The oldest defence method is the piece of JavaScript that forbids to open the page in a frame (so-called "framebusting").
74
+
The oldest defence is a bit of JavaScript which forbids opening the page in a frame (so-called "framebusting").
77
75
78
-
Like this:
76
+
That looks like this:
79
77
80
78
```js
81
79
if (top !=window) {
82
80
top.location=window.location;
83
81
}
84
82
```
85
83
86
-
That is: if the window finds out that it's not on the top, then it automatically makes itself the top.
84
+
That is: if the window finds out that it's not on top, then it automatically makes itself the top.
87
85
88
-
As of now, that's not reliable, because there are many ways to hack around it. Let's cover a few.
86
+
This not a reliable defence, because there are many ways to hack around it. Let's cover a few.
89
87
90
88
### Blocking top-navigation
91
89
92
90
We can block the transition caused by changing `top.location` in the [beforeunload](info:onload-ondomcontentloaded#window.onbeforeunload) event.
93
91
94
-
The top page (that belongs to the hacker) sets a handler to it, and when the `iframe` tries to change `top.location` the visitor gets a message asking him whether he wants to leave.
92
+
The top page (belonging to the hacker) sets a handler to it, and when the `iframe` tries to change `top.location` the visitor gets a message asking him whether he wants to leave.
In most cases the visitor would answer negatively, because he doesn't know about the iframe, all he can see is the top page, there's no reason to leave. And so the`top.location` won't change!
102
+
In most cases the visitor would answer negatively, because he doesn't know about the iframe, all he can see is the top page, leading him to think there is no reason to leave. So`top.location` won't change!
105
103
106
104
In action:
107
105
@@ -111,7 +109,7 @@ In action:
111
109
112
110
One of the things restricted by the `sandbox` attribute is navigation. A sandboxed iframe may not change `top.location`.
113
111
114
-
So we can add the iframe with `sandbox="allow-scripts allow-forms"`. That would relax the restrictions allowing scripts and forms. But we don't put `allow-top-navigation`in the value so that the navigation is still forbidden. And the change of `top.location`won't work.
112
+
So we can add the iframe with `sandbox="allow-scripts allow-forms"`. That would relax the restrictions, permitting scripts and forms. But we omit `allow-top-navigation` so that changing `top.location`is forbidden.
115
113
116
114
Here's the code:
117
115
@@ -123,21 +121,21 @@ There are other ways to work around that simple protection too.
123
121
124
122
## X-Frame-Options
125
123
126
-
Server-side header `X-Frame-Options` can allow or forbid showing the page inside a frame.
124
+
The server-side header `X-Frame-Options` can permit or forbid displaying the page inside a frame.
127
125
128
-
It must be sent by the server: browser ignore it if found in `<meta>`tags. So `<meta http-equiv="X-Frame-Options"...>` won't do anything.
126
+
It must be sent *by the server*: the browser will ignore it if found in a `<meta>`tag. So,`<meta http-equiv="X-Frame-Options"...>` won't do anything.
129
127
130
128
The header may have 3 values:
131
129
132
130
133
131
`DENY`
134
-
: Never ever show the page inside an iframe.
132
+
: Never ever show the page inside a frame.
135
133
136
134
`SAMEORIGIN`
137
-
: Allow to show inside an iframe if the parent document comes from the same origin.
135
+
: Allow inside a frame if the parent document comes from the same origin.
138
136
139
137
`ALLOW-FROM domain`
140
-
: Allows to show inside an iframe if the parent document is from the given domain.
138
+
: Allow inside a frame if the parent document is from the given domain.
141
139
142
140
For instance, Twitter uses `X-Frame-Options: SAMEORIGIN`. Here's the result:
143
141
@@ -147,15 +145,15 @@ For instance, Twitter uses `X-Frame-Options: SAMEORIGIN`. Here's the result:
147
145
148
146
<iframesrc="https://twitter.com"></iframe>
149
147
150
-
Depending on the browser, `iframe` above is either empty or it has a message telling that "the browser can't show it".
148
+
Depending on your browser, the `iframe` above is either empty or alerting you that the browser won't permit that page to be navigating in this way.
151
149
152
150
## Showing with disabled functionality
153
151
154
-
The protecting `X-Frame-Options` header has a side-effect. Other sites can't show our page in an `iframe`, even if they have "legal" reasons to do so.
152
+
The `X-Frame-Options` header has a side-effect. Other sites won't be able to show our page in a frame, even if they have good reasons to do so.
155
153
156
-
So there are other solutions. For instance, we can "cover" the page with a `<div>` with `height:100%;width:100%`, so that it handles all clicks. That `<div>` should disappear if `window == top` or we figure out that we don't need protection.
154
+
So there are other solutions... For instance, we can "cover" the page with a `<div>` with `height:100%;width:100%;`, so that it intercepts all clicks. That `<div>` should disappear if `window == top` or if we figure out that we don't need the protection.
157
155
158
-
Like this:
156
+
Something like this:
159
157
160
158
```html
161
159
<style>
@@ -188,13 +186,13 @@ The demo:
188
186
189
187
## Summary
190
188
191
-
Clickjacking is a way to "trick" users into a clicking on a victim site without even knowing what happens. That's dangerous if there are important click-activated actions.
189
+
Clickjacking is a way to "trick" users into clicking on a malicious site without even knowing what's happening. That's dangerous if there are important click-activated actions.
192
190
193
-
A hacker can post a link to his evil page in a message or lure visitors to his page by other means. There are many variants.
191
+
A hacker can post a link to his evil page in a message, or lure visitors to his page by some other means. There are many variations.
194
192
195
-
From one side -- the attack is "not deep": all a hacker can do is one click. But from another side, if the hacker knows that after the click another control appears, then it may use cunning messages to make the user to click on it as well.
193
+
From one perspective -- the attack is "not deep": all a hacker is doing is intercepting a single click. But from another perspective, if the hacker knows that after the click another control will appear, then he may use cunning messages to coerce the user into clicking on them as well.
196
194
197
-
The attack is quite dangerous, because when we engineer the UI we usually don't think that a hacker can click on behalf of the visitor. So vulnerabilities can be found in totally unexpected places.
195
+
The attack is quite dangerous, because when we engineer the UI we usually don't anticipate that a hacker may click on behalf of the visitor. So vulnerabilities can be found in totally unexpected places.
198
196
199
-
- It's recommended to use `X-Frame-Options: SAMEORIGIN` on pages that are totally not meant to be shown inside iframes (or just for the whole site).
200
-
- Use a covering `<div>` if we want to allow our pages to be shown in iframes, and still stay safe.
197
+
- It is recommended to use `X-Frame-Options: SAMEORIGIN` on pages (or whole websites) which are not intended to be viewed inside frames.
198
+
- Use a covering `<div>` if we want to allow our pages to be shown in iframes, but still stay safe.
0 commit comments