Clickjacking

Introduction

Clickjacking is an attack that tricks a user by clicking a web page element which is invisible or disguised as another element. It is performed by displaying an invisible page or HTML element, inside an iframe, on top of the page the user sees. The user believes they are clicking the visible page but in fact they are clicking an invisible element in the additional page transposed on top of it.

How to test

A basic way to test if your site is vulnerable to clickjacking is to create an HTML page and attempt to include a sensitive page from your website in an iframe. It is important to execute the test code on another web server, because this is the typical behavior in a clickjacking attack.

Use code like the following, provided as part of the OWASP Testing Guide:

<html> 
<head> 
<title>Clickjack test page</title> 
</head> 
<body> 
<h1>Website is vulnerable to clickjacking!</h1> 
<iframe src="http://demo.testfire.net/login.jsp" width="1000" height="500"></iframe> 
</body> 
</html>

If the text “Website is vulnerable to clickjacking” appears [as shown below] and below it you see the content of your sensitive page, the page is vulnerable to clickjacking.

Solution

Prevent the browser from loading the page in frame using the X-Frame-Options or Content Security Policy (frame-ancestors) HTTP headers.

Method 1

X-Frame-Options

Parameter Value

Meaning

SAMEORIGIN

Frame/iframe of content is only allowed from the same site origin.

DENY

Prevent any domain to embed your content using frame/iframe.

ALLOW-FROM

Allow framing the content only on particular URI.

PHP

To sent the header in response by this code.

<?php
header("X-Frame-Options: DENY");
?>

APACHE

For Apache, we have to insert the code in httpd.conf.

Header set X-Frame-Options DENY

NGINX

For nginx, we have to insert the code in nginx.conf.

add_header X-Frame-Options "DENY";

EXPRESS.JS

For Express.js, we have to insert the code in middleware statement.

app.use(function(req, res, next) {    
    res.header("X-Frame-Options", "DENY");
    next();
});

Method 2

Content-Security-Policy: Frame-Ancestors

The frame-ancestors directive can be used in a Content-Security-Policy HTTP response header to indicate whether or not a browser should be allowed to render a page in a <frame> or <iframe>.

Parameter value

Meaning

none

Prevents all domain from framing the content.

self

Allow the current site to frame the content.

*.somesite.com

Allow any page on somesite.com (using any protocol)

https://myfriend.site.com

Allow the page myfriend.site.com that uses HTTPS

PHP

To sent the header in response by this code.

<?php 
header("Content-Security-Policy: frame-ancestors 'none';"); 
?>

APACHE

For Apache, we have to insert the code in httpd.conf.

Header set Content-Security-Policy "frame-ancestors none;"

NGINX

For nginx, we have to insert the code in nginx.conf.

add_header Content-Security-Policy "frame-ancestors none;";

EXPRESS.JS

For Express.js, we have to insert the code in middleware statement.

app.use(function(req, res, next) { 
res.header("Content-Security-Policy", "frame-ancestors 'none';"); 
next(); 
});

Reference

PreviousSecurity Headers NextWeak Password

Last updated 5 years ago

Was this helpful?