How It Works
Before explaining the issue of clickjacking, it’s important to understand how it works. Web developers use CSS and layers building pages with pixel placements. Layers are the building blocks for elements that lie on the Z axis. The X axis is a line that runs from the left side of the screen to the right. The Y axis runs from the top of the screen to the bottom. Now imagine a line that starts at the monitor and expands towards your face. This is the Z axis.
When a developer lays out a page using CSS, layers can be placed at the bottom to the top of the Z axis. For instance, an image placed on the Z axis at 2 would be placed on top of an image placed on the Z axis at 1. Elements placed on lower value properties sit “behind” elements set at higher values. This is how a developer can stack elements on a web page and design a layout using CSS.
The Clickjacking Setup
Another option for the developer is opacity. Opacity sets the way an element fades in or out of the page. Imagine a ghost when it fades in and out from view. Opacity set at lower values will fade out of view. When opacity reaches 0, it’s invisible to the user. The element is still accessible. Should a user click an element with an opacity set to 0, a click event still occurs even though the user can’t see it. This is the foundation for clickjacking — tricking users into clicking an invisible element.
Now, imagine placing an iframe on a page with opacity set to 0 and a button placed underneath. Since the iframe’s opacity is set to 0, the user cannot see the content placed over its elements. Should a user click a hidden element within the iframe, the event is passed to the iframe content. This might not seem terribly effective, but the right clickjacking event can cause several issues for the reader.
Using clickjacking, an attacker was able to distribute malware using Twitter in 2009 (http://shiflett.org/blog/2009/twitter-dont-click-exploit). The Twitter retweet button was hidden over another button that said, “Don’t click me.” The attacker tricked users into clicking the visible button, which really retweeted the URL to a malicious web page. In 2008, Adobe was forced to update its popular Flash software when an attacker used clickjacking to trick users into providing permissions to a computer’s camera and microphone.
Protecting Your Web Pages
Hijacking user clicks allows an attacker to perform numerous attacks on a user that lands on a web page with hidden elements, but the key issue with these attacks is the iframe. The iframe contains the hidden content, which can be used maliciously. Website owners can disallow their content in an iframe using the X-Frame-Options HTTP response header. This header should be used as a cyber security effort to protect your users.
With custom server headers, you can set the response from your hosting application such as IIS or Apache. Any pages that change user security settings or perform instant actions from a button should always have X-Frame-Options configured.
X-Frame-Options has three options, so you can still allow content in an iframe if you need it. The three options are:
- This option disallows the page from loading in an iframe regardless of the domain. If you never want the content in an iframe, this is the option you should set.
- This option tells the browser that it can load content in an iframe if the iframe’s domain is the same as the outer page. Use this option if you need to place content in an iframe on your own site.
X-Frame-Options: allow-from https://sampledomain.com
- Allow the “sampledomain.com” site to frame your content in an iframe. Use this option if you have a third-party domain that uses your site in an iframe.
How to Configure X-Frame-Options for IIS
- Navigate to the web.config file (usually at %systemroot%\system32\inetsrv\config)
<add name="X-Frame-Options" value="SAMEORIGIN" />
How to Configure X-Frame-Options for Apache
- Navigate to /etc/apache2/httpd. conf OR /etc/apache2/apache2
Header set X-Frame-Options "DENY"
Alternatively, the Content-Security-Policy response header has a frame-ancestors flag which can work in place of this header for supporting browsers.