Web Security 05 - X-Frame-Options

Published:	Wed 20 February 2019
By:	Brian Shen
Category:	Security
Tags:	Security Web X-Frame-Options Web Security

Contents

What is X-Frame-Options
How to fix
Sample clickjacking
Reference

All the sample code is in https://github.com/brianshen1990/WebSecurity .

1. 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.

There are mainly three types of options:

X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/

So what will happen is I don't set any value?

Let's have a test:

Modify the staticHack/index.html to add a iframe load our blog site:

<html>
<head>
</head>
<body>
  <div>
    <h5>Hack</h5>
    <a href='http://localhost:8888/api/transferPoints?dstUser=user02'>Click and you can get some discount in Amazon!</a>

    <hr />
    <iframe src="http://localhost:8888" ></iframe>
  </div>
</body>
</html>

Now start:

node index.js
node indexHack.js

Wow, our 8889 site can load 8888 site's content. That's not what we are expecting.

2. How to fix

Quite easy, all we need to do is to set the options to deny so that our blog site won't be embed in any other site.

In indexSafe.js :

...
app.disable('x-powered-by');
app.use(helmet.frameguard({ action: 'deny' }));

Now start again:

node indexSafe.js
node indexHack.js

We can see that our blog system won't be loaded in another site anymore.

3. Sample clickjacking

Let's talk something more about clickjacking.

Let's add another static page staticFile/hijack.html in our blog system.

<html>
<head>
  <script type="text/javascript">
    function hiJack(){
      alert('Secrets 12345678 from 8888 blog system');
    }
  </script>
</head>

<body>
  <div id='logon'>
    <input type="button" onclick="hiJack()" value="Secret From 8888" />
  </div>
</body>
</html>

And in the hack site, we also add an static page staticHack/hijack.html :

<html>
<head>
</head>
<body>
  <div>
    <iframe src="http://localhost:8888/hijack.html" ></iframe>
  </div>
</body>
</html>

And run sample:

node index.js
node indexHack.js

OK, if we are a user from blog system, then we know this will popup our secret, so we won't click the button at all.

But if we hide the iframe and put something interesting content above it to attract user to click the exactly position, then, we can luckily popup the secret.

So let's have a small change to our hack static page staticHack/hijack.html :

<html>
<head>
</head>
<body>
  <div>
    <image style="width: 180px; height: 60px; position: absolute;" src="./hijack.png"></image>
    <iframe src="http://localhost:8888/hijack.html"
      style="width: 300px; height: 150px; border: 0; border: none; position: absolute; opacity: 0.1;"></iframe>
  </div>
</body>
</html>