XFO also know as X-Frame Options, if you are a web developer or aspirated to be one, security analyst then you might be hearing about X-Frame options. If you don’t know what it is and what is its role in security, then just hold on to the article. In this blog, I will be discussing what are X-Frame options, how to configure them in your website and what are the security effects that your application might face if you haven’t configured them.

What is the X-Frame option?

X-Frame option is a feature that will let your browser know how it should treat I-frames on the web page. When you are opening any web page if the web page has iframes then your web application needs to tell the browser if it should load iframes or not and if it loads how and from where it should load.

X-Frame options is a response header i.e when your browser requests server for a resource then the response header contains XFO which will help in handling the content of your web page.

How X-Frame Option can help with security?

XFO is mainly used to combat against Clickjacking by not allowing to load any iframes and even if they are loaded just by allowing them to load from the origin you specified as per your web application requirements.

Clickjacking attack

Clickjacking is an attack where the attacker will try to load some content above an actual web page and when the user clicks on attacker content the browser will start doing the things that the attacker wanted to do.

• The attacker tries victim to open a web page somehow may be social engineering or any other way. The intent is to make the victim visit some malicious page of the attacker
• The attacker keeps transparent iframe on some button or at someplace where it can be clickable or all over page which when clicked the attacker code starts executing.

Clickjacking Fix

There are 3 options in XFO which will help to fix clickjacking

X-Frame-Options: deny

X-Frame-Options: same-origin

X-Frame-Options: domain

X-Frame-Options: deny

When this option is configured in the header then browser won’t load any iframes in the webpage

X-Frame-Options: sameorigin

When this option is configured in the header then the browser will only load iframes that contain content loaded from the same web application IP address which is the content from the same web application.

X-Frame-Options: domain

When this option is configured in the header then the browser will load iframes that contain content loaded from the domain you have configured. If you have configured facebook.com in the domain then the browser will load iframes with the content from Facebook.

How to add X-Frame Header to any web application

Just before adding X-Frame options to the web application lets discuss Content Security Policy (CSP) which has come recently as X-Frame options lack so many features and were never standardized. There is something called frame-ancestors which can be used in CSP header to tell the browser how to deal with frame content.

Adding frame-ancestors

Common uses of CSP frame-ancestors:

Content-Security-Policy: frame-ancestors ‘none’;

This prevents any domain from rendering the framed content.

Content-Security-Policy: frame-ancestors ‘self’;

This only allows the current site to render the framed content that is from the same site.

Content-Security-Policy: frame-ancestors ‘self’ *.somesite.com https://myfriend.site.com;

This allows the current site, as well as any page on somesite.com (using any protocol), and only the page myfriend.site.com, using HTTPS only on the default port (443).

You can add X-Frame options in the header directly from the default configuration settings of your application or you may write your class for it. You may also add them in the base file of your web application and import it in other files. These are just my suggestions but just remember that there are many ways you can solve a problem so dig more.