Web Security 05 — X-Frame-Options

Published in

The Startup

4 min readApr 26, 2020

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/

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.