Web Security - Clickjacking


A page that provides users with an interface to perform actions that the user might not wish to perform needs to be designed so as to avoid the possibility that users can be tricked into activating the interface.

It's a UI Redressing attacks.

One way that a user could be so tricked is if a hostile site places the victim site in a small iframe and then convinces the user to click, for instance by having the user play a reaction game. Once the user is playing the game, the hostile site can quickly position the iframe under the mouse cursor just as the user is about to click, thus tricking the user into clicking the victim site's interface.

To avoid this, sites that do not expect to be used in frames are encouraged to only enable their interface if they detect that they are not in a frame (e.g. by comparing the window object to the value of the top attribute).


If users are allowed to use the style tag, they could create a link that takes the whole page area and is not visible.

Example 1):

<a href="http://example.com/attack.html" style="
    display: block; 
    z-index: 100000; 
    opacity: 0; 
    position: fixed; 
    top: 0px; 
    left: 0; 
    width: 100vw; 
    height: 100vh;">&nbsp;</a>



Frame ancestors

The frame-ancestors csp directive restricts the URLs which can embed the resource using frame, iframe, object, or embed.

It works only with a http response header

Content-Security-Policy: frame-ancestors 'none'


This HTTP header is enforced at the browser level. It was never standardized and has been deprecated in favour of the frame-ancestors directive

Applying the X-Frame-Options directive via meta http-equi seems to not work.

<meta http-equiv="X-Frame-Options" content="deny"/>

Documentation / Reference

Discover More
HTML - Security (Secure applications)

This article is security when writing an application that shows HTML pages. HTMLHTTP security page HTML is a programming language that can download and run script. Therefore, you should be extremely...
HTTP - Content security policy (CSP)

CSP is a security response header that defines the behaviors that are trusted in your HTML page. In particular, it may restrict by defining the allowed host and origin of fetched resources. CSP can...
What are the elements of security in HTTP? Security headers and cookie properties explained

In HTTP, the security is done via the setting of: response header known as security header that drives the execution of the browser page load cookies properties mostly samesite that control if the...

Share this page:
Follow us:
Task Runner