Web Security 05 — X-Frame-Options
1. Intro
What is X-Frame-Options: The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>
, <iframe>
, <embed>
or <object>
. Sites can use this to avoid clickjacking attacks by ensuring that their content is not embedded into other sites. (MDN)
There are mainly three types of options:
X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/
- Web Security 01 — Prepare
- Web Security 02 — Referrer
- Web Security 03 — X Powered By / Server
- Web Security 05 — X-Frame-Options
- Web Security 06 — CSP (Content Security Policy)
- Web Security 07 — XSS Protection
- Web Security 08 — Sniff
- Web Security 10 — CSRF
- Web Security 11 — CORS
- Web Security 12 — SQL Injection
2. Demo
What will happen if I don’t set any value? Let’s have a test: setup a simple malicious server (Port 8889)staticHack/index.html
in which an iframe is added to embed our blog system (8888):
Backend static file server:
Now start our blog system and the malicious server together:
npm i
npm start
npm run-script startHack
The malicious site on 8889 can load our blog site’s content. That’s not what we are expecting.
3. How to fix
Quite easy, all we need to do is to set the options to deny
in response in backend server indexSafe.js
and our blog site won't be embedded in any other sites.
Now start again:
npm run-script startSafe
npm run-script startHack
As we can see, our blog system won’t be loaded in any site.
4. Sample of clickjacking
Let’s talk more about clickjacking. Clickjacking is one kind of common iframe attack where hackers embed an invisible iframe into your document (or embed your document into their own malicious website) and use it to capture users’ interactions. This is a common way to mislead users or steal sensitive data.
In our demo, we will try to load a login user’s main page, and try to lead the user to transfer some points to our account unconsciously. Let’s add another static page staticHack/hijack.html
in malicious site to do 2 things:
- embed our blog system in an iframe ( so that even a user thinks he is dealing with our coupon system on 8889 but actually he is interacting with blog system on 8888)
- add buttons and inputs to let user input sensitive data (which should be in exactly same position)
node index.js
node indexHack.js
Let’s see our malicious coupon system (localhost:8889/hijack.html).
- the input which let user to input Robot Check Code is exactly on the top of the transfer input in our blog system
- the next button is exactly on the top of the transfer button in our blog system
When we input the user02, and then click next, 5 points will be transferred to user02.
The problem is, a user won’t click such kind of page, because they see the basic elements of blog system. A simple solution is to set the opacity of the iframe to 0, but another problem will come: the inputs will not be able to focus or type anymore.
Luckily , we can use other solutions:
- put iframe in a div
- only show part of it
Now our hack sites seems more convincible because we only show part of it:
What is this place? Fredericton Railway Bridge, Fredericton, NB, Canada.