Can frames hack the website?

Can frames hack the website?
Photo by Nahel Abdul Hadi / Unsplash

Suppose you get a link looking like your facebook login and you go and fill in your information. But, wait did you checked the url?

This is how easily you have been hacked. Wasn’t this really simple, you didn’t even got to know and someone has your credentials. I know, I know, everyone knows that don’t login to links you receive from someone. Let me bring this to next level for you. You must have visited some sites where it redirects you to some other page as you permit it(or it can get the permit itself). As you do this, you’re becoming the part of another attack called clickjacking.

How were the attackers able to do this?
The idea is really simple, the <iframe> tag. Here’s how clickjacking was done with facebook:
1. A visitor comes on a page that has victim’s site.
2. The page has a sweet link like “you won”, “get rich now”, “click here”
3. In attempt to clicking on the link, the user clicks button and the attacker got the hold of the user.
Now, don’t try this with facebook. It has been fixed of course. It wasn’t only this but twitter, paypal and many more were hacked this way.

Now, the question comes how do you save your website from attacks like this? For this you first need to know is your website the victim of this.
Try out this demo:

<html> <head> <title>Trusted web page</title><style type="text/css"> *{ margin:0; padding:0; } body {  background:#ffffff; } .button { padding:5px; background:#6699CC; left:275px; width:120px; border: 1px solid #336699; } #content { width: 500px; height: 500px; margin-top: 150px ; margin-left: 500px; } #clickjacking { position: absolute; left: 172px; top: 60px; filter: alpha(opacity=0); opacity:1.0 } </style></head> <body><iframe id="clickjacking" src="your wesbite url" width="1000" height="500" scrolling="no" frameborder="none"> </iframe> </body></html>

and save it with .html . On opening this in browser, if your website opens. It is vulnerable to framing attacks. Don’t worry! with a problem comes a solution.
To stop this, all you have to do is to add Content-Security-Policyin your headers file.

Header set Content-Security-Policy "frame-ancestors 'self' domain1 domain2;

domain1 and domain2 are the domains where you want to allow your website to be used in <iframe>, otherwise you can add none. Doing this, if someone trys to frame your website to their website, your website won’t work.

Please note the above provided information is to help you to make your application secure and not use it in an illegal manner.