What is click jacking?
It is the act of hijacking user’s click where the attacker decorates an authentic button or link with transparent or opaque layer so that the click is applied on another page instead of the top-level page.
The OWASP Cheat Sheet for Click jacking defense recommends using Content Security Policy (CSP). In this post I will show you how to defend your site using X-Frame-Options (an old school way) and Content Security Policy frame-ancestor directive (the cool kid way).
X-Frame-Options is a HTTP response header to indicate whether a browser can render a page in <frame>, <iframe>, <object> or <embed>. It is to prevent clickjacking by ensuring the content is not embedded into other sites. You can view a demo of a clickjacking here.
There are 3 possible directives to be applied, depending on your needs:
1. DENY — Disallow page to be frame at all.
2. SAMEORIGIN — Only a page with same origin can frame this page.
3. ALLOW-FROM — Only a page with the specified origin can frame this page. However, it will fail to load the page if the browser does not support this directive.
It is important to note that ALLOW-FROM and SAMEORIGIN refers to the browser’s top parent origin, not the immediate parent (i.e. the browser’s address bar URL). The two following diagrams below shows when a page is allowed to be framed and when it is not allowed.
In the diagram above observe that:
- myframesite.com/parent is loaded because it has the ALLOW-FROM set to http://mytopsite.com. The top-parent origin is also mytopsite.com which matches the origin set in ALLOW-FROM.
- myframesite.com/child fail to load because it has the SAMEORIGIN directive set. SAMEORIGIN refers to myframesite.com but in this case, the top-parent origin is mytopsite.com.
In the diagram above, myframesite.com/child can be loaded because ALLOW-FROM directive is set to http://mytopsite.com and this matches the top-parent origin.
Content Security Policy frame-ancestors directive
frame-ancestors is a directive in Content Security Policy header to specify valid parents that are allowed to embed a page.
- Content-Security-Policy: frame-ancestors ‘self’;
- Content-Security-Policy: frame-ancestors ‘<source>’ ‘<source>’;
- Content-Security-Policy: frame-ancestors ‘none’;
self: Only allow current site to frame
none: Disallow any domain from framing your page.
source: only whitelisted domain is allowed to frame. Example values can be ‘\*.mysite.com’ to allow any site with the domain mysite.com (both HTTP and HTTPS) to frame and ‘https://mysecuresite.com’ allows site with the domain mysecuresite.com (only HTTPS) to frame.
This the way how the Click jacking works.